refrakt.md

Docs Runes Plan Blog Changelog

Tabs

Tabbed content panels. Headings become tab labels, the content below each heading becomes the tab panel.

Heading-based tabs

Headings are automatically converted into tab labels.

{% tabs %}
## npm

```shell
npm install @refrakt-md/runes
```

## yarn

```shell
yarn add @refrakt-md/runes
```

## pnpm

```shell
pnpm add @refrakt-md/runes
```
{% /tabs %}
<section data-field="content-section" data-rune="tab-group">
  <div role="tablist" data-name="tabs">
    <button data-rune="tab">
      <span data-name="name">
      </span>
    </button>
    <button data-rune="tab">
      <span data-name="name">
      </span>
    </button>
    <button data-rune="tab">
      <span data-name="name">
      </span>
    </button>
  </div>
  <div data-name="panels">
    <div data-rune="tab-panel">
      <div class="rf-codeblock">
        <pre data-language="shell">
          <code data-language="shell">npm install @refrakt-md/runes
</code>
        </pre>
      </div>
    </div>
    <div data-rune="tab-panel">
      <div class="rf-codeblock">
        <pre data-language="shell">
          <code data-language="shell">yarn add @refrakt-md/runes
</code>
        </pre>
      </div>
    </div>
    <div data-rune="tab-panel">
      <div class="rf-codeblock">
        <pre data-language="shell">
          <code data-language="shell">pnpm add @refrakt-md/runes
</code>
        </pre>
      </div>
    </div>
  </div>
</section>
npm install @refrakt-md/runes

yarn add @refrakt-md/runes

pnpm add @refrakt-md/runes

<section data-field="content-section" class="rf-tabs" data-rune="tab-group" data-density="full">
  <div role="tablist" data-name="tabs" class="rf-tabs__tabs">
    <button class="rf-tab" data-rune="tab" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-tab__name">
        npm
      </span>
    </button>
    <button class="rf-tab" data-rune="tab" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-tab__name">
        yarn
      </span>
    </button>
    <button class="rf-tab" data-rune="tab" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-tab__name">
        pnpm
      </span>
    </button>
  </div>
  <div data-name="panels" class="rf-tabs__panels">
    <div class="rf-tab-panel" data-rune="tab-panel" data-density="full" data-state="inactive">
      <div class="rf-codeblock">
        <pre data-language="shell"><code data-language="shell">npm install @refrakt-md/runes
</code></pre>
      </div>
    </div>
    <div class="rf-tab-panel" data-rune="tab-panel" data-density="full" data-state="inactive">
      <div class="rf-codeblock">
        <pre data-language="shell"><code data-language="shell">yarn add @refrakt-md/runes
</code></pre>
      </div>
    </div>
    <div class="rf-tab-panel" data-rune="tab-panel" data-density="full" data-state="inactive">
      <div class="rf-codeblock">
        <pre data-language="shell"><code data-language="shell">pnpm add @refrakt-md/runes
</code></pre>
      </div>
    </div>
  </div>
</section>

Explicit tab tags

Use {% tab %} tags for more control over tab names and content.

{% tabs %}
{% tab name="JavaScript" %}
Content for the JavaScript tab.
{% /tab %}

{% tab name="TypeScript" %}
Content for the TypeScript tab.
{% /tab %}
{% /tabs %}
<section data-field="content-section" data-rune="tab-group">
  <div role="tablist" data-name="tabs">
    <button data-rune="tab">
      <span data-name="name">JavaScript</span>
    </button>
    <button data-rune="tab">
      <span data-name="name">TypeScript</span>
    </button>
  </div>
  <div data-name="panels">
    <div data-rune="tab-panel">
      <p>Content for the JavaScript tab.</p>
    </div>
    <div data-rune="tab-panel">
      <p>Content for the TypeScript tab.</p>
    </div>
  </div>
</section>

Content for the JavaScript tab.

Content for the TypeScript tab.

<section data-field="content-section" class="rf-tabs" data-rune="tab-group" data-density="full">
  <div role="tablist" data-name="tabs" class="rf-tabs__tabs">
    <button class="rf-tab" data-rune="tab" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-tab__name">JavaScript</span>
    </button>
    <button class="rf-tab" data-rune="tab" data-density="full" data-state="inactive">
      <span data-name="name" class="rf-tab__name">TypeScript</span>
    </button>
  </div>
  <div data-name="panels" class="rf-tabs__panels">
    <div class="rf-tab-panel" data-rune="tab-panel" data-density="full" data-state="inactive">
      <p>Content for the JavaScript tab.</p>
    </div>
    <div class="rf-tab-panel" data-rune="tab-panel" data-density="full" data-state="inactive">
      <p>Content for the TypeScript tab.</p>
    </div>
  </div>
</section>

Section header

Tabs supports an optional eyebrow, headline, and blurb above the tab bar. Place a short paragraph or heading before your tab headings 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