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.

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">
      <meta content="stacked" data-field="layout">
      <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">
      <meta content="stacked" data-field="layout">
      <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">
      <meta content="stacked" data-field="layout">
      <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-rune="steps" data-density="full">
  <ol data-sequence="numbered">
    <li data-field="step" class="rf-step rf-step--stacked" data-layout="stacked" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="step" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
      <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 rf-step--stacked" data-layout="stacked" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="step" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
      <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 rf-step--stacked" data-layout="stacked" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="step" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
      <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">
      <meta content="stacked" data-field="layout">
      <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">
      <meta content="stacked" data-field="layout">
      <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">
      <meta content="stacked" data-field="layout">
      <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-rune="steps" data-density="full">
  <ol data-sequence="numbered">
    <li data-field="step" class="rf-step rf-step--stacked" data-layout="stacked" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="step" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
      <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 rf-step--stacked" data-layout="stacked" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="step" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
      <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 rf-step--stacked" data-layout="stacked" data-ratio="1 1" data-valign="top" data-gap="default" data-rune="step" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
      <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 attributes

Individual steps (list items or heading-delimited blocks) accept these layout attributes.

Attribute	Type	Default	Description
`layout`	`string`	`stacked`	Layout mode: `stacked`, `split`, or `split-reverse`
`ratio`	`string`	`1 1`	Column width ratio in split layout (e.g., `2 1`, `1 2`)
`valign`	`string`	`top`	Vertical alignment in split layout: `top`, `center`, or `bottom`
`gap`	`string`	`default`	Gap between columns: `none`, `tight`, `default`, or `loose`
`collapse`	`string`	—	Collapse to single column at breakpoint: `sm`, `md`, `lg`, or `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.

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

Steps

Basic usage

Heading-based steps

Clone the repository

Install dependencies

Run the tests

Step attributes

Section header

Common attributes