Blocks¶
Static content sections. Each is chosen by type.
BlockBase¶
| Field | Type | Default | Description |
|---|---|---|---|
id |
string (optional) | null |
|
nav_label |
string (optional) | null |
|
band |
boolean | false |
Alternate background band |
surface |
enum (optional) | null |
Colour scheme for this section: dark inverts the theme, accent uses its soft accent colour. In the stack layout each section is a panel, so this sets the panel's colour. Allowed values: "light", "dark", "accent". |
backdrop |
string or ImageInput (optional) | null |
Full-bleed image behind the whole section: a file, URL, generate: or gradient:. In the stack layout it is the panel's own backdrop. Pair with surface for legible text. |
transition |
Transition (optional) | null |
How this section hands over to the next one, in film grammar: cut, dissolve, wipe, iris, whip, match (a shared shape) or carry (an element travels over). Unset: the sections just follow one another. A bare name works: transition: whip. See Transition |
IntroBlock¶
A section with type: intro.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"intro" |
"intro" |
|
kicker |
string (optional) | null |
|
title |
string | required | |
body |
string (optional) | null |
|
button |
Link (optional) | null |
Used in: JourneyStop.blocks, Site.sections.
FeaturesBlock¶
A section with type: features.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"features" |
"features" |
|
kicker |
string (optional) | null |
|
title |
string (optional) | null |
|
items |
list of Feature | required |
Used in: JourneyStop.blocks, Site.sections.
StatsBlock¶
A section with type: stats.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"stats" |
"stats" |
|
items |
list of Stat | required | |
look |
enum | "plain" |
plain: big figures; divided: a quieter row of figures with small labels, parted by thin vertical rules Allowed values: "plain", "divided". |
Used in: JourneyStop.blocks, Site.sections.
TimelineBlock¶
A section with type: timeline.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"timeline" |
"timeline" |
|
kicker |
string (optional) | null |
|
title |
string (optional) | null |
|
items |
list of TimelineItem | required |
Used in: JourneyStop.blocks, Site.sections.
QuoteBlock¶
A section with type: quote.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"quote" |
"quote" |
|
text |
string | required | |
who |
string (optional) | null |
Used in: JourneyStop.blocks, Site.sections.
CtaBlock¶
A section with type: cta.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"cta" |
"cta" |
|
kicker |
string (optional) | null |
|
title |
string | required | |
button |
Link (optional) | null |
|
background |
string (optional) | null |
'scene:<id>' uses that scene's last frame, or an image path |
Used in: JourneyStop.blocks, Site.sections.
GalleryBlock¶
A section with type: gallery.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"gallery" |
"gallery" |
|
kicker |
string (optional) | null |
|
title |
string (optional) | null |
|
items |
list of GalleryItem | required |
Used in: JourneyStop.blocks, Site.sections.
HeroBlock¶
A section with type: hero.
A full-screen opening: headline over a photo or looping video, with an optional badge and buttons. The landing page kit adds a rating line, an inline email signup, a row of figures, a logo strip and a framed card; a hero that uses any of them is set in the kit's type scale and spacing.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"hero" |
"hero" |
|
badge |
string or Badge (optional) | null |
Small pill above the headline (e.g. 'Now open in Lisbon'), or {text, href, tag, icon} for a link with a 'New' tag or a dot |
title |
string | required | |
body |
string (optional) | null |
|
buttons |
list of Link | [] |
The first is the primary button |
image |
string or ImageInput (optional) | null |
Background photo (file, URL or generate:) |
video |
string (optional) | null |
Background video file (muted, looping); image is its poster |
align |
enum | "center" |
Allowed values: "center", "left". |
device |
Device (optional) | null |
A phone rising from the bottom edge under the copy |
rating |
Rating (optional) | null |
A rating line under the buttons: stars, score and source |
signup |
SignupForm (optional) | null |
An inline email field and button under the copy |
stats |
list of Stat | [] |
A row of figures with thin dividers under the copy |
logos |
LogoRow (optional) | null |
A strip of partner logos along the bottom of the hero |
frame |
"card" (optional) |
null |
card: present the section as a rounded card inset on a border in the theme's accent colours (accent to accent2), as many current landing pages frame their opening. Wide screens only: on a phone it stays full-bleed. Overlay and cards scenes frame their stage, split scenes their picture, a hero its whole panel |
Used in: JourneyStop.blocks, Site.sections.
ProductBlock¶
A section with type: product.
Product or service panel: a large image and/or a phone on one side, copy, tags and buttons on the other.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"product" |
"product" |
|
kicker |
string (optional) | null |
|
title |
string | required | |
body |
string (optional) | null |
|
tags |
list of string | [] |
Small pills under the body |
buttons |
list of Link | [] |
The first is the primary button |
note |
string (optional) | null |
Small print under the buttons (e.g. a price) |
image |
string or ImageInput (optional) | null |
Product shot. On light surfaces a white background disappears (multiply blend), so generate it 'on a plain white background' |
knockout |
boolean | true |
Whiten the shot's light studio background (sampled from its edges) so the product floats on the panel instead of sitting in a grey box |
device |
Device (optional) | null |
|
side |
enum | "left" |
Which side the image goes on Allowed values: "left", "right". |
pose |
enum | "beside" |
How the phone sits, so a run of product panels doesn't repeat one composition. beside: next to the copy. rise: centred under centred copy, cut off by the panel's bottom edge. close: larger, top-aligned beside the copy and cut off below. lean: tilted out of the lower corner on side, running off the edges. pair: with a second phone (behind), the two swapping places on a loop. turn: turned in perspective towards the copyAllowed values: "beside", "rise", "close", "lean", "pair", "turn". |
behind |
Device (optional) | null |
pair: the second phone (its own image or video) |
stats |
list of Stat | [] |
Big figures under the body, shown instead of the tags |
Used in: JourneyStop.blocks, Site.sections.
StripBlock¶
A section with type: strip.
A row of photos that slides sideways as you scroll.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"strip" |
"strip" |
|
kicker |
string (optional) | null |
|
title |
string (optional) | null |
|
body |
string (optional) | null |
|
items |
list of StripItem | required |
Used in: Site.sections.
OrbitBlock¶
A section with type: orbit.
Services arranged around a centre on rings that turn as you scroll, each with a status.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"orbit" |
"orbit" |
|
kicker |
string (optional) | null |
|
title |
string | required | |
body |
string (optional) | null |
|
center |
string | required | Label in the middle (usually the brand) |
items |
list of OrbitItem | required |
Used in: Site.sections.
FaqBlock¶
A section with type: faq.
Questions and answers as an accordion (works without JavaScript).
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
type |
"faq" |
"faq" |
|
kicker |
string (optional) | null |
|
title |
string | "Questions" |
|
items |
list of FaqItem | required |
Used in: JourneyStop.blocks, Site.sections.
LogosBlock¶
A section with type: logos.
A strip of partner or customer logos, in one colour: 'Trusted by teams at ...'.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
title |
string (optional) | null |
A small line above the logos, e.g. 'Trusted by teams at' |
items |
list of Logo | required | Constraints: at least 1 items. |
tint |
enum | "mono" |
mono: every logo in the theme's text colour (silhouettes; greys for pictures without transparency); original: their own colours Allowed values: "mono", "original". |
type |
"logos" |
"logos" |
Used in: Site.sections.
SignupBlock¶
A section with type: signup.
An email signup: a headline, a line of copy and an inline email field with its button (a plain HTML form that
posts to the action you name, or opens an email with mailto:), with an optional rating line under it.
Also takes every field of BlockBase.
| Field | Type | Default | Description |
|---|---|---|---|
action |
string | required | Where the form goes: an https URL that accepts a form post, or mailto:you@example.com |
method |
enum | "post" |
How the form is sent (a mailto: form always posts) Allowed values: "post", "get". |
name |
string | "email" |
The field name the service expects Constraints: matches ^[A-Za-z][\w.\-\[\]]{0,63}$. |
label |
string | "Email address" |
The field's label, read by screen readers (and shown when the placeholder is empty) |
placeholder |
string | "you@example.com" |
Faint example text in the empty field |
button |
string | "Sign up" |
The button's words |
note |
string (optional) | null |
Small print under the field, e.g. 'No spam. Leave any time.' |
hidden |
map of string to string | {} |
Extra hidden fields the service needs (a list id, a redirect URL) |
type |
"signup" |
"signup" |
|
kicker |
string (optional) | null |
|
title |
string | required | |
body |
string (optional) | null |
|
rating |
Rating (optional) | null |
Used in: Site.sections.