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.

Hero

Full-width intro section for the top of a page. Headings and paragraphs become the header, links become action buttons, and code fences become copyable command blocks. The first link is styled as a primary button. For smaller, focused action blocks that can appear anywhere, use CTA instead.

Basic usage

A centered hero section with headline, description, and action buttons.

{% hero %}

Whats new [Version 1.0](#)

# Build with refrakt.md

A content framework that turns Markdown into rich, semantic pages. Write standard Markdown — runes decide how it's interpreted.

- [Get started](/docs/getting-started)
- [View on GitHub](https://github.com/refrakt-md/refrakt)
{% /hero %}

<section data-field="content-section" data-rune="hero">
  <meta content="center" data-field="align">
  <meta content="stacked" data-field="layout">
  <div data-name="content">
    <header>
      <p data-name="eyebrow">
        Whats new
        <a href="#">Version 1.0</a>
      </p>
      <h1 id="build-with-refrakt.md" data-name="headline">Build with refrakt.md</h1>
      <p data-name="blurb">A content framework that turns Markdown into rich, semantic pages. Write standard Markdown — runes decide how it's interpreted.</p>
    </header>
    <div data-name="actions">
      <ul>
        <li data-name="action">
          <a href="/docs/getting-started">
            <span>Get started</span>
          </a>
        </li>
        <li data-name="action">
          <a href="https://github.com/refrakt-md/refrakt">
            <span>View on GitHub</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

Whats new Version 1.0

Build with refrakt.md

A content framework that turns Markdown into rich, semantic pages. Write standard Markdown — runes decide how it's interpreted.

<section data-field="content-section" class="rf-hero rf-hero--stacked rf-hero--center rf-hero--full" data-layout="stacked" data-align="center" data-ratio="1 1" data-valign="top" data-gap="default" data-width="full" data-rune="hero" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
  <div data-name="content" class="rf-hero__content">
    <header data-name="preamble" class="rf-hero__preamble" data-section="preamble">
      <p data-name="eyebrow" class="rf-hero__eyebrow">
        Whats new 
        <a href="#">Version 1.0</a>
      </p>
      <h1 id="build-with-refrakt.md" data-name="headline" class="rf-hero__headline" data-section="title">Build with refrakt.md</h1>
      <p data-name="blurb" class="rf-hero__blurb" data-section="description">A content framework that turns Markdown into rich, semantic pages. Write standard Markdown — runes decide how it's interpreted.</p>
    </header>
    <div data-name="actions" class="rf-hero__actions">
      <ul>
        <li data-name="action">
          <a href="/docs/getting-started">
            <span>Get started</span>
          </a>
        </li>
        <li data-name="action">
          <a href="https://github.com/refrakt-md/refrakt">
            <span>View on GitHub</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

With command block

Code fences inside a hero become copyable command blocks — great for install commands on landing pages.

{% hero %}
# Get started in seconds

Scaffold a project and start writing.

```shell
npm create refrakt
```

- [Documentation](/docs/getting-started)
{% /hero %}

<section data-field="content-section" data-rune="hero">
  <meta content="center" data-field="align">
  <meta content="stacked" data-field="layout">
  <div data-name="content">
    <header>
      <h1 id="get-started-in-seconds" data-name="headline">Get started in seconds</h1>
      <p data-name="blurb">Scaffold a project and start writing.</p>
    </header>
    <div data-name="actions">
      <div data-name="command">
        <div class="rf-codeblock" data-name="command">
          <pre data-language="shell">
            <code data-language="shell">npm create refrakt
</code>
          </pre>
        </div>
      </div>
      <ul>
        <li data-name="action">
          <a href="/docs/getting-started">
            <span>Documentation</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

Get started in seconds

Scaffold a project and start writing.

npm create refrakt

Documentation

<section data-field="content-section" class="rf-hero rf-hero--stacked rf-hero--center rf-hero--full" data-layout="stacked" data-align="center" data-ratio="1 1" data-valign="top" data-gap="default" data-width="full" data-rune="hero" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
  <div data-name="content" class="rf-hero__content">
    <header data-name="preamble" class="rf-hero__preamble" data-section="preamble">
      <h1 id="get-started-in-seconds" data-name="headline" class="rf-hero__headline" data-section="title">Get started in seconds</h1>
      <p data-name="blurb" class="rf-hero__blurb" data-section="description">Scaffold a project and start writing.</p>
    </header>
    <div data-name="actions" class="rf-hero__actions">
      <div data-name="command" class="rf-hero__command">
        <div class="rf-hero__command rf-codeblock" data-name="command">
          <pre data-language="shell"><code data-language="shell">npm create refrakt
</code></pre>
        </div>
      </div>
      <ul>
        <li data-name="action">
          <a href="/docs/getting-started">
            <span>Documentation</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

Left-aligned

Use align="left" for a more editorial feel.

{% hero align="left" %}
# Documentation that writes itself

Semantic runes transform your Markdown into structured, accessible content.

- [Quick start](/docs/getting-started)
{% /hero %}

<section data-field="content-section" data-rune="hero">
  <meta content="left" data-field="align">
  <meta content="stacked" data-field="layout">
  <div data-name="content">
    <header>
      <h1 id="documentation-that-writes-itself" data-name="headline">Documentation that writes itself</h1>
      <p data-name="blurb">Semantic runes transform your Markdown into structured, accessible content.</p>
    </header>
    <div data-name="actions">
      <ul>
        <li data-name="action">
          <a href="/docs/getting-started">
            <span>Quick start</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

Documentation that writes itself

Semantic runes transform your Markdown into structured, accessible content.

Quick start

<section data-field="content-section" class="rf-hero rf-hero--stacked rf-hero--left rf-hero--full" data-layout="stacked" data-align="left" data-ratio="1 1" data-valign="top" data-gap="default" data-width="full" data-rune="hero" data-density="full" style="--split-ratio: 1fr 1fr; --split-valign: start; --split-gap: var(--rf-spacing-md)">
  <div data-name="content" class="rf-hero__content">
    <header data-name="preamble" class="rf-hero__preamble" data-section="preamble">
      <h1 id="documentation-that-writes-itself" data-name="headline" class="rf-hero__headline" data-section="title">Documentation that writes itself</h1>
      <p data-name="blurb" class="rf-hero__blurb" data-section="description">Semantic runes transform your Markdown into structured, accessible content.</p>
    </header>
    <div data-name="actions" class="rf-hero__actions">
      <ul>
        <li data-name="action">
          <a href="/docs/getting-started">
            <span>Quick start</span>
          </a>
        </li>
      </ul>
    </div>
  </div>
</section>

Attributes

Attribute	Type	Default	Description
`align`	`string`	`center`	Content alignment: `left`, `center`, or `right`
`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

Hero supports an optional eyebrow, headline, and blurb above the headline and description. 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