Blocks reference

Every block available on this installation, with its props and the style groups it supports. Generated from the running CMS.

2 min readView as Markdown

On this page

Core blocks come from the blocks plugin; plugins (such as forms) add their own. A few primitives compose anything: Box (any HTML tag — a stack, a grid, a link, a button), Text and Heading, Link, Button, Image, Icon (1,500+ Phosphor icons), Input, Repeat and Page content. The rest — sections, columns, cards, quotes, code, tables, accordions — are available in the same block catalog, in every collection.

A block in Block Markdown and the API is {type, props, style, attrs, bind, logic, motion, children, label}: settings in props, CSS in style (Styles), extra attributes in attrs (a style attribute only sets CSS variables, such as --color-primary for one section), data connections in bind (Data and Repeat), scripts in logic (Interactions) and animations in motion (Animations). Every block accepts every style section unless it says otherwise.

A Table can head its rows with its first column and mark one column with Highlight Column. Look switches between plain lines and a soft look without rules: the marked column fills with your primary color, and on a phone a table of up to four columns stacks each row's heading above its values.

An Accordion has a Look too: lines, or cards with each question on a soft panel of its own.

Interactive

accordionAccordion

Expandable questions and answers (adds FAQ structured data).

Prop	Field	Notes
`items`	`repeater`	Items
`faq`	`toggle`	Mark Up as FAQ — Lets search engines and assistants quote the answers.
`look`	`select`	Look Options: lines, cards.

buttonButton

A link or button styled with the design system’s button styles.

Prop	Field	Notes
`label`	`richtext`	Label
`url`	`url`	Link
`variant`	`select`	Variant
`size`	`select`	Size Options: sm, md, lg.
`icon`	`text`	Icon
`icon_position`	`select`	Icon Position Options: start, end.
`new_tab`	`toggle`	Open in New Tab
`type`	`select`	Button Type Options: button, submit.

buttonsButtons

contains button

A row of buttons.

Prop	Field	Notes
`justify`	`select`	Align Options: start, center, end.

filter-choiceFilter Choice

inside list-filter

One choice for a List Filter. Its options and counts come from the items.

Prop	Field	Notes
`facet`	`text`	Field — One of the Repeat’s Filter By fields, e.g. category.
`label`	`text`	Label
`all_label`	`text`	Label for All
`look`	`select`	Look Options: chips, list.

inputInput

A text field, checkbox, slider or dropdown for interactive pages: keep its value in a state variable (Interact → Input value) and use it in scripts.

Prop	Field	Notes
`type`	`select`	Type Options: text, search, email, password, number, range, checkbox, select, textarea.
`label`	`text`	Accessible Label
`name`	`text`	Name — Sent with a form.
`placeholder`	`text`	Placeholder
`value`	`text`	Initial Value
`options`	`tags`	Options
`min`	`number`	Minimum
`max`	`number`	Maximum
`step`	`number`	Step

list-filterList Filter

contains blocks

Lets visitors filter a Repeat inside it by search and choices. Without scripts the whole list shows. Set Filter By and Search In on the Repeat.

Prop	Field	Notes
`status`	`text`	Result Count for Screen Readers

motion-toggleMotion Toggle

Lets visitors pause what moves by itself. Needed on a page with an animation that runs forever.

Prop	Field	Notes
`pause_label`	`text`	Pause Label
`play_label`	`text`	Play Label

searchSearch

A search button that opens instant search over every page (⌘K). Works on static sites.

Prop	Field	Notes
`label`	`text`	Label
`placeholder`	`text`	Placeholder
`empty`	`text`	No results text
`shortcut`	`toggle`	Open with ⌘K
`compact`	`select`	Icon Only Options: never, mobile, always.

tab-panelTab

contains blocksinside tabs

One panel of Tabs.

Prop	Field	Notes
`label`	`text`	Label

tabsTabs

contains tab-panel

Panels behind tabs, with keyboard support. Without scripts every panel shows, one after the other.

Prop	Field	Notes
`label`	`text`	Name for Screen Readers
`default`	`number`	Open First
`look`	`select`	Look Options: lines, segmented, vertical.

Layout

boxBox

contains blocks

A container for anything: lay out its children as a stack or grid with the Design panel. Any HTML tag, optionally a link or button.

Prop	Field	Notes
`tag`	`select`	HTML Tag Options: div, section, header, footer, main, nav, aside, article, ul, ol, li, figure, figcaption, span, label, button, form, details, summary, dialog, address, blockquote, dl, dt, dd, h1, h2, h3, h4, h5, h6, p.
`link`	`url`	Link
`new_tab`	`toggle`	Open in New Tab
`type`	`select`	Button Type Options: button, submit.

cardCard

contains blocks

A padded container, optionally linked.

Prop	Field	Notes
`link`	`url`	Link
`variant`	`select`	Look Options: plain, outline, filled, raised.

columnColumn

contains blocksinside columns

One column of a Columns block.

columnsColumns

contains column

Side-by-side columns that stack on small screens.

Prop	Field	Notes
`layout`	`select`	Layout Options: 1-1, 1-2, 2-1, 1-1-1, 1-1-1-1, 3-2, 2-3.
`gap`	`select`	Gap Options: token:space.0, token:space.2, token:space.4, token:space.6, token:space.8, token:space.12, token:space.16.
`align`	`select`	Vertical Align Options: stretch, start, center, end.
`stack`	`select`	Stack Below Options: md, lg, never.
`reverse`	`toggle`	Reverse Order When Stacked

dividerDivider

A horizontal rule.

gridGrid

contains blocks

A responsive grid of items (cards, features, logos).

Prop	Field	Notes
`columns`	`number`	Columns
`min`	`select`	Minimum Item Width Options: 10rem, 12rem, 16rem, 20rem, 24rem.
`gap`	`select`	Gap Options: token:space.0, token:space.2, token:space.4, token:space.6, token:space.8, token:space.12, token:space.16.

sectionSection

contains blocks

A full-width band with a centered inner width.

Prop	Field	Notes
`width`	`select`	Content Width Options: prose, content, wide, full.
`tag`	`select`	HTML Tag Options: section, header, footer, aside, main, nav, article, div.
`background_image`	`media`	Background Image
`overlay`	`select`	Overlay Options: none, light, dark.

spacerSpacer

Vertical space.

Prop	Field	Notes
`size`	`select`	Size Options: token:space.0, token:space.2, token:space.4, token:space.6, token:space.8, token:space.12, token:space.16.

stackStack

contains blocks

Children in a row or column with even spacing.

Prop	Field	Notes
`direction`	`select`	Direction Options: vertical, horizontal.
`gap`	`select`	Gap Options: token:space.0, token:space.2, token:space.4, token:space.6, token:space.8, token:space.12, token:space.16.
`align`	`select`	Align Options: stretch, start, center, end.
`justify`	`select`	Justify Options: start, center, end, between.
`wrap`	`toggle`	Wrap
`link`	`url`	Link
`new_tab`	`toggle`	Open in New Tab

Text

calloutCallout

Highlighted note, tip or warning.

Prop	Field	Notes
`text`	`richtext`	Text
`tone`	`select`	Tone Options: note, tip, warning, danger.

codeCode

Preformatted code with syntax highlighting and a copy button.

Prop	Field	Notes
`code`	`code`	Code
`language`	`select`	Language Options: bash, php, javascript, typescript, json, yaml, html, css, markdown, python, sql, plain.
`title`	`text`	Title
`highlight`	`toggle`	Highlight Syntax
`copy`	`toggle`	Copy Button

headingHeading

A title (h1–h6).

Prop	Field	Notes
`text`	`richtext`	Text
`level`	`select`	Level Options: 1, 2, 3, 4, 5, 6.
`anchor`	`slug`	Anchor
`permalink`	`toggle`	Show # Link on Hover

linkLink

contains blocks

A text link. Can hold other blocks (an icon, a label) too. Marks itself as current on its own page.

Prop	Field	Notes
`label`	`richtext`	Label
`url`	`url`	Link
`new_tab`	`toggle`	Open in New Tab

listList

Bulleted or numbered list.

Prop	Field	Notes
`items`	`json`	Items
`ordered`	`toggle`	Numbered

paragraphText

A paragraph — or any short text (label, caption, eyebrow) with the tag you choose.

Prop	Field	Notes
`text`	`richtext`	Text
`tag`	`select`	HTML Tag Options: p, span, div, small, strong, em, label, li, figcaption, blockquote, cite, time, address, dt, dd, legend, kbd, code.

quoteQuote

A quotation or testimonial.

Prop	Field	Notes
`text`	`richtext`	Quote
`cite`	`richtext`	Attribution

tableTable

Rows and columns — great for comparisons (and for AI answers).

Prop	Field	Notes
`rows`	`json`	Rows
`header`	`toggle`	First Row Is a Header
`row_headers`	`toggle`	First Column Is a Header
`highlight`	`number`	Highlight Column
`look`	`select`	Look Options: lines, soft.
`caption`	`text`	Caption

Media

embedEmbed

Maps, forms and other iframes from trusted providers.

Prop	Field	Notes
`url`	`url`	URL
`title`	`text`	Title — Describes the embed for screen readers.
`aspect`	`select`	Aspect Ratio Options: 16/9, 4/3, 1/1, 21/9.

iconIcon

An icon from the Phosphor set (1,500+ icons in four weights). Takes the text color; size it with width and height.

Prop	Field	Notes
`icon`	`text`	Icon
`label`	`text`	Accessible Label
`svg`	`code`	Custom SVG — Used instead of a named icon.

imageImage

A responsive image (WebP/AVIF, lazy-loaded).

Prop	Field	Notes
`image`	`media`	Image
`alt`	`text`	Alt Text — Describes the image for screen readers and search engines.
`caption`	`richtext`	Caption
`link`	`url`	Link
`aspect`	`select`	Aspect Ratio Options: auto, 1/1, 4/3, 3/2, 16/9, 21/9, 3/4, 4/5.
`priority`	`toggle`	Load First — For the main image above the fold.
`sizes`	`text`	Sizes — How wide it is shown, e.g. (min-width: 64rem) 50vw, 100vw.

videoVideo

YouTube, Vimeo or a video file — also as a silent background loop.

Prop	Field	Notes
`url`	`url`	Video URL
`caption`	`richtext`	Caption
`poster`	`media`	Poster Image
`autoplay`	`toggle`	Autoplay Muted
`controls`	`toggle`	Show Controls
`loop`	`toggle`	Loop

Form

form/checkboxCheckbox

Checkbox field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`show_if`	`group`	Only Show When

form/checkboxesCheckboxes

Checkboxes field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`options`	`textarea`	Options — One per line. Use value\|Label to store a different value.
`show_if`	`group`	Only Show When

form/dateDate

Date field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`show_if`	`group`	Only Show When

form/emailEmail

Email field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`placeholder`	`text`	Placeholder
`show_if`	`group`	Only Show When

form/fileFile upload

File upload field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`accept`	`select`	Allowed Files Options: documents, images, any.
`max_mb`	`number`	Max Size (MB)
`show_if`	`group`	Only Show When

form/hiddenHidden value

Hidden value field

Prop	Field	Notes
`name`	`text`	Field Name
`value`	`text`	Value

form/numberNumber

Number field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`placeholder`	`text`	Placeholder
`min`	`number`	Minimum
`max`	`number`	Maximum
`show_if`	`group`	Only Show When

form/radioChoice

Choice field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`options`	`textarea`	Options — One per line. Use value\|Label to store a different value.
`show_if`	`group`	Only Show When

form/selectDropdown

Dropdown field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`options`	`textarea`	Options — One per line. Use value\|Label to store a different value.
`placeholder`	`text`	Empty Option
`show_if`	`group`	Only Show When

form/telPhone

Phone field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`placeholder`	`text`	Placeholder
`show_if`	`group`	Only Show When

form/textShort text

Short text field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`placeholder`	`text`	Placeholder
`max`	`number`	Max Length
`autocomplete`	`select`	Autofill Options: off, name, given-name, family-name, organization, street-address, postal-code, address-level2, country-name.
`show_if`	`group`	Only Show When

form/textareaLong text

Long text field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`placeholder`	`text`	Placeholder
`rows`	`number`	Rows
`max`	`number`	Max Length
`show_if`	`group`	Only Show When

form/urlWebsite

Website field

Prop	Field	Notes
`label`	`text`	Label
`name`	`text`	Field Name — Key in submissions and emails, like company_name.
`required`	`toggle`	Required
`help`	`text`	Help Text
`placeholder`	`text`	Placeholder
`show_if`	`group`	Only Show When

forms/formForm

Embed a form (contact, quote request, newsletter…).

Prop	Field	Notes
`form`	`select`	Form

Dynamic

gate-breakTeaser Ends Here

On a page with a teaser, readers without access see what comes before this.

Embed

htmlCustom HTML

Raw HTML for embed codes. Only people with the “Custom HTML” permission can add it.

Prop	Field	Notes
`html`	`code`	HTML

Data

outletPage Content

In a template: where each page’s own blocks go.

Prop	Field	Notes
`wrap`	`toggle`	Wrap in a Container — Style the content area as one element.
`permalinks`	`toggle`	Add # Links to Headings

patternComponent

An instance of a component (synced pattern) — edit the component once, every instance updates. Set its properties per instance.

Prop	Field	Notes
`ref`	`select`	Component
`values`	`json`	Properties

repeatRepeat

contains blocks

Repeats its children for every item of a list: entries of a collection, a menu, child pages, headings, breadcrumbs… Inside, bind blocks to item.title, item.url and so on.

Prop	Field	Notes
`source`	`select`	List
`tag`	`select`	HTML Tag Options: div, section, header, footer, main, nav, aside, article, ul, ol, li, figure, figcaption, span, label, button, form, details, summary, dialog, address, blockquote, dl, dt, dd, h1, h2, h3, h4, h5, h6, p.
`as`	`text`	Item Name — Name the item for nested lists (e.g. post, link).
`group_by`	`text`	Group By — A field of the items. Repeats once per group, with item.label and item.items.
`filter_by`	`text`	Filter By — In a List Filter: the fields its choices filter on.
`search_in`	`text`	Search In — In a List Filter: the fields its search looks through.
`sort_by`	`text`	Sort By — In a List Filter: the fields its Filter Sort can order by.
`empty`	`text`	When Empty