This rune is part of @refrakt-md/marketing. Install with npm install @refrakt-md/marketing and add "@refrakt-md/marketing" to the plugins 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" data-schema-lists="[&quot;offers&quot;]">
  <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" data-rune-fields="{&quot;parsedPrice&quot;:&quot;0&quot;,&quot;resolvedCurrency&quot;:&quot;USD&quot;}" property="offers">
      <h1 data-name="name" property="name">Free</h1>
      <p data-name="price">$0</p>
      <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>
      <meta property="price" content="0">
      <meta property="priceCurrency" content="USD">
    </li>
    <li data-field="tier" data-rune="tier" typeof="Offer" data-rune-fields="{&quot;parsedPrice&quot;:&quot;19&quot;,&quot;resolvedCurrency&quot;:&quot;USD&quot;}" property="offers">
      <h1 data-name="name" property="name">Pro</h1>
      <p data-name="price">$19/mo</p>
      <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>
      <meta property="price" content="19">
      <meta property="priceCurrency" content="USD">
    </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-schema-lists="[&quot;offers&quot;]" 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>
      <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>
      <meta property="price" content="0" />
      <meta property="priceCurrency" content="USD" />
    </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>
      <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>
      <meta property="price" content="19" />
      <meta property="priceCurrency" content="USD" />
    </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" data-schema-lists="[&quot;offers&quot;]">
  <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" data-rune-fields="{&quot;parsedPrice&quot;:&quot;0&quot;,&quot;resolvedCurrency&quot;:&quot;USD&quot;}" property="offers">
      <h1 data-name="name" property="name">Free</h1>
      <p data-name="price">$0</p>
      <div data-name="body">
        <ul>
          <li>1 project</li>
          <li>Community support</li>
        </ul>
      </div>
      <meta property="price" content="0">
      <meta property="priceCurrency" content="USD">
    </li>
    <li data-field="tier" data-rune="featured-tier" typeof="Offer" data-rune-fields="{&quot;parsedPrice&quot;:&quot;19&quot;,&quot;resolvedCurrency&quot;:&quot;USD&quot;}" property="offers">
      <h1 data-name="name" property="name">Pro</h1>
      <p data-name="price">$19</p>
      <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>
      <meta property="price" content="19">
      <meta property="priceCurrency" content="USD">
    </li>
    <li data-field="tier" data-rune="tier" typeof="Offer" data-rune-fields="{&quot;parsedPrice&quot;:&quot;Custom&quot;,&quot;resolvedCurrency&quot;:&quot;USD&quot;}" property="offers">
      <h1 data-name="name" property="name">Enterprise</h1>
      <p data-name="price">Custom</p>
      <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>
      <meta property="price" content="Custom">
      <meta property="priceCurrency" content="USD">
    </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-schema-lists="[&quot;offers&quot;]" 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>
      <div data-name="body" class="rf-tier__body">
        <ul>
          <li>1 project</li>
          <li>Community support</li>
        </ul>
      </div>
      <meta property="price" content="0" />
      <meta property="priceCurrency" content="USD" />
    </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>
      <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>
      <meta property="price" content="19" />
      <meta property="priceCurrency" content="USD" />
    </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>
      <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>
      <meta property="price" content="Custom" />
      <meta property="priceCurrency" content="USD" />
    </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.

Attributes

`tier`

Attribute	Type	Required
`name`	`string`	✓
`price`	`string`	—
`featured`	`boolean`	—
`currency`	`string`	—
`priceMonthly`	`string`	—

Universal attributes

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)

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

Internal padding override.

Attribute	Type	Required	Description
`inset`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Inner padding of this block

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)

Block-level rhythm override.

Attribute	Type	Required	Description
`spacing`	`"flush" \| "tight" \| "default" \| "loose" \| "breathe"`	—	Vertical spacing above and below this block

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)

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

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
prominence	this rune has no page-section header

Docs

Runes

Themes

Extend

Project

Essentials

Content

Registry

Layout

Code & Data

Site

Marketing

Docs

Storytelling

Places

Business

Learning

Design

Media

Plan