This rune is part of @refrakt-md/storytelling. Install with npm install @refrakt-md/storytelling and add "@refrakt-md/storytelling" to the packages array in your refrakt.config.json.

Storyboard

Comic/storyboard layout. Images become panels, following paragraphs become captions.

Basic usage

Each image starts a new panel. Text after the image becomes that panel's caption.

{% storyboard columns=3 %}
![Dawn](https://picsum.photos/seed/dawn/600/400)

The journey begins at first light.

![Forest](https://picsum.photos/seed/forest/600/400)

An unexpected path through the trees.

![Summit](https://picsum.photos/seed/summit/600/400)

The view from the top changes everything.
{% /storyboard %}

<div data-rune="storyboard">
  <meta content="clean" data-field="variant">
  <meta content="3" data-field="columns">
  <div data-name="panels">
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/dawn/600/400" alt="Dawn">
        </p>
        <p>The journey begins at first light.</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/forest/600/400" alt="Forest">
        </p>
        <p>An unexpected path through the trees.</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/summit/600/400" alt="Summit">
        </p>
        <p>The view from the top changes everything.</p>
      </div>
    </div>
  </div>
</div>

Dawn

The journey begins at first light.

Forest

An unexpected path through the trees.

Summit

The view from the top changes everything.

<div class="rf-storyboard rf-storyboard--clean rf-storyboard--3" data-variant="clean" data-columns="3" data-rune="storyboard" data-density="full" style="--sb-columns: 3">
  <div data-name="panels" class="rf-storyboard__panels">
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/dawn/600/400" alt="Dawn" />
        </p>
        <p>The journey begins at first light.</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/forest/600/400" alt="Forest" />
        </p>
        <p>An unexpected path through the trees.</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/summit/600/400" alt="Summit" />
        </p>
        <p>The view from the top changes everything.</p>
      </div>
    </div>
  </div>
</div>

Comic style

Thick borders and slightly tilted panels give a comic book feel.

{% storyboard columns=3 variant="comic" %}
![Hero](https://picsum.photos/seed/hero/600/400)

Our hero sets out on an adventure.

![Challenge](https://picsum.photos/seed/storm/600/400)

A storm blocks the way forward!

![Victory](https://picsum.photos/seed/sunset/600/400)

Against all odds, a new dawn rises.
{% /storyboard %}

<div data-rune="storyboard">
  <meta content="comic" data-field="variant">
  <meta content="3" data-field="columns">
  <div data-name="panels">
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/hero/600/400" alt="Hero">
        </p>
        <p>Our hero sets out on an adventure.</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/storm/600/400" alt="Challenge">
        </p>
        <p>A storm blocks the way forward!</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/sunset/600/400" alt="Victory">
        </p>
        <p>Against all odds, a new dawn rises.</p>
      </div>
    </div>
  </div>
</div>

Hero

Our hero sets out on an adventure.

Challenge

A storm blocks the way forward!

Victory

Against all odds, a new dawn rises.

<div class="rf-storyboard rf-storyboard--comic rf-storyboard--3" data-variant="comic" data-columns="3" data-rune="storyboard" data-density="full" style="--sb-columns: 3">
  <div data-name="panels" class="rf-storyboard__panels">
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/hero/600/400" alt="Hero" />
        </p>
        <p>Our hero sets out on an adventure.</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/storm/600/400" alt="Challenge" />
        </p>
        <p>A storm blocks the way forward!</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/sunset/600/400" alt="Victory" />
        </p>
        <p>Against all odds, a new dawn rises.</p>
      </div>
    </div>
  </div>
</div>

Polaroid style

White-framed panels with drop shadows, like pinned photos.

{% storyboard columns=2 variant="polaroid" %}
![Coast](https://picsum.photos/seed/coast/600/400)

Summer by the sea

![Mountains](https://picsum.photos/seed/alpine/600/400)

Autumn in the mountains

![City](https://picsum.photos/seed/city/600/400)

Winter in the city

![Garden](https://picsum.photos/seed/garden/600/400)

Spring blooms again
{% /storyboard %}

<div data-rune="storyboard">
  <meta content="polaroid" data-field="variant">
  <meta content="2" data-field="columns">
  <div data-name="panels">
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/coast/600/400" alt="Coast">
        </p>
        <p>Summer by the sea</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/alpine/600/400" alt="Mountains">
        </p>
        <p>Autumn in the mountains</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/city/600/400" alt="City">
        </p>
        <p>Winter in the city</p>
      </div>
    </div>
    <div data-field="panel" data-rune="storyboard-panel">
      <div data-name="body">
        <p data-name="caption">
          <img src="https://picsum.photos/seed/garden/600/400" alt="Garden">
        </p>
        <p>Spring blooms again</p>
      </div>
    </div>
  </div>
</div>

Coast

Summer by the sea

Mountains

Autumn in the mountains

City

Winter in the city

Garden

Spring blooms again

<div class="rf-storyboard rf-storyboard--polaroid rf-storyboard--2" data-variant="polaroid" data-columns="2" data-rune="storyboard" data-density="full" style="--sb-columns: 2">
  <div data-name="panels" class="rf-storyboard__panels">
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/coast/600/400" alt="Coast" />
        </p>
        <p>Summer by the sea</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/alpine/600/400" alt="Mountains" />
        </p>
        <p>Autumn in the mountains</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/city/600/400" alt="City" />
        </p>
        <p>Winter in the city</p>
      </div>
    </div>
    <div data-field="panel" class="rf-storyboard-panel" data-rune="storyboard-panel" data-density="full">
      <div data-name="body" class="rf-storyboard-panel__body">
        <p data-name="caption" class="rf-storyboard-panel__caption">
          <img src="https://picsum.photos/seed/garden/600/400" alt="Garden" />
        </p>
        <p>Spring blooms again</p>
      </div>
    </div>
  </div>
</div>

Attributes

Attribute	Type	Default	Description
`columns`	`number`	`3`	Panels per row
`variant`	`string`	`clean`	Visual variant: `clean`, `comic`, `polaroid`

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