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" travelers=2 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">
  <meta content="JPY" data-field="currency">
  <meta content="2" data-field="travelers">
  <meta content="5 days" data-field="duration">
  <meta content="true" data-field="show-per-person">
  <meta content="true" data-field="show-per-day">
  <meta content="detailed" data-field="variant">
  <header data-name="preamble">
    <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>
  </header>
  <div data-name="categories">
    <div data-field="category" data-rune="budget-category">
      <meta content="Accommodation" data-field="label">
      <meta content="false" data-field="estimate">
      <meta content="40000" data-field="subtotal">
      <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">
      <meta content="Transportation" data-field="label">
      <meta content="false" data-field="estimate">
      <meta content="37650" data-field="subtotal">
      <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">
      <meta content="Food &amp; Dining" data-field="label">
      <meta content="false" data-field="estimate">
      <meta content="13000" data-field="subtotal">
      <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>
</section>

Spring 2026

Tokyo Trip

A week in Japan — temples, food, and a night in a ryokan.

Hotel in Shinjuku¥15000
Ryokan in Hakone¥25000

Japan Rail Pass (7-day)¥29650
Airport transfer¥3000
Local metro cards¥5000

Daily meals¥5000
Sushi experience¥8000

<section data-field="content-section" typeof="ItemList" class="rf-budget rf-budget--JPY rf-budget--2 rf-budget--5 days rf-budget--true rf-budget--true rf-budget--detailed" data-currency="JPY" data-travelers="2" data-duration="5 days" data-show-per-person="true" data-show-per-day="true" data-variant="detailed" data-rune="budget" data-density="full">
  <div data-name="header" class="rf-budget__header" data-section="header">
    <div data-name="meta" class="rf-budget__meta">
      <span data-name="meta-item" data-meta-type="category" data-meta-rank="primary" class="rf-budget__meta-item">JPY</span>
      <span data-name="meta-item" data-meta-type="quantity" data-meta-rank="primary" class="rf-budget__meta-item">
        <span data-meta-label="">Travelers:</span>
        <span data-meta-value="">2</span>
      </span>
      <span data-name="meta-item" data-meta-type="temporal" data-meta-rank="secondary" class="rf-budget__meta-item">
        <span data-meta-label="">Duration:</span>
        <span data-meta-value="">5 days</span>
      </span>
    </div>
  </div>
  <header data-name="preamble" class="rf-budget__preamble" data-section="preamble">
    <p data-name="eyebrow" class="rf-budget__eyebrow">Spring 2026</p>
    <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>
  <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 &amp; Dining" data-subtotal="13000" data-rune="budget-category" data-density="full">
      <div class="rf-budget-category__header">
        <span class="rf-budget-category__label">Food &amp; 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-person">
      <span class="rf-budget__per-person-label">Per person</span>
      <span class="rf-budget__per-person-amount">¥45,325</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" travelers=2 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">
  <meta content="JPY" data-field="currency">
  <meta content="2" data-field="travelers">
  <meta content="5 days" data-field="duration">
  <meta content="true" data-field="show-per-person">
  <meta content="true" data-field="show-per-day">
  <meta content="summary" data-field="variant">
  <header data-name="preamble">
    <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>
  </header>
  <div data-name="categories">
    <div data-field="category" data-rune="budget-category">
      <meta content="Accommodation" data-field="label">
      <meta content="false" data-field="estimate">
      <meta content="40000" data-field="subtotal">
      <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">
      <meta content="Transportation" data-field="label">
      <meta content="false" data-field="estimate">
      <meta content="37650" data-field="subtotal">
      <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">
      <meta content="Food &amp; Dining" data-field="label">
      <meta content="false" data-field="estimate">
      <meta content="13000" data-field="subtotal">
      <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>
</section>

Spring 2026

Tokyo Trip

A week in Japan — temples, food, and a night in a ryokan.

Hotel in Shinjuku¥15000
Ryokan in Hakone¥25000

Japan Rail Pass (7-day)¥29650
Airport transfer¥3000
Local metro cards¥5000

Daily meals¥5000
Sushi experience¥8000

<section data-field="content-section" typeof="ItemList" class="rf-budget rf-budget--JPY rf-budget--2 rf-budget--5 days rf-budget--true rf-budget--true rf-budget--summary" data-currency="JPY" data-travelers="2" data-duration="5 days" data-show-per-person="true" data-show-per-day="true" data-variant="summary" data-rune="budget" data-density="full">
  <div data-name="header" class="rf-budget__header" data-section="header">
    <div data-name="meta" class="rf-budget__meta">
      <span data-name="meta-item" data-meta-type="category" data-meta-rank="primary" class="rf-budget__meta-item">JPY</span>
      <span data-name="meta-item" data-meta-type="quantity" data-meta-rank="primary" class="rf-budget__meta-item">
        <span data-meta-label="">Travelers:</span>
        <span data-meta-value="">2</span>
      </span>
      <span data-name="meta-item" data-meta-type="temporal" data-meta-rank="secondary" class="rf-budget__meta-item">
        <span data-meta-label="">Duration:</span>
        <span data-meta-value="">5 days</span>
      </span>
    </div>
  </div>
  <header data-name="preamble" class="rf-budget__preamble" data-section="preamble">
    <p data-name="eyebrow" class="rf-budget__eyebrow">Spring 2026</p>
    <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>
  <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 &amp; Dining" data-subtotal="13000" data-rune="budget-category" data-density="full">
      <div class="rf-budget-category__header">
        <span class="rf-budget-category__label">Food &amp; 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-person">
      <span class="rf-budget__per-person-label">Per person</span>
      <span class="rf-budget__per-person-amount">¥45,325</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">
  <meta content="USD" data-field="currency">
  <meta content="1" data-field="travelers">
  <meta content="" data-field="duration">
  <meta content="true" data-field="show-per-person">
  <meta content="true" data-field="show-per-day">
  <meta content="detailed" data-field="variant">
  <header data-name="preamble">
    <h1 id="weekend-getaway" data-name="headline">Weekend Getaway</h1>
  </header>
  <div data-name="categories">
    <div data-field="category" data-rune="budget-category">
      <meta content="Hotel" data-field="label">
      <meta content="false" data-field="estimate">
      <meta content="250" data-field="subtotal">
      <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">
      <meta content="Activities" data-field="label">
      <meta content="estimate" data-field="estimate">
      <meta content="235" data-field="subtotal">
      <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>
</section>

Weekend Getaway

Two nights downtown$250

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--1 rf-budget--true rf-budget--true rf-budget--detailed" data-currency="USD" data-travelers="1" data-show-per-person="true" data-show-per-day="true" data-variant="detailed" data-rune="budget" data-density="full">
  <div data-name="header" class="rf-budget__header" data-section="header">
    <div data-name="meta" class="rf-budget__meta">
      <span data-name="meta-item" data-meta-type="category" data-meta-rank="primary" class="rf-budget__meta-item">USD</span>
      <span data-name="meta-item" data-meta-type="quantity" data-meta-rank="primary" class="rf-budget__meta-item">
        <span data-meta-label="">Travelers:</span>
        <span data-meta-value="">1</span>
      </span>
    </div>
  </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
`travelers`	`number`	`1`	Number of travelers for per-person calculations
`duration`	`string`	—	Trip or project duration
`showPerPerson`	`boolean`	`true`	Display per-person cost breakdowns
`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

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan

Budget

Basic usage

Tokyo Trip

Summary variant

Tokyo Trip

Estimates

Weekend Getaway

Section header

Attributes

Common attributes