refrakt.md

Docs Runes Plan Blog Changelog

note

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.

CTA

A focused call-to-action block. Headings become the headline, paragraphs become the subtitle, and list items with links become action buttons. Code fences become copyable command blocks. Use CTA for action prompts that can appear anywhere on a page — for full-width intro sections, use Hero instead.

Basic usage

A headline with a description and action buttons.

{% cta %}
# Get Started with refrakt.md

Build structured content sites with semantic Markdown.

- [Quick Start](/docs/getting-started)
- [View on GitHub](https://github.com)
{% /cta %}
<section data-field="content-section" data-rune="call-to-action">
  <header>
    <h1 id="get-started-with-refrakt.md" data-name="headline">Get Started with refrakt.md</h1>
    <p data-name="blurb">Build structured content sites with semantic Markdown.</p>
  </header>
  <div data-name="actions">
    <ul>
      <li data-name="action">
        <a href="/docs/getting-started">
          <span>Quick Start</span>
        </a>
      </li>
      <li data-name="action">
        <a href="https://github.com">
          <span>View on GitHub</span>
        </a>
      </li>
    </ul>
  </div>
</section>

Get Started with refrakt.md

Build structured content sites with semantic Markdown.

<section data-field="content-section" class="rf-cta rf-cta--full" data-width="full" data-rune="call-to-action" data-density="full">
  <header data-name="preamble" class="rf-cta__preamble" data-section="preamble">
    <h1 id="get-started-with-refrakt.md" data-name="headline" class="rf-cta__headline" data-section="title">Get Started with refrakt.md</h1>
    <p data-name="blurb" class="rf-cta__blurb" data-section="description">Build structured content sites with semantic Markdown.</p>
  </header>
  <div data-name="actions" class="rf-cta__actions">
    <ul>
      <li data-name="action">
        <a href="/docs/getting-started">
          <span>Quick Start</span>
        </a>
      </li>
      <li data-name="action">
        <a href="https://github.com">
          <span>View on GitHub</span>
        </a>
      </li>
    </ul>
  </div>
</section>

With command block

Code fences inside a CTA become copyable command blocks.

{% cta %}
# Install refrakt.md

Get up and running in seconds.

```shell
npm install @refrakt-md/runes
```
{% /cta %}
<section data-field="content-section" data-rune="call-to-action">
  <header>
    <h1 id="install-refrakt.md" data-name="headline">Install refrakt.md</h1>
    <p data-name="blurb">Get up and running in seconds.</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 install @refrakt-md/runes
</code>
        </pre>
      </div>
    </div>
  </div>
</section>

Install refrakt.md

Get up and running in seconds.

npm install @refrakt-md/runes

<section data-field="content-section" class="rf-cta rf-cta--full" data-width="full" data-rune="call-to-action" data-density="full">
  <header data-name="preamble" class="rf-cta__preamble" data-section="preamble">
    <h1 id="install-refrakt.md" data-name="headline" class="rf-cta__headline" data-section="title">Install refrakt.md</h1>
    <p data-name="blurb" class="rf-cta__blurb" data-section="description">Get up and running in seconds.</p>
  </header>
  <div data-name="actions" class="rf-cta__actions">
    <div data-name="command" class="rf-cta__command">
      <div class="rf-cta__command rf-codeblock" data-name="command">
        <pre data-language="shell"><code data-language="shell">npm install @refrakt-md/runes
</code></pre>
      </div>
    </div>
  </div>
</section>

Section header

CTA 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.

AttributeTypeDefaultDescription
widthstringcontentPage grid width: content, wide, or full
spacingstring—Vertical spacing: flush, tight, default, loose, or breathe
insetstring—Horizontal padding: flush, tight, default, loose, or breathe
tintstring—Named colour tint from theme configuration
tint-modestringautoColour scheme override: auto, dark, or light
bgstring—Named background preset from theme configuration