Section
A generic page section: a short header — eyebrow, headline, blurb (and an optional image) — above an arbitrary body. Use it to introduce any content block with a title and intro, especially primitives that have no header of their own like bento, a grid of cards, or a collection.
It reads the same header slots as feature, hero, and reveal — no extra tags. The first paragraph is the eyebrow, the first heading the headline, the next paragraph the blurb; everything after is the body.
Basic usage
{% section %}
Composability
## Runes that work together
Every block is a rune — combine them freely to build a page.
{% bento %}
## Marketing
Hero, CTA, pricing, testimonials.
## Docs
API references, changelogs, symbols.
## Storytelling
Characters, realms, factions, lore.
{% /bento %}
{% /section %}<section data-field="content-section" data-rune="section" data-rune-fields="{"align":"start"}">
<header>
<p data-name="eyebrow">Composability</p>
<h2 id="runes-that-work-together" data-name="headline">Runes that work together</h2>
<p data-name="blurb">Every block is a rune — combine them freely to build a page.</p>
</header>
<div data-name="body">
<section data-rune="bento" data-rune-fields="{"gap":"1rem","columns":"6","row-height":"","content-height":"","media-ratio":"","collapse":""}">
<div data-name="grid">
<div data-field="cell" data-rune="bento-cell" data-rune-fields="{"size":"large","cols":"4","rows":"2","content-height":"","media-ratio":""}" data-media-position="start">
<h3 id="marketing" data-name="title">Marketing</h3>
<div data-name="body">
<p>Hero, CTA, pricing, testimonials.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell" data-rune-fields="{"size":"large","cols":"4","rows":"2","content-height":"","media-ratio":""}" data-media-position="start">
<h3 id="docs" data-name="title">Docs</h3>
<div data-name="body">
<p>API references, changelogs, symbols.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell" data-rune-fields="{"size":"large","cols":"4","rows":"2","content-height":"","media-ratio":""}" data-media-position="start">
<h3 id="storytelling" data-name="title">Storytelling</h3>
<div data-name="body">
<p>Characters, realms, factions, lore.</p>
</div>
</div>
</div>
</section>
</div>
</section>Composability
Runes that work together
Every block is a rune — combine them freely to build a page.
Marketing
Hero, CTA, pricing, testimonials.
Docs
API references, changelogs, symbols.
Storytelling
Characters, realms, factions, lore.
<section data-field="content-section" class="rf-section rf-section--start" data-align="start" data-rune="section" data-density="full">
<header data-name="preamble" class="rf-section__preamble" data-section="preamble">
<p data-name="eyebrow" class="rf-section__eyebrow">Composability</p>
<h2 id="runes-that-work-together" data-name="headline" class="rf-section__headline" data-section="title">Runes that work together</h2>
<p data-name="blurb" class="rf-section__blurb" data-section="description">Every block is a rune — combine them freely to build a page.</p>
</header>
<div data-name="body" class="rf-section__body">
<section class="rf-bento" data-columns="6" data-gap="1rem" data-row-height="" data-content-height="" data-media-ratio="" data-collapse="" data-rune="bento" data-density="full" style="--bento-columns: 6; --bento-gap: 1rem">
<div data-name="grid" class="rf-bento__grid">
<div data-field="cell" class="rf-bento-cell" data-media-position="start" data-size="large" data-cols="4" data-rows="2" data-content-height="" data-media-ratio="" data-rune="bento-cell" data-density="compact" style="--cell-cols: 4; --cell-rows: 2">
<div data-name="content" class="rf-bento-cell__content">
<h3 id="marketing" data-name="title" class="rf-bento-cell__title">Marketing</h3>
<div data-name="body" class="rf-bento-cell__body">
<p>Hero, CTA, pricing, testimonials.</p>
</div>
</div>
</div>
<div data-field="cell" class="rf-bento-cell" data-media-position="start" data-size="large" data-cols="4" data-rows="2" data-content-height="" data-media-ratio="" data-rune="bento-cell" data-density="compact" style="--cell-cols: 4; --cell-rows: 2">
<div data-name="content" class="rf-bento-cell__content">
<h3 id="docs" data-name="title" class="rf-bento-cell__title">Docs</h3>
<div data-name="body" class="rf-bento-cell__body">
<p>API references, changelogs, symbols.</p>
</div>
</div>
</div>
<div data-field="cell" class="rf-bento-cell" data-media-position="start" data-size="large" data-cols="4" data-rows="2" data-content-height="" data-media-ratio="" data-rune="bento-cell" data-density="compact" style="--cell-cols: 4; --cell-rows: 2">
<div data-name="content" class="rf-bento-cell__content">
<h3 id="storytelling" data-name="title" class="rf-bento-cell__title">Storytelling</h3>
<div data-name="body" class="rf-bento-cell__body">
<p>Characters, realms, factions, lore.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</section>Header-only or body-only
Every header slot is optional. With no leading eyebrow/headline/blurb the section is just a styled wrapper around its body; with only a header it's a standalone intro.
Align the header
align positions the header (the body always spans the section). Use center for marquee sections, end to right-align.
{% section align="center" %}
Pick a plan
## Simple, transparent pricing
No hidden fees. Cancel anytime.
{% bento %}
## Free
For trying things out.
## Pro
For growing teams.
{% /bento %}
{% /section %}<section data-field="content-section" data-rune="section" data-rune-fields="{"align":"center"}">
<header>
<p data-name="eyebrow">Pick a plan</p>
<h2 id="simple,-transparent-pricing" data-name="headline">Simple, transparent pricing</h2>
<p data-name="blurb">No hidden fees. Cancel anytime.</p>
</header>
<div data-name="body">
<section data-rune="bento" data-rune-fields="{"gap":"1rem","columns":"6","row-height":"","content-height":"","media-ratio":"","collapse":""}">
<div data-name="grid">
<div data-field="cell" data-rune="bento-cell" data-rune-fields="{"size":"large","cols":"4","rows":"2","content-height":"","media-ratio":""}" data-media-position="start">
<h3 id="free" data-name="title">Free</h3>
<div data-name="body">
<p>For trying things out.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell" data-rune-fields="{"size":"large","cols":"4","rows":"2","content-height":"","media-ratio":""}" data-media-position="start">
<h3 id="pro" data-name="title">Pro</h3>
<div data-name="body">
<p>For growing teams.</p>
</div>
</div>
</div>
</section>
</div>
</section>Pick a plan
Simple, transparent pricing
No hidden fees. Cancel anytime.
Free
For trying things out.
Pro
For growing teams.
<section data-field="content-section" class="rf-section rf-section--center" data-align="center" data-rune="section" data-density="full">
<header data-name="preamble" class="rf-section__preamble" data-section="preamble">
<p data-name="eyebrow" class="rf-section__eyebrow">Pick a plan</p>
<h2 id="simple,-transparent-pricing" data-name="headline" class="rf-section__headline" data-section="title">Simple, transparent pricing</h2>
<p data-name="blurb" class="rf-section__blurb" data-section="description">No hidden fees. Cancel anytime.</p>
</header>
<div data-name="body" class="rf-section__body">
<section class="rf-bento" data-columns="6" data-gap="1rem" data-row-height="" data-content-height="" data-media-ratio="" data-collapse="" data-rune="bento" data-density="full" style="--bento-columns: 6; --bento-gap: 1rem">
<div data-name="grid" class="rf-bento__grid">
<div data-field="cell" class="rf-bento-cell" data-media-position="start" data-size="large" data-cols="4" data-rows="2" data-content-height="" data-media-ratio="" data-rune="bento-cell" data-density="compact" style="--cell-cols: 4; --cell-rows: 2">
<div data-name="content" class="rf-bento-cell__content">
<h3 id="free" data-name="title" class="rf-bento-cell__title">Free</h3>
<div data-name="body" class="rf-bento-cell__body">
<p>For trying things out.</p>
</div>
</div>
</div>
<div data-field="cell" class="rf-bento-cell" data-media-position="start" data-size="large" data-cols="4" data-rows="2" data-content-height="" data-media-ratio="" data-rune="bento-cell" data-density="compact" style="--cell-cols: 4; --cell-rows: 2">
<div data-name="content" class="rf-bento-cell__content">
<h3 id="pro" data-name="title" class="rf-bento-cell__title">Pro</h3>
<div data-name="body" class="rf-bento-cell__body">
<p>For growing teams.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</section>Attributes
| Attribute | Type | Description |
|---|---|---|
align | start | center | end | Header alignment (default start). The body always spans the full section width. |
Anatomy
| Slot | From | Class |
|---|---|---|
| Eyebrow | first paragraph | .rf-section__eyebrow |
| Headline | first heading | .rf-section__headline |
| Blurb | first paragraph after the headline | .rf-section__blurb |
| Image | first image | .rf-section__image |
| Body | everything else | .rf-section__body |
The header slots are wrapped in .rf-section__preamble; the whole block is .rf-section.