refrakt.mdnote
This rune is part of @refrakt-md/marketing. Install with npm install @refrakt-md/marketing and add "@refrakt-md/marketing" to the packages array in your refrakt.config.json.
Bento
Magazine-style bento grid. Heading levels determine cell size — larger headings get more space.
Basic usage
Headings split content into grid cells. The base level is always h2: h2 = large (2x2), h3 = medium (2x1), h4+ = small (1x1).
{% bento columns=4 %}
## Featured Article
This cell spans 2 columns and 2 rows, making it the hero of the grid.
### Quick Update
A medium cell spanning 2 columns.
#### Tip of the Day
Small cells are great for bite-sized content.
#### Did You Know?
Another small cell sits neatly in the grid.
{% /bento %}<section data-field="content-section" data-rune="bento">
<meta content="1rem" data-field="gap">
<meta content="4" data-field="columns">
<meta content="tiered" data-field="sizing">
<div data-name="grid">
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Featured Article</span>
<meta content="large" data-field="size">
<div data-name="body">
<p>This cell spans 2 columns and 2 rows, making it the hero of the grid.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Quick Update</span>
<meta content="medium" data-field="size">
<div data-name="body">
<p>A medium cell spanning 2 columns.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Tip of the Day</span>
<meta content="small" data-field="size">
<div data-name="body">
<p>Small cells are great for bite-sized content.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Did You Know?</span>
<meta content="small" data-field="size">
<div data-name="body">
<p>Another small cell sits neatly in the grid.</p>
</div>
</div>
</div>
</section>Featured Article
This cell spans 2 columns and 2 rows, making it the hero of the grid.
Quick Update
A medium cell spanning 2 columns.
Tip of the Day
Small cells are great for bite-sized content.
Did You Know?
Another small cell sits neatly in the grid.
<section data-field="content-section" class="rf-bento rf-bento--4 rf-bento--1rem rf-bento--tiered" data-columns="4" data-gap="1rem" data-sizing="tiered" data-rune="bento" data-density="full" style="--bento-columns: 4; --bento-gap: 1rem">
<div data-name="grid" class="rf-bento__grid">
<div data-field="cell" class="rf-bento-cell rf-bento-cell--large" data-size="large" data-rune="bento-cell" data-density="compact">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Featured Article</span>
<div data-name="body" class="rf-bento-cell__body">
<p>This cell spans 2 columns and 2 rows, making it the hero of the grid.</p>
</div>
</div>
<div data-field="cell" class="rf-bento-cell rf-bento-cell--medium" data-size="medium" data-rune="bento-cell" data-density="compact">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Quick Update</span>
<div data-name="body" class="rf-bento-cell__body">
<p>A medium cell spanning 2 columns.</p>
</div>
</div>
<div data-field="cell" class="rf-bento-cell rf-bento-cell--small" data-size="small" data-rune="bento-cell" data-density="compact">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Tip of the Day</span>
<div data-name="body" class="rf-bento-cell__body">
<p>Small cells are great for bite-sized content.</p>
</div>
</div>
<div data-field="cell" class="rf-bento-cell rf-bento-cell--small" data-size="small" data-rune="bento-cell" data-density="compact">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Did You Know?</span>
<div data-name="body" class="rf-bento-cell__body">
<p>Another small cell sits neatly in the grid.</p>
</div>
</div>
</div>
</section>Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
columns | number | 4 | Number of grid columns |
gap | string | 1rem | Grid gap |
sizing | string | tiered | Size mode: tiered (named sizes) or span (heading level = column span) |
Cell sizes
In tiered mode, heading levels map to cell sizes:
| Heading | Size | Span |
|---|---|---|
| h2 | large | 2 columns + 2 rows |
| h3 | medium | 2 columns |
| h4+ | small | 1 column |
Span mode
Set sizing="span" to map heading levels directly to column spans. The column span is the inverse of the heading level: h1 spans the most columns, h6 spans 1. Defaults to a 6-column grid so every heading level gets a distinct span.
| Heading | Span (6-col grid) |
|---|---|
| h1 | 6 columns |
| h2 | 5 columns |
| h3 | 4 columns |
| h4 | 3 columns |
| h5 | 2 columns |
| h6 | 1 column |
The formula is columns + 1 - level, clamped to [1, columns]. Custom column counts adjust the spans proportionally.
{% bento sizing="span" %}
# Hero Feature
Stretches across all 6 columns.
## Key Highlight
Five columns of prominence.
### Section
Four columns wide.
#### Detail
Three columns.
##### Note
Two columns.
###### Tag
One column.
{% /bento %}<section data-field="content-section" data-rune="bento">
<header>
<h1 id="hero-feature" data-name="headline">Hero Feature</h1>
<p data-name="blurb">Stretches across all 6 columns.</p>
</header>
<meta content="1rem" data-field="gap">
<meta content="6" data-field="columns">
<meta content="span" data-field="sizing">
<div data-name="grid">
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Key Highlight</span>
<meta content="span" data-field="size">
<meta content="5" data-field="span">
<div data-name="body">
<p>Five columns of prominence.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Section</span>
<meta content="span" data-field="size">
<meta content="4" data-field="span">
<div data-name="body">
<p>Four columns wide.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Detail</span>
<meta content="span" data-field="size">
<meta content="3" data-field="span">
<div data-name="body">
<p>Three columns.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Note</span>
<meta content="span" data-field="size">
<meta content="2" data-field="span">
<div data-name="body">
<p>Two columns.</p>
</div>
</div>
<div data-field="cell" data-rune="bento-cell">
<span data-field="name">Tag</span>
<meta content="span" data-field="size">
<meta content="1" data-field="span">
<div data-name="body">
<p>One column.</p>
</div>
</div>
</div>
</section>Hero Feature
Stretches across all 6 columns.
Key Highlight
Five columns of prominence.
Section
Four columns wide.
Detail
Three columns.
Note
Two columns.
Tag
One column.
<section data-field="content-section" class="rf-bento rf-bento--6 rf-bento--1rem rf-bento--span" data-columns="6" data-gap="1rem" data-sizing="span" data-rune="bento" data-density="full" style="--bento-columns: 6; --bento-gap: 1rem">
<header data-name="preamble" class="rf-bento__preamble" data-section="preamble">
<h1 id="hero-feature" data-name="headline" class="rf-bento__headline" data-section="title">Hero Feature</h1>
<p data-name="blurb" class="rf-bento__blurb" data-section="description">Stretches across all 6 columns.</p>
</header>
<div data-name="grid" class="rf-bento__grid">
<div data-field="cell" class="rf-bento-cell rf-bento-cell--span" data-size="span" data-span="5" data-rune="bento-cell" data-density="compact" style="--cell-span: 5">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Key Highlight</span>
<div data-name="body" class="rf-bento-cell__body">
<p>Five columns of prominence.</p>
</div>
</div>
<div data-field="cell" class="rf-bento-cell rf-bento-cell--span" data-size="span" data-span="4" data-rune="bento-cell" data-density="compact" style="--cell-span: 4">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Section</span>
<div data-name="body" class="rf-bento-cell__body">
<p>Four columns wide.</p>
</div>
</div>
<div data-field="cell" class="rf-bento-cell rf-bento-cell--span" data-size="span" data-span="3" data-rune="bento-cell" data-density="compact" style="--cell-span: 3">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Detail</span>
<div data-name="body" class="rf-bento-cell__body">
<p>Three columns.</p>
</div>
</div>
<div data-field="cell" class="rf-bento-cell rf-bento-cell--span" data-size="span" data-span="2" data-rune="bento-cell" data-density="compact" style="--cell-span: 2">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Note</span>
<div data-name="body" class="rf-bento-cell__body">
<p>Two columns.</p>
</div>
</div>
<div data-field="cell" class="rf-bento-cell rf-bento-cell--span" data-size="span" data-span="1" data-rune="bento-cell" data-density="compact" style="--cell-span: 1">
<span data-field="name" data-name="title" class="rf-bento-cell__title">Tag</span>
<div data-name="body" class="rf-bento-cell__body">
<p>One column.</p>
</div>
</div>
</div>
</section>Section header
Bento supports an optional eyebrow, headline, and blurb above the section above the grid. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.
Common attributes
All block runes share these attributes for layout and theming.
| Attribute | Type | Default | Description |
|---|---|---|---|
width | string | content | Page grid width: content, wide, or full |
spacing | string | — | Vertical spacing: flush, tight, default, loose, or breathe |
inset | string | — | Horizontal padding: flush, tight, default, loose, or breathe |
tint | string | — | Named colour tint from theme configuration |
tint-mode | string | auto | Colour scheme override: auto, dark, or light |
bg | string | — | Named background preset from theme configuration |