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: /how-it-works/
      - 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
    intro_content: "## Commands to get started"
    filename: quick-start.sh
    language: bash
    code: |-
      npm install
      npm run serve

Commands to get started

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: /how-it-works/
        variant: primary
        size: lg
      - text: Secondary
        href: /blocks/
        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-video`

Two-column layout with text content and an embedded video.

split-video.yaml

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

      The video loads when a visitor presses play.
    figure_video_id: dQw4w9WgXcQ
    figure_thumbnail_url: dinner.jpg
    figure_alt: A YouTube video
    figure_caption: Captions are optional.

Split layouts

Text beside a video

The video loads when a visitor presses play.

`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: How it works
        url: /how-it-works/
      - icon: hugeicons:cube
        text: Blocks
        url: /blocks/
      - 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: /how-it-works/
      variant: secondary
    right_content: |-
      ## Side by side

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

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: How it works
      href: /how-it-works/
      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.

`video-background`

Full-width video playing silently behind hero-style overlay content (badge, markdown content, buttons).

video-background.yaml

blocks:
  - type: video-background
    video_id: dQw4w9WgXcQ
    thumbnail_url: city-traffic-night.jpg
    badge: Video background
    content: |-
      # Content over a full-width video

      The thumbnail shows until the video is playing.

Video background

Content over a full-width video

The thumbnail shows until the video is playing.

`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: /search/
    name: The search 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, or as collapsed accordions with collapsible: true. 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

`video-cards`

Grid of click-to-play video thumbnails. Takes YouTube IDs and the embed URLs of other providers (Vimeo, Bunny Stream).

video-cards.yaml

blocks:
  - type: video-cards
    videos:
      - id: dQw4w9WgXcQ
        name: A YouTube video
        thumbnail_url: breakfast.jpg
      - id: https://player.vimeo.com/video/76979871
        name: A Vimeo video
        thumbnail_url: lunch.jpg
      - id: https://iframe.mediadelivery.net/embed/1/example
        name: A video with no thumbnail

A YouTube video
A Vimeo video
A video with no thumbnail

`reviews`

Customer reviews as cards, newest first: rating, date, the reviewer's words, and a link to where they wrote it.

reviews.yaml

blocks:
  - type: reviews
    minimum_rating: 4
    limit: 6
    intro_content: "## What customers say"

What customers say

★★★★★ Nov 2026

Great fast service and always on hand to assist with after care

Luke PhillipsView on Facebook
★★★★★ Nov 2026

Stefan has a great service that takes an in depth look at your website for you, it analyzes each page and scores them on different factors.
So there’s a detailed spreadsheet attached like most SEO reports but what I really liked is how he turned it into a hilarious podcast between 2 hosts about big issues to small ones like struggling to spell the word favourite across the website! Ha very true but I always thought I spelt it right, now I know!
It’s great having people do work on your website for you, but equally knowing for yourself what’s wrong and how SEO works is more beneficial.

Beyond BounceView on Google
★★★★★ Nov 2026

Fantastic service.

The help I received was incredible, everything was explained to me and was made so easy for me to do.I would 100% recommend and I will continue to use chobble in the future.

Gem BarrettView on Trustpilot
★★★★★ Nov 2026

This man is a genius. Completely revolutionised my Event ticketing. The system is straight forward, simple to use but feature packed. Constantly improving as well. Thank you so much for creating it and for such a ridiculously good price. Also very helpful, knowledgeable and quick at looking into problem or questions.

Philip DixonView on Facebook
★★★★★ Nov 2026

Ethical Dev.

I hardly ever write reviews - They're the sort of thing I intend to do, but it slips my mind. A restaurant may provide great service, value and friendly staff and I fully intend to write one, but I never get round to it, it just isn't compelling enough.I HAVE to write one for Chobble.They're so different to anything else and I would be remiss if I didn't take two minutes of my time to tell people about them.The company is a CiC, which by itself is outstanding - But this is basically their way of life. They manage to hold true to their own personal values while performing excellent work and running a successful company without compromising themselves. They open-source their projects and their priority isn't profit. They open-source their own tools, projects and truly want collaboration and interoperability with everyone!They donate 10% of earnings to charity and aren’t just the choice you should make because of ethical values you may hold, they're the best choice because they're actually brilliant, and I MEAN brilliant in the truest sense of the word - Not the overused term it has become.

Spencer ElliottView on Trustpilot
★★★★★ Nov 2026

I’d highly recommend Stefan at Chobble. He’s helped with our Best Party Hire website and SEO, and built our Midland Play Inspections website.

He’s approachable and very generous with his knowledge, happy to answer questions and explain things clearly. His honest advice and attention to detail have been really valuable, and it’s lovely to work with someone who takes the time to understand your business.

Luke EmersonView on Facebook

`contact-form`

A contact form, optionally beside text, that posts to a form service.

contact-form.yaml

blocks:
  - type: contact-form
    content: |-
      ## Get in touch

      Tell us what you need and we will get back to you.
    fields:
      - label: Name
        name: name
        required: true
      - label: Email
        name: email
        type: email
        required: true
      - label: What do you need?
        name: service
        type: select
        options:
          - A new website
          - Help with an existing site
          - Something else
      - label: Message
        name: message
        type: textarea
        required: true

Get in touch

Tell us what you need and we will get back to you.

`quote-form`

The visitor's quote: the products they added, an estimated price, and a form that sends the request to a form service.

quote-form.yaml

blocks:
  - type: quote-form
    content: |-
      ## Your quote

      Add products to see them here.

Your quote

Add products to see them here.

Your quote is empty. Add products to it and they will appear here.

`add-to-quote`

An add-to-quote button for the product the page describes.

add-to-quote.yaml

blocks:
  - type: add-to-quote

`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: How it works
        url: /how-it-works/
      - icon: hugeicons:cube
        text: Browse the blocks
        url: /blocks/
      - 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 · 311 B

`snippet`

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

snippet.yaml

blocks:
  - type: snippet
    reference: demo