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-elevation="flush" 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" data-section="title">Marketing</h3>
<div data-name="body" class="rf-bento-cell__body" data-section="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" data-section="title">Docs</h3>
<div data-name="body" class="rf-bento-cell__body" data-section="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" data-section="title">Storytelling</h3>
<div data-name="body" class="rf-bento-cell__body" data-section="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-elevation="flush" 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" data-section="title">Free</h3>
<div data-name="body" class="rf-bento-cell__body" data-section="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" data-section="title">Pro</h3>
<div data-name="body" class="rf-bento-cell__body" data-section="body">
<p>For growing teams.</p>
</div>
</div>
</div>
</div>
</section>
</div>
</section>Attributes
| Attribute | Type | Required | Description |
|---|---|---|---|
align | "start" | "center" | "end" | — | Header alignment: start (default), center, or end |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
prominence
Header emphasis (SPEC-107). Scales a rune's page-section header; the skin maps it to a type register by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
prominence | "quiet" | "normal" | "prominent" | "display" | — | Section-header emphasis (only on page-section-header family runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
| frame | this rune declares neither a `frameTarget` nor a media section |
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.