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.

Steps

Step-by-step instructions with numbered indicators. Ordered list items become individual steps.

Basic usage

Each ordered list item becomes a numbered step.

{% steps %}
1. Install the dependencies

   Run the install command for your package manager.

2. Create your content directory

   Add a `content/` folder with your Markdown files.

3. Start the dev server

   Run `npm run dev` and visit localhost.
{% /steps %}

<section data-field="content-section" data-rune="steps">
  <ol>
    <li data-field="step" data-rune="step" data-rune-fields="{&quot;media-position&quot;:&quot;bottom&quot;}">
      <div data-name="content">
        <p>Install the dependencies</p>
        <p>Run the install command for your package manager.</p>
      </div>
    </li>
    <li data-field="step" data-rune="step" data-rune-fields="{&quot;media-position&quot;:&quot;bottom&quot;}">
      <div data-name="content">
        <p>Create your content directory</p>
        <p>
          Add a
          <code>content/</code>
          folder with your Markdown files.
        </p>
      </div>
    </li>
    <li data-field="step" data-rune="step" data-rune-fields="{&quot;media-position&quot;:&quot;bottom&quot;}">
      <div data-name="content">
        <p>Start the dev server</p>
        <p>
          Run
          <code>npm run dev</code>
          and visit localhost.
        </p>
      </div>
    </li>
  </ol>
</section>

Install the dependencies
Run the install command for your package manager.
Create your content directory
Add a content/ folder with your Markdown files.
Start the dev server
Run npm run dev and visit localhost.

<section data-field="content-section" class="rf-steps" data-elevation="flush" data-rune="steps" data-density="full">
  <ol data-sequence="numbered">
    <li data-field="step" class="rf-step" data-media-position="bottom" data-rune="step" data-density="full">
      <div data-name="content" class="rf-step__content">
        <p>Install the dependencies</p>
        <p>Run the install command for your package manager.</p>
      </div>
    </li>
    <li data-field="step" class="rf-step" data-media-position="bottom" data-rune="step" data-density="full">
      <div data-name="content" class="rf-step__content">
        <p>Create your content directory</p>
        <p>
          Add a 
          <code>content/</code>
           folder with your Markdown files.
        </p>
      </div>
    </li>
    <li data-field="step" class="rf-step" data-media-position="bottom" data-rune="step" data-density="full">
      <div data-name="content" class="rf-step__content">
        <p>Start the dev server</p>
        <p>
          Run 
          <code>npm run dev</code>
           and visit localhost.
        </p>
      </div>
    </li>
  </ol>
</section>

Heading-based steps

Headings are automatically converted into steps instead of list items.

{% steps %}
### Clone the repository

Fork and clone the repo to your local machine.

### Install dependencies

Run `npm install` to set up all packages.

### Run the tests

Verify everything works with `npm test`.
{% /steps %}

<section data-field="content-section" data-rune="steps">
  <ol>
    <li data-field="step" data-rune="step" data-rune-fields="{&quot;media-position&quot;:&quot;bottom&quot;}">
      <div data-name="content">
        <h3 id="clone-the-repository" data-field="name">Clone the repository</h3>
        <p>Fork and clone the repo to your local machine.</p>
      </div>
    </li>
    <li data-field="step" data-rune="step" data-rune-fields="{&quot;media-position&quot;:&quot;bottom&quot;}">
      <div data-name="content">
        <h3 id="install-dependencies" data-field="name">Install dependencies</h3>
        <p>
          Run
          <code>npm install</code>
          to set up all packages.
        </p>
      </div>
    </li>
    <li data-field="step" data-rune="step" data-rune-fields="{&quot;media-position&quot;:&quot;bottom&quot;}">
      <div data-name="content">
        <h3 id="run-the-tests" data-field="name">Run the tests</h3>
        <p>
          Verify everything works with
          <code>npm test</code>
          .
        </p>
      </div>
    </li>
  </ol>
</section>

Clone the repository
Fork and clone the repo to your local machine.
Install dependencies
Run npm install to set up all packages.
Run the tests
Verify everything works with npm test.

<section data-field="content-section" class="rf-steps" data-elevation="flush" data-rune="steps" data-density="full">
  <ol data-sequence="numbered">
    <li data-field="step" class="rf-step" data-media-position="bottom" data-rune="step" data-density="full">
      <div data-name="content" class="rf-step__content">
        <h3 id="clone-the-repository" data-field="name">Clone the repository</h3>
        <p>Fork and clone the repo to your local machine.</p>
      </div>
    </li>
    <li data-field="step" class="rf-step" data-media-position="bottom" data-rune="step" data-density="full">
      <div data-name="content" class="rf-step__content">
        <h3 id="install-dependencies" data-field="name">Install dependencies</h3>
        <p>
          Run 
          <code>npm install</code>
           to set up all packages.
        </p>
      </div>
    </li>
    <li data-field="step" class="rf-step" data-media-position="bottom" data-rune="step" data-density="full">
      <div data-name="content" class="rf-step__content">
        <h3 id="run-the-tests" data-field="name">Run the tests</h3>
        <p>
          Verify everything works with 
          <code>npm test</code>
          .
        </p>
      </div>
    </li>
  </ol>
</section>

Step layout attributes

Individual steps (heading-delimited blocks) accept the shared media+content layout vocabulary — the body splits on --- into media → content zones (media-first in source); media-position controls visual placement.

Attribute	Type	Default	Description
`media-position`	`string`	`bottom`	Where the media sits: `top`, `bottom` (the default — media beneath the text), `start` (left), `end` (right)
`media-ratio`	`string`	—	Media's share of the row when beside content (`start`/`end`): `1/3`, `2/5`, `1/2`, `3/5`, `2/3`
`valign`	`string`	—	Cross-axis alignment when media is beside content: `top`, `center`, `bottom`, `stretch`
`collapse`	`string`	—	Breakpoint at which beside layouts collapse to a stack: `sm`, `md`, `lg`, `never`

Section header

Steps supports an optional eyebrow, headline, and blurb above the section above the steps. Place a short paragraph or heading before the main content to use them. See Page sections for the full syntax.

Attributes

`step`

Inherited from the `split layout` preset

Attribute	Type	Required	Description
`media-position`	`"top" \| "bottom" \| "start" \| "end" \| "cover"`	—	Where the media zone sits relative to the content: above (top), below (bottom), or beside (start/end)
`media-ratio`	`"1/3" \| "2/5" \| "1/2" \| "3/5" \| "2/3"`	—	Media zone’s share of the row width when media is beside content (start/end)
`valign`	`"top" \| "center" \| "bottom" \| "stretch"`	—	Cross-axis alignment when media is beside content (start/end); applies to the shorter zone
`collapse`	`"sm" \| "md" \| "lg" \| "never"`	—	Breakpoint at which side-by-side layouts collapse to a single stacked column

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

Steps

Basic usage

Heading-based steps

Clone the repository

Install dependencies

Run the tests

Step layout attributes

Section header

Attributes

`step`

Inherited from the `split layout` preset

Universal attributes

Steps

Basic usage

Heading-based steps

Clone the repository

Install dependencies

Run the tests

Step layout attributes

Section header

Attributes

step

Inherited from the split layout preset

Universal attributes

`step`

Inherited from the `split layout` preset