Blocks

Every block on this site, with its settings and the style groups it supports, generated from the running CMS.

On this page

Every block you can add to a page, template or component is listed below, with its settings. Core blocks come with Lettern; 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, like sections, columns, cards, quotes, code, tables and accordions, are 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 (Showing content), 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

Questions with answers that expand.

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 styled as a button.

Prop	Field	Notes
`label`	`richtext`	Label
`url`	`url`	Link
`variant`	`select`	Style
`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

Choices to filter by.

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 field for interactive pages.

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

Search and filter a list.

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

motion-toggleMotion Toggle

Lets visitors pause animations.

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

searchSearch

Search across the whole site.

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 the tabs.

Prop	Field	Notes
`label`	`text`	Label

tabsTabs

contains tab-panel

Content behind tabs.

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.

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 box, optionally linked.

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

columnColumn

contains blocksinside columns

One column.

columnsColumns

contains column

Side-by-side columns.

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 On Options: md, lg, never.
`reverse`	`toggle`	Reverse Order When Stacked

dividerDivider

A horizontal line.

gate-breakTeaser Ends Here

Members-only content starts here.

gridGrid

contains blocks

Cards or logos in a grid.

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.

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

Empty 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

Blocks in a row or column.

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

A highlighted note or tip.

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

codeCode

Code with syntax highlighting.

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 or subtitle.

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.

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

listList

A bulleted or numbered list.

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

paragraphText

A paragraph or short label.

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.

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, playlists and other embeds.

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

A symbol, like an arrow.

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

imageImage

A photo or illustration.

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
`sizes`	`text`	Shown Width

videoVideo

YouTube, Vimeo or a video file.

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

Forms

form/checkboxCheckbox

A single yes or no

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

Any number of options

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

A date

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

An email address

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

A file the visitor sends

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

A value sent unseen

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

form/numberNumber

A number

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

One option, all in view

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

One option from a list

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

A phone number

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

One line of text

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

Several lines of text

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

A web address

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

Shows one of your forms

Prop	Field	Notes
`form`	`select`	Form

Embeds

htmlCustom HTML

Your own HTML code.

Prop	Field	Notes
`html`	`code`	HTML

Data

outletPage Content

Where each page’s content goes.

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

patternComponent

A reusable component.

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

repeatRepeat

contains blocks

Repeats blocks for each item.

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