Reference

Every block, documented

Q: How are FAQ answers formatted?

Answers support **markdown**, including links and lists.

Q: Where else can FAQs come from?

Omit `items` and the block falls back to the page-level `faqs` array.

Each section below is one block type: what it's for, the schema-backed YAML you write, and a live preview when a meaningful standalone preview is possible. The test suite validates every example.

`section-header`

Standalone section header with rich text intro.

section-header.yaml

blocks:
  - type: section-header
    intro: >-
      ## Section headers introduce a page section


      Use one wherever a group of blocks needs a heading and a sentence of
      context.

Section headers introduce a page section

Use one wherever a group of blocks needs a heading and a sentence of context.

`features`

Grid of feature cards with optional icons, names, and descriptions.

features.yaml

blocks:
  - type: features
    intro_content: "## A grid of features"
    items:
      - icon: hugeicons:cube
        name: Composable
        description: Pages are YAML lists of typed blocks.
      - icon: hugeicons:shield-01
        name: Validated
        description: Unknown types or keys fail the build loudly.
      - icon: hugeicons:rocket
        name: Static
        description: Everything renders to plain HTML at build time.

A grid of features

Composable
Pages are YAML lists of typed blocks.
Validated
Unknown types or keys fail the build loudly.
Static
Everything renders to plain HTML at build time.

`image-cards`

Grid of cards featuring images with names and optional descriptions.

image-cards.yaml

blocks:
  - type: image-cards
    items:
      - image: breakfast.jpg
        name: Breakfast
        description: Cards pair an image with a name and description.
        link: /news/
      - image: lunch.jpg
        name: Lunch
        description: Images get responsive srcset and LQIP placeholders.
      - image: dinner.jpg
        name: Dinner
        description: An optional link makes the whole card clickable.

Breakfast
Cards pair an image with a name and description.
Lunch
Images get responsive srcset and LQIP placeholders.
Dinner
An optional link makes the whole card clickable.

`stats`

Key metrics displayed as large numbers with labels.

stats.yaml

blocks:
  - type: stats
    items:
      - value: 35+
        label: Block types
      - value: 100%
        label: Line coverage
      - value: "0"
        label: Servers to run

Block types: 35+
Line coverage: 100%
Servers to run: 0

`code-block`

Terminal-style code display with macOS-like toolbar header.

code-block.yaml

blocks:
  - type: code-block
    filename: quick-start.sh
    language: bash
    code: |-
      npm install
      npm run serve

quick-start.sh

npm install
npm run serve

`hero`

Full-width hero banner with optional badge, markdown content, and action buttons.

hero.yaml

blocks:
  - type: hero
    badge: Hero block
    content: >-
      # A full-width opening banner


      Start most pages with one of these: a heading, a sentence of context, and
      the actions that matter.
    buttons:
      - text: Primary action
        href: /guide/
        variant: primary
        size: lg
      - text: Secondary
        href: /news/
        variant: secondary
        size: lg

Hero block

A full-width opening banner

Start most pages with one of these: a heading, a sentence of context, and the actions that matter.

Primary action Secondary

`split-image`

Two-column layout with text content and a responsive image.

split-image.yaml

blocks:
  - type: split-image
    subtitle: Split layouts
    content: >-
      ## Text beside an image


      The figure sits on the right by default; set `reverse: true` to flip the
      columns.
    figure_src: fireworks.jpg
    figure_alt: Fireworks over a city at night
    figure_caption: Captions are optional.

Split layouts

Text beside an image

The figure sits on the right by default; set reverse: true to flip the columns.

Fireworks over a city at night — Captions are optional.

`split-code`

Two-column layout with text content and a code block.

split-code.yaml

blocks:
  - type: split-code
    subtitle: Split layouts
    content: >-
      ## Text beside a code block


      Use this to walk through configuration or commands next to the
      explanation.
    figure_filename: site.json
    figure_language: json
    figure_code: |-
      {
        "name": "My Site",
        "url": "https://example.com"
      }

Split layouts

Text beside a code block

Use this to walk through configuration or commands next to the explanation.

site.json

{
  "name": "My Site",
  "url": "https://example.com"
}

`split-icon-links`

Two-column layout with text content and an icon-links list.

split-icon-links.yaml

blocks:
  - type: split-icon-links
    subtitle: Split layouts
    content: |-
      ## Text beside a list of links

      Each link gets an icon.
    figure_items:
      - icon: hugeicons:book-02
        text: Guides
        url: /guide/
      - icon: hugeicons:news
        text: News
        url: /news/
      - icon: hugeicons:search-01
        text: Search
        url: /search/

Split layouts

Text beside a list of links

Each link gets an icon.

`split-html`

Two-column layout with text content and custom HTML.

split-html.yaml

blocks:
  - type: split-html
    subtitle: Split layouts
    content: |-
      ## Text beside custom HTML

      The figure column renders whatever HTML you give it.
    figure_html: 

Split layouts

Text beside custom HTML

The figure column renders whatever HTML you give it.



`split-callout`

Two-column layout with text content and a styled callout box with icon, name, and subtitle.

split-callout.yaml

blocks:
  - type: split-callout
    subtitle: Split layouts
    content: |-
      ## Text beside a callout card

      Good for highlighting one key fact or contact route.
    figure_icon: hugeicons:call
    figure_name: Talk to a person
    figure_subtitle: Phone lines open 9-5, Monday to Friday.

Split layouts

Text beside a callout card

Good for highlighting one key fact or contact route.

Talk to a person

Phone lines open 9-5, Monday to Friday.

`split-full`

Full-width two-panel layout with distinct background colors per side.

split-full.yaml

blocks:
  - type: split-full
    variant: dark-left
    left_content: |-
      ## Two panels

      Each side takes its own content and button.
    left_button:
      text: Left action
      href: /guide/
      variant: secondary
    right_content: |-
      ## Side by side

      Variants control which side is dark.
    right_button:
      text: Right action
      href: /news/

Two panels

Each side takes its own content and button.

Left action

Side by side

Variants control which side is dark.

Right action

`cta`

Call-to-action banner with gradient background.

cta.yaml

blocks:
  - type: cta
    content: |-
      ## Ready to try it?

      A call-to-action closes the page with one clear next step.
    button:
      text: Read the guides
      href: /guide/
      size: lg

`callout`

One-column callout/note with icon, name, and short content — for content warnings, advisories, tips, etc.

callout.yaml

blocks:
  - type: callout
    variant: info
    icon: hugeicons:information-circle
    name: Good to know
    content: Callouts hold short advisories, tips, and warnings. Four color variants
      are available.

`image-background`

Full-width image background with hero-style overlay content (badge, markdown content, buttons) and optional parallax.

image-background.yaml

blocks:
  - type: image-background
    image: city-traffic-night.jpg
    image_alt: City traffic at night
    tint: true
    badge: Image background
    content: |-
      # Content over a full-width image

      A tint keeps the text readable.

Image background

Content over a full-width image

A tint keeps the text readable.

`items`

Displays an Eleventy collection as a card grid or horizontal slider.

items.yaml

blocks:
  - type: items
    collection: news
    intro_content: |-
      ## A collection as cards

      This example renders the `news` collection.

A collection as cards

This example renders the news collection.

`items-array`

Renders items from an explicit list of paths. The collection is inferred dynamically from each item's path. Directory paths (ending in / or with no .md extension) expand to every item in that directory.

items-array.yaml

blocks:
  - type: items-array
    items:
      - news
    intro_content: |-
      ## Hand-picked items

      List file paths, or a directory to include everything in it.

Hand-picked items

List file paths, or a directory to include everything in it.

`items-text-list`

Renders a collection as a comma-separated inline list of links, with optional introductory markdown text prepended. Excludes the current page from the list.

items-text-list.yaml

blocks:
  - type: items-text-list
    collection: news
    intro_content: "Read our latest news posts:"

Read our latest news posts:

`link-columns`

Renders a collection as a plain-text unordered list of links arranged in responsive CSS columns. Optionally strips matching text via a regex so repetitive prefixes/suffixes can be removed.

link-columns.yaml

blocks:
  - type: link-columns
    collection: news
    intro_content: "## A collection as link columns"

A collection as link columns

`markdown`

Renders markdown content as rich text.

markdown.yaml

blocks:
  - type: markdown
    content: >-
      ## Plain markdown


      The simplest block: write markdown, get rich text. Lists, links, and
      **emphasis** all work.


      - One

      - Two

      - Three

Plain markdown

The simplest block: write markdown, get rich text. Lists, links, and emphasis all work.

One
Two
Three

`table-of-contents`

In-page contents built from the headings the page actually renders.

table-of-contents.yaml

blocks:
  - type: table-of-contents
    title: On this page
    levels: 2,3

`html`

Outputs raw HTML without processing.

html.yaml

blocks:
  - type: html
    content: Raw HTML passes straight through - the escape hatch
      for one-off markup.

Raw HTML passes straight through - the escape hatch for one-off markup.

`iframe-embed`

Third-party iframe embed (itch.io widgets, Buttondown, Bandcamp, Stripe buttons, etc).

iframe-embed.yaml

blocks:
  - type: iframe-embed
    src: /news/
    name: The news page, embedded
    aspect_ratio: 16/9
    max_width: 560px

`include`

Includes an arbitrary template file.

include.yaml

blocks:
  - type: include
    file: demo-include.html

This paragraph comes from src/_includes/demo-include.html, pulled in by an include block - the escape hatch for content the block system doesn't cover.

`news-meta`

Renders a news post's metadata: author name plus the post date.

news-meta.yaml

blocks:
  - type: news-meta

`faqs`

Renders question/answer pairs as a definition list. Available on all page types.

faqs.yaml

blocks:
  - type: faqs
    intro_content: "## Frequently asked questions"
    items:
      - question: How are FAQ answers formatted?
        answer: Answers support **markdown**, including links and lists.
      - question: Where else can FAQs come from?
        answer: Omit `items` and the block falls back to the page-level `faqs` array.

Frequently asked questions

How are FAQ answers formatted?: Answers support markdown, including links and lists.
Where else can FAQs come from?: Omit items and the block falls back to the page-level faqs array.

`guide-categories`

Displays the site-wide guide categories.

guide-categories.yaml

blocks:
  - type: guide-categories

`guide-header`

Renders a guide page's heading: title and optional subtitle.

guide-header.yaml

blocks:
  - type: guide-header

`guide-navigation`

Renders a 'Back to ' breadcrumb link for a guide page.

guide-navigation.yaml

blocks:
  - type: guide-navigation

`guide-pages-list`

Lists the guide pages that belong to the current guide category (filtered via guidesByCategory).

guide-pages-list.yaml

blocks:
  - type: guide-pages-list

`link-button`

Standalone centered button linking to an anchor or URL.

link-button.yaml

blocks:
  - type: link-button
    text: A standalone button
    href: /search/
    variant: primary

A standalone button

`gallery`

Image grid with optional aspect ratio cropping and captions.

gallery.yaml

blocks:
  - type: gallery
    intro_content: "## An image grid"
    aspect_ratio: 4/3
    items:
      - image: breakfast.jpg
        caption: Breakfast
      - image: lunch.jpg
        caption: Lunch
      - image: dinner.jpg
        caption: Dinner
      - image: fireworks.jpg
        caption: Fireworks

An image grid

Breakfast
Lunch
Dinner
Fireworks

`marquee-images`

Continuously scrolling marquee of images (e.g. brand logos, partner badges).

marquee-images.yaml

blocks:
  - type: marquee-images
    height: 60px
    items:
      - image: breakfast.jpg
        alt: Breakfast
      - image: lunch.jpg
        alt: Lunch
      - image: dinner.jpg
        alt: Dinner
      - image: fireworks.jpg
        alt: Fireworks

`icon-links`

Vertical list of links with icons, rendered as a flex column stack.

icon-links.yaml

blocks:
  - type: icon-links
    intro_content: "## Links with icons"
    items:
      - icon: hugeicons:book-02
        text: Read the guides
        url: /guide/
      - icon: hugeicons:news
        text: Latest news
        url: /news/
      - icon: hugeicons:search-01
        text: Search the site
        url: /search/

Links with icons

`downloads`

List of downloadable files. Each item auto-detects its icon from the file extension and its size from the filesystem at build time.

downloads.yaml

blocks:
  - type: downloads
    intro_content: "## Files to download"
    items:
      - file: /files/template-overview.txt
        label: Template overview (TXT)

Files to download

Template overview (TXT) TXT · 305 B

`snippet`

Renders blocks from a named snippet file, enabling reusable block compositions.

snippet.yaml

blocks:
  - type: snippet
    reference: demo