Budget
Structured budgets with categories and line items. Headings become budget categories, and list items with a "Description: $amount" pattern are parsed into line items with automatic subtotals.
Basic usage
Use headings for categories and list items with amounts for line items.
{% budget currency="JPY" duration="5 days" %}
Spring 2026
# Tokyo Trip
A week in Japan — temples, food, and a night in a ryokan.
## Accommodation
- Hotel in Shinjuku: ¥15000
- Ryokan in Hakone: ¥25000
## Transportation
- Japan Rail Pass (7-day): ¥29650
- Airport transfer: ¥3000
- Local metro cards: ¥5000
## Food & Dining
- Daily meals: ¥5000
- Sushi experience: ¥8000
{% /budget %}<section data-field="content-section" data-rune="budget" typeof="ItemList" data-rune-fields="{"currency":"JPY","duration":"5 days","showPerDay":"true","variant":"detailed","total":"90650","perDay":"18130"}">
<p data-name="eyebrow">Spring 2026</p>
<h1 id="tokyo-trip" data-name="headline">Tokyo Trip</h1>
<p data-name="blurb">A week in Japan — temples, food, and a night in a ryokan.</p>
<div data-name="categories">
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Accommodation","estimate":"false","subtotal":"40000"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Accommodation</span>
<span class="rf-budget-category__subtotal">¥40,000</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Hotel in Shinjuku</span>
<span data-field="amount">¥15000</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Ryokan in Hakone</span>
<span data-field="amount">¥25000</span>
</li>
</ul>
</div>
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Transportation","estimate":"false","subtotal":"37650"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Transportation</span>
<span class="rf-budget-category__subtotal">¥37,650</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Japan Rail Pass (7-day)</span>
<span data-field="amount">¥29650</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Airport transfer</span>
<span data-field="amount">¥3000</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Local metro cards</span>
<span data-field="amount">¥5000</span>
</li>
</ul>
</div>
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Food & Dining","estimate":"false","subtotal":"13000"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Food & Dining</span>
<span class="rf-budget-category__subtotal">¥13,000</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Daily meals</span>
<span data-field="amount">¥5000</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Sushi experience</span>
<span data-field="amount">¥8000</span>
</li>
</ul>
</div>
</div>
<div class="rf-budget__footer">
<div class="rf-budget__total">
<span class="rf-budget__total-label">Total</span>
<span class="rf-budget__total-amount">¥90,650</span>
</div>
<div class="rf-budget__per-day">
<span class="rf-budget__per-day-label">Per day</span>
<span class="rf-budget__per-day-amount">¥18,130</span>
</div>
</div>
</section>Tokyo Trip
A week in Japan — temples, food, and a night in a ryokan.
Spring 2026
Accommodation¥40,000
- Hotel in Shinjuku¥15000
- Ryokan in Hakone¥25000
Transportation¥37,650
- Japan Rail Pass (7-day)¥29650
- Airport transfer¥3000
- Local metro cards¥5000
Food & Dining¥13,000
- Daily meals¥5000
- Sushi experience¥8000
<section data-field="content-section" typeof="ItemList" class="rf-budget rf-budget--JPY rf-budget--5 days rf-budget--true rf-budget--detailed" data-currency="JPY" data-duration="5 days" data-show-per-day="true" data-variant="detailed" data-rune="budget" data-density="full">
<div data-name="meta" data-zone="meta" data-zone-layout="bar" class="rf-budget__meta">
<span class="rf-badge" data-meta-type="category">5 days</span>
<span class="rf-badge" data-meta-type="category" data-align="end">JPY</span>
</div>
<header data-name="preamble" class="rf-budget__preamble" data-section="preamble">
<h1 id="tokyo-trip" data-name="headline" class="rf-budget__headline" data-section="title">Tokyo Trip</h1>
<p data-name="blurb" class="rf-budget__blurb">A week in Japan — temples, food, and a night in a ryokan.</p>
</header>
<p data-name="eyebrow" class="rf-budget__eyebrow">Spring 2026</p>
<div data-name="categories" class="rf-budget__categories">
<div data-field="category" class="rf-budget-category rf-budget-category--false" data-estimate="false" data-label="Accommodation" data-subtotal="40000" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Accommodation</span>
<span class="rf-budget-category__subtotal">¥40,000</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Hotel in Shinjuku</span>
<span data-field="amount">¥15000</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Ryokan in Hakone</span>
<span data-field="amount">¥25000</span>
</li>
</ul>
</div>
<div data-field="category" class="rf-budget-category rf-budget-category--false" data-estimate="false" data-label="Transportation" data-subtotal="37650" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Transportation</span>
<span class="rf-budget-category__subtotal">¥37,650</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Japan Rail Pass (7-day)</span>
<span data-field="amount">¥29650</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Airport transfer</span>
<span data-field="amount">¥3000</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Local metro cards</span>
<span data-field="amount">¥5000</span>
</li>
</ul>
</div>
<div data-field="category" class="rf-budget-category rf-budget-category--false" data-estimate="false" data-label="Food & Dining" data-subtotal="13000" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Food & Dining</span>
<span class="rf-budget-category__subtotal">¥13,000</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Daily meals</span>
<span data-field="amount">¥5000</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Sushi experience</span>
<span data-field="amount">¥8000</span>
</li>
</ul>
</div>
</div>
<div class="rf-budget__footer">
<div class="rf-budget__total">
<span class="rf-budget__total-label">Total</span>
<span class="rf-budget__total-amount">¥90,650</span>
</div>
<div class="rf-budget__per-day">
<span class="rf-budget__per-day-label">Per day</span>
<span class="rf-budget__per-day-amount">¥18,130</span>
</div>
</div>
</section>Summary variant
Use variant="summary" to show only category totals without individual line items.
{% budget currency="JPY" duration="5 days" variant="summary" %}
Spring 2026
# Tokyo Trip
A week in Japan — temples, food, and a night in a ryokan.
## Accommodation
- Hotel in Shinjuku: ¥15000
- Ryokan in Hakone: ¥25000
## Transportation
- Japan Rail Pass (7-day): ¥29650
- Airport transfer: ¥3000
- Local metro cards: ¥5000
## Food & Dining
- Daily meals: ¥5000
- Sushi experience: ¥8000
{% /budget %}<section data-field="content-section" data-rune="budget" typeof="ItemList" data-rune-fields="{"currency":"JPY","duration":"5 days","showPerDay":"true","variant":"summary","total":"90650","perDay":"18130"}">
<p data-name="eyebrow">Spring 2026</p>
<h1 id="tokyo-trip" data-name="headline">Tokyo Trip</h1>
<p data-name="blurb">A week in Japan — temples, food, and a night in a ryokan.</p>
<div data-name="categories">
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Accommodation","estimate":"false","subtotal":"40000"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Accommodation</span>
<span class="rf-budget-category__subtotal">¥40,000</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Hotel in Shinjuku</span>
<span data-field="amount">¥15000</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Ryokan in Hakone</span>
<span data-field="amount">¥25000</span>
</li>
</ul>
</div>
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Transportation","estimate":"false","subtotal":"37650"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Transportation</span>
<span class="rf-budget-category__subtotal">¥37,650</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Japan Rail Pass (7-day)</span>
<span data-field="amount">¥29650</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Airport transfer</span>
<span data-field="amount">¥3000</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Local metro cards</span>
<span data-field="amount">¥5000</span>
</li>
</ul>
</div>
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Food & Dining","estimate":"false","subtotal":"13000"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Food & Dining</span>
<span class="rf-budget-category__subtotal">¥13,000</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Daily meals</span>
<span data-field="amount">¥5000</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Sushi experience</span>
<span data-field="amount">¥8000</span>
</li>
</ul>
</div>
</div>
<div class="rf-budget__footer">
<div class="rf-budget__total">
<span class="rf-budget__total-label">Total</span>
<span class="rf-budget__total-amount">¥90,650</span>
</div>
<div class="rf-budget__per-day">
<span class="rf-budget__per-day-label">Per day</span>
<span class="rf-budget__per-day-amount">¥18,130</span>
</div>
</div>
</section>Tokyo Trip
A week in Japan — temples, food, and a night in a ryokan.
Spring 2026
Accommodation¥40,000
- Hotel in Shinjuku¥15000
- Ryokan in Hakone¥25000
Transportation¥37,650
- Japan Rail Pass (7-day)¥29650
- Airport transfer¥3000
- Local metro cards¥5000
Food & Dining¥13,000
- Daily meals¥5000
- Sushi experience¥8000
<section data-field="content-section" typeof="ItemList" class="rf-budget rf-budget--JPY rf-budget--5 days rf-budget--true rf-budget--summary" data-currency="JPY" data-duration="5 days" data-show-per-day="true" data-variant="summary" data-rune="budget" data-density="full">
<div data-name="meta" data-zone="meta" data-zone-layout="bar" class="rf-budget__meta">
<span class="rf-badge" data-meta-type="category">5 days</span>
<span class="rf-badge" data-meta-type="category" data-align="end">JPY</span>
</div>
<header data-name="preamble" class="rf-budget__preamble" data-section="preamble">
<h1 id="tokyo-trip" data-name="headline" class="rf-budget__headline" data-section="title">Tokyo Trip</h1>
<p data-name="blurb" class="rf-budget__blurb">A week in Japan — temples, food, and a night in a ryokan.</p>
</header>
<p data-name="eyebrow" class="rf-budget__eyebrow">Spring 2026</p>
<div data-name="categories" class="rf-budget__categories">
<div data-field="category" class="rf-budget-category rf-budget-category--false" data-estimate="false" data-label="Accommodation" data-subtotal="40000" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Accommodation</span>
<span class="rf-budget-category__subtotal">¥40,000</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Hotel in Shinjuku</span>
<span data-field="amount">¥15000</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Ryokan in Hakone</span>
<span data-field="amount">¥25000</span>
</li>
</ul>
</div>
<div data-field="category" class="rf-budget-category rf-budget-category--false" data-estimate="false" data-label="Transportation" data-subtotal="37650" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Transportation</span>
<span class="rf-budget-category__subtotal">¥37,650</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Japan Rail Pass (7-day)</span>
<span data-field="amount">¥29650</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Airport transfer</span>
<span data-field="amount">¥3000</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Local metro cards</span>
<span data-field="amount">¥5000</span>
</li>
</ul>
</div>
<div data-field="category" class="rf-budget-category rf-budget-category--false" data-estimate="false" data-label="Food & Dining" data-subtotal="13000" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Food & Dining</span>
<span class="rf-budget-category__subtotal">¥13,000</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Daily meals</span>
<span data-field="amount">¥5000</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Sushi experience</span>
<span data-field="amount">¥8000</span>
</li>
</ul>
</div>
</div>
<div class="rf-budget__footer">
<div class="rf-budget__total">
<span class="rf-budget__total-label">Total</span>
<span class="rf-budget__total-amount">¥90,650</span>
</div>
<div class="rf-budget__per-day">
<span class="rf-budget__per-day-label">Per day</span>
<span class="rf-budget__per-day-amount">¥18,130</span>
</div>
</div>
</section>Estimates
Mark categories as estimates by adding (estimate) or (est.) to the heading, or use strikethrough.
{% budget currency="USD" %}
# Weekend Getaway
## Hotel
- Two nights downtown: $250
## Activities (estimate)
- Museum passes: $40
- Boat tour: $60-80
- Dining: $100-150
{% /budget %}<section data-field="content-section" data-rune="budget" typeof="ItemList" data-rune-fields="{"currency":"USD","duration":"","showPerDay":"true","variant":"detailed","total":"485"}">
<h1 id="weekend-getaway" data-name="headline">Weekend Getaway</h1>
<div data-name="categories">
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Hotel","estimate":"false","subtotal":"250"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Hotel</span>
<span class="rf-budget-category__subtotal">$250</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Two nights downtown</span>
<span data-field="amount">$250</span>
</li>
</ul>
</div>
<div data-field="category" data-rune="budget-category" data-rune-fields="{"label":"Activities","estimate":"estimate","subtotal":"235"}">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Activities</span>
<span class="rf-budget-category__subtotal">$235</span>
</div>
<ul data-name="line-items">
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Museum passes</span>
<span data-field="amount">$40</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Boat tour</span>
<span data-field="amount">$60-80</span>
</li>
<li data-field="line-item" data-rune="budget-line-item">
<span data-field="description">Dining</span>
<span data-field="amount">$100-150</span>
</li>
</ul>
</div>
</div>
<div class="rf-budget__footer">
<div class="rf-budget__total">
<span class="rf-budget__total-label">Total</span>
<span class="rf-budget__total-amount">$485</span>
</div>
</div>
</section>Weekend Getaway
Hotel$250
- Two nights downtown$250
Activities$235
- Museum passes$40
- Boat tour$60-80
- Dining$100-150
<section data-field="content-section" typeof="ItemList" class="rf-budget rf-budget--USD rf-budget--true rf-budget--detailed" data-currency="USD" data-duration="" data-show-per-day="true" data-variant="detailed" data-rune="budget" data-density="full">
<div data-name="meta" data-zone="meta" data-zone-layout="bar" class="rf-budget__meta">
<span class="rf-badge" data-meta-type="category" data-align="end">USD</span>
</div>
<header data-name="preamble" class="rf-budget__preamble" data-section="preamble">
<h1 id="weekend-getaway" data-name="headline" class="rf-budget__headline" data-section="title">Weekend Getaway</h1>
</header>
<div data-name="categories" class="rf-budget__categories">
<div data-field="category" class="rf-budget-category rf-budget-category--false" data-estimate="false" data-label="Hotel" data-subtotal="250" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Hotel</span>
<span class="rf-budget-category__subtotal">$250</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Two nights downtown</span>
<span data-field="amount">$250</span>
</li>
</ul>
</div>
<div data-field="category" class="rf-budget-category rf-budget-category--estimate" data-estimate="estimate" data-label="Activities" data-subtotal="235" data-rune="budget-category" data-density="full">
<div class="rf-budget-category__header">
<span class="rf-budget-category__label">Activities</span>
<span class="rf-budget-category__subtotal">$235</span>
</div>
<ul data-name="line-items" class="rf-budget-category__line-items">
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Museum passes</span>
<span data-field="amount">$40</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Boat tour</span>
<span data-field="amount">$60-80</span>
</li>
<li data-field="line-item" class="rf-budget-line-item" data-rune="budget-line-item" data-density="full">
<span data-field="description">Dining</span>
<span data-field="amount">$100-150</span>
</li>
</ul>
</div>
</div>
<div class="rf-budget__footer">
<div class="rf-budget__total">
<span class="rf-budget__total-label">Total</span>
<span class="rf-budget__total-amount">$485</span>
</div>
</div>
</section>Section header
Budget supports an optional eyebrow, headline, and blurb above the categories. Place a short paragraph or heading before the first category heading to use them. See Page sections for the full syntax.
Attributes
| Attribute | Type | Default | Description |
|---|---|---|---|
currency | string | USD | Currency code |
duration | string | — | Budget duration (e.g. trip length, project span, fiscal period) |
showPerDay | boolean | true | Display per-day cost breakdowns |
variant | string | detailed | Display variant: detailed or summary |
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 |