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.

Pricing

Pricing tables with tier comparison. Write natural markdown headings with ## Name — Price to auto-generate tiers, or use explicit {% tier %} tags for full control.

Heading-based

Write pricing tiers as headings with a Name — Price pattern. Content below each heading becomes the tier body.

{% pricing %}
# Plans

Pick the plan that fits your needs.

## Free — $0
- 1 project
- Community support
- Basic analytics

[Get started](/docs/getting-started)

## Pro — $19/mo
- Unlimited projects
- Priority support
- Advanced analytics

[Start trial](/docs/getting-started)
{% /pricing %}

<section data-field="content-section" data-rune="pricing" typeof="Product">
  <header>
    <h1 id="plans" data-name="headline" property="name">Plans</h1>
    <p data-name="blurb" property="description">Pick the plan that fits your needs.</p>
  </header>
  <ul data-layout="grid" data-columns="2" data-name="tiers">
    <li data-field="tier" data-rune="tier" typeof="Offer" property="offers">
      <h1 data-name="name" property="name">Free</h1>
      <p data-name="price">$0</p>
      <meta content="0" property="price">
      <meta content="USD" property="priceCurrency">
      <div data-name="body">
        <ul>
          <li>1 project</li>
          <li>Community support</li>
          <li>Basic analytics</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Get started</a>
        </p>
      </div>
    </li>
    <li data-field="tier" data-rune="tier" typeof="Offer" property="offers">
      <h1 data-name="name" property="name">Pro</h1>
      <p data-name="price">$19/mo</p>
      <meta content="19" property="price">
      <meta content="USD" property="priceCurrency">
      <div data-name="body">
        <ul>
          <li>Unlimited projects</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Start trial</a>
        </p>
      </div>
    </li>
  </ul>
</section>

Plans

Pick the plan that fits your needs.

Free
$0
- 1 project
- Community support
- Basic analytics
Get started
Pro
$19/mo
- Unlimited projects
- Priority support
- Advanced analytics
Start trial

<section data-field="content-section" typeof="Product" class="rf-pricing rf-pricing--full" data-width="full" data-rune="pricing" data-density="full">
  <header data-name="preamble" class="rf-pricing__preamble" data-section="preamble">
    <h1 id="plans" data-name="headline" property="name" class="rf-pricing__headline" data-section="title">Plans</h1>
    <p data-name="blurb" property="description" class="rf-pricing__blurb" data-section="description">Pick the plan that fits your needs.</p>
  </header>
  <ul data-layout="grid" data-columns="2" data-name="tiers" class="rf-pricing__tiers">
    <li data-field="tier" typeof="Offer" class="rf-tier" property="offers" data-rune="tier" data-density="full">
      <h1 data-name="name" property="name" class="rf-tier__name">Free</h1>
      <p data-name="price" class="rf-tier__price">$0</p>
      <meta content="0" property="price" />
      <meta content="USD" property="priceCurrency" />
      <div data-name="body" class="rf-tier__body">
        <ul>
          <li>1 project</li>
          <li>Community support</li>
          <li>Basic analytics</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Get started</a>
        </p>
      </div>
    </li>
    <li data-field="tier" typeof="Offer" class="rf-tier" property="offers" data-rune="tier" data-density="full">
      <h1 data-name="name" property="name" class="rf-tier__name">Pro</h1>
      <p data-name="price" class="rf-tier__price">$19/mo</p>
      <meta content="19" property="price" />
      <meta content="USD" property="priceCurrency" />
      <div data-name="body" class="rf-tier__body">
        <ul>
          <li>Unlimited projects</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Start trial</a>
        </p>
      </div>
    </li>
  </ul>
</section>

Explicit tiers

Use {% tier %} tags when you need full control over attributes like featured or currency.

{% pricing %}
# Choose your plan

{% tier name="Free" price="$0" %}
- 1 project
- Community support
{% /tier %}

{% tier name="Pro" price="$19" featured=true %}
- Unlimited projects
- Priority support
- Advanced analytics

[Start trial](/docs/getting-started)
{% /tier %}

{% tier name="Enterprise" price="Custom" %}
- Custom integrations
- Dedicated support
- SLA guarantee

[Contact us](/docs/getting-started)
{% /tier %}
{% /pricing %}

<section data-field="content-section" data-rune="pricing" typeof="Product">
  <header>
    <h1 id="choose-your-plan" data-name="headline" property="name">Choose your plan</h1>
  </header>
  <ul data-layout="grid" data-columns="3" data-name="tiers">
    <li data-field="tier" data-rune="tier" typeof="Offer" property="offers">
      <h1 data-name="name" property="name">Free</h1>
      <p data-name="price">$0</p>
      <meta content="0" property="price">
      <meta content="USD" property="priceCurrency">
      <div data-name="body">
        <ul>
          <li>1 project</li>
          <li>Community support</li>
        </ul>
      </div>
    </li>
    <li data-field="tier" data-rune="featured-tier" typeof="Offer" property="offers">
      <h1 data-name="name" property="name">Pro</h1>
      <p data-name="price">$19</p>
      <meta content="19" property="price">
      <meta content="USD" property="priceCurrency">
      <div data-name="body">
        <ul>
          <li>Unlimited projects</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Start trial</a>
        </p>
      </div>
    </li>
    <li data-field="tier" data-rune="tier" typeof="Offer" property="offers">
      <h1 data-name="name" property="name">Enterprise</h1>
      <p data-name="price">Custom</p>
      <meta content="Custom" property="price">
      <meta content="USD" property="priceCurrency">
      <div data-name="body">
        <ul>
          <li>Custom integrations</li>
          <li>Dedicated support</li>
          <li>SLA guarantee</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Contact us</a>
        </p>
      </div>
    </li>
  </ul>
</section>

Choose your plan

Free
$0
- 1 project
- Community support
Pro
$19
- Unlimited projects
- Priority support
- Advanced analytics
Start trial
Enterprise
Custom
- Custom integrations
- Dedicated support
- SLA guarantee
Contact us

<section data-field="content-section" typeof="Product" class="rf-pricing rf-pricing--full" data-width="full" data-rune="pricing" data-density="full">
  <header data-name="preamble" class="rf-pricing__preamble" data-section="preamble">
    <h1 id="choose-your-plan" data-name="headline" property="name" class="rf-pricing__headline" data-section="title">Choose your plan</h1>
  </header>
  <ul data-layout="grid" data-columns="3" data-name="tiers" class="rf-pricing__tiers">
    <li data-field="tier" typeof="Offer" class="rf-tier" property="offers" data-rune="tier" data-density="full">
      <h1 data-name="name" property="name" class="rf-tier__name">Free</h1>
      <p data-name="price" class="rf-tier__price">$0</p>
      <meta content="0" property="price" />
      <meta content="USD" property="priceCurrency" />
      <div data-name="body" class="rf-tier__body">
        <ul>
          <li>1 project</li>
          <li>Community support</li>
        </ul>
      </div>
    </li>
    <li data-field="tier" typeof="Offer" class="rf-tier rf-tier--featured" property="offers" data-rune="featured-tier" data-density="full">
      <h1 data-name="name" property="name" class="rf-tier__name">Pro</h1>
      <p data-name="price" class="rf-tier__price">$19</p>
      <meta content="19" property="price" />
      <meta content="USD" property="priceCurrency" />
      <div data-name="body" class="rf-tier__body">
        <ul>
          <li>Unlimited projects</li>
          <li>Priority support</li>
          <li>Advanced analytics</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Start trial</a>
        </p>
      </div>
    </li>
    <li data-field="tier" typeof="Offer" class="rf-tier" property="offers" data-rune="tier" data-density="full">
      <h1 data-name="name" property="name" class="rf-tier__name">Enterprise</h1>
      <p data-name="price" class="rf-tier__price">Custom</p>
      <meta content="Custom" property="price" />
      <meta content="USD" property="priceCurrency" />
      <div data-name="body" class="rf-tier__body">
        <ul>
          <li>Custom integrations</li>
          <li>Dedicated support</li>
          <li>SLA guarantee</li>
        </ul>
        <p data-field="description">
          <a href="/docs/getting-started" data-field="url">Contact us</a>
        </p>
      </div>
    </li>
  </ul>
</section>

Tier attributes

Attribute	Type	Default	Description
`name`	`string`	required	Tier name
`price`	`string`	required	Display price (e.g. `$19`, `€29/mo`, `Custom`)
`featured`	`boolean`	`false`	Highlight this tier as the recommended option
`currency`	`string`	—	ISO currency code for SEO (auto-inferred from price symbol if omitted)

Section header

Pricing supports an optional eyebrow, headline, and blurb above the section above pricing tiers. 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

Rune Catalog

Content

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan