refrakt.md

Docs Runes Plan Blog Changelog

Showcase

Present visual content in a constrained viewport with optional decorative effects. The showcase rune wraps images, videos, or embedded content and adds shadow, bleed, offset, and aspect ratio controls — useful for presenting screenshots, product shots, or component previews.

Basic usage

Wrap any visual content in a showcase to give it a framed presentation.

{% showcase %}
![Dashboard screenshot](https://picsum.photos/seed/dashboard/800/450)
{% /showcase %}
<div data-rune="showcase">
  <div data-name="viewport">
    <p>
      <img src="https://picsum.photos/seed/dashboard/800/450" alt="Dashboard screenshot">
    </p>
  </div>
</div>

Dashboard screenshot

<div class="rf-showcase rf-showcase--none rf-showcase--none" data-shadow="none" data-bleed="none" data-rune="showcase" data-density="compact">
  <div data-name="viewport" class="rf-showcase__viewport" data-section="body">
    <p>
      <img src="https://picsum.photos/seed/dashboard/800/450" alt="Dashboard screenshot" />
    </p>
  </div>
</div>

Shadow

Add depth with a shadow effect. Three intensities are available.

{% showcase shadow="soft" %}
![Interface preview](https://picsum.photos/seed/interface/800/450)
{% /showcase %}
<div data-rune="showcase">
  <meta content="soft" data-field="shadow">
  <div data-name="viewport">
    <p>
      <img src="https://picsum.photos/seed/interface/800/450" alt="Interface preview">
    </p>
  </div>
</div>

Interface preview

<div class="rf-showcase rf-showcase--soft rf-showcase--none" data-shadow="soft" data-bleed="none" data-rune="showcase" data-density="compact">
  <div data-name="viewport" class="rf-showcase__viewport" data-section="body">
    <p>
      <img src="https://picsum.photos/seed/interface/800/450" alt="Interface preview" />
    </p>
  </div>
</div>
{% showcase shadow="elevated" %}
![Product shot](https://picsum.photos/seed/product/800/450)
{% /showcase %}
<div data-rune="showcase">
  <meta content="elevated" data-field="shadow">
  <div data-name="viewport">
    <p>
      <img src="https://picsum.photos/seed/product/800/450" alt="Product shot">
    </p>
  </div>
</div>

Product shot

<div class="rf-showcase rf-showcase--elevated rf-showcase--none" data-shadow="elevated" data-bleed="none" data-rune="showcase" data-density="compact">
  <div data-name="viewport" class="rf-showcase__viewport" data-section="body">
    <p>
      <img src="https://picsum.photos/seed/product/800/450" alt="Product shot" />
    </p>
  </div>
</div>

Bleed

Allow the showcase to extend beyond its container's bounds. Useful for visually breaking out of a section's padding.

{% showcase shadow="soft" bleed="bottom" %}
![App screenshot](https://picsum.photos/seed/appscreen/800/500)
{% /showcase %}
<div data-rune="showcase">
  <meta content="soft" data-field="shadow">
  <meta content="bottom" data-field="bleed">
  <div data-name="viewport">
    <p>
      <img src="https://picsum.photos/seed/appscreen/800/500" alt="App screenshot">
    </p>
  </div>
</div>

App screenshot

<div class="rf-showcase rf-showcase--soft rf-showcase--bottom" data-shadow="soft" data-bleed="bottom" data-rune="showcase" data-density="compact">
  <div data-name="viewport" class="rf-showcase__viewport" data-section="body">
    <p>
      <img src="https://picsum.photos/seed/appscreen/800/500" alt="App screenshot" />
    </p>
  </div>
</div>

Bleed directions: top, bottom, or both. The offset distance defaults to 2rem and can be customised with the offset attribute.

Aspect ratio

Enforce a uniform aspect ratio on the viewport. Content is cropped to fit using object-fit: cover.

{% showcase aspect="16/9" shadow="soft" %}
![Landscape](https://picsum.photos/seed/landscape/800/600)
{% /showcase %}
<div data-rune="showcase">
  <meta content="soft" data-field="shadow">
  <meta content="16/9" data-field="aspect">
  <div data-name="viewport">
    <p>
      <img src="https://picsum.photos/seed/landscape/800/600" alt="Landscape">
    </p>
  </div>
</div>

Landscape

<div class="rf-showcase rf-showcase--soft rf-showcase--none" data-shadow="soft" data-bleed="none" data-aspect="16/9" data-rune="showcase" data-density="compact" style="--showcase-aspect: 16/9">
  <div data-name="viewport" class="rf-showcase__viewport" data-section="body">
    <p>
      <img src="https://picsum.photos/seed/landscape/800/600" alt="Landscape" />
    </p>
  </div>
</div>

Combined

Attributes can be combined freely.

{% showcase shadow="elevated" bleed="both" aspect="16/9" %}
![Hero image](https://picsum.photos/seed/heroimg/800/500)
{% /showcase %}
<div data-rune="showcase">
  <meta content="elevated" data-field="shadow">
  <meta content="both" data-field="bleed">
  <meta content="16/9" data-field="aspect">
  <div data-name="viewport">
    <p>
      <img src="https://picsum.photos/seed/heroimg/800/500" alt="Hero image">
    </p>
  </div>
</div>

Hero image

<div class="rf-showcase rf-showcase--elevated rf-showcase--both" data-shadow="elevated" data-bleed="both" data-aspect="16/9" data-rune="showcase" data-density="compact" style="--showcase-aspect: 16/9">
  <div data-name="viewport" class="rf-showcase__viewport" data-section="body">
    <p>
      <img src="https://picsum.photos/seed/heroimg/800/500" alt="Hero image" />
    </p>
  </div>
</div>

Attributes

AttributeTypeDefaultDescription
shadowstringnoneShadow intensity: none, soft, hard, or elevated
bleedstringnoneExtend beyond container: none, top, bottom, or both
offsetstring—Bleed distance as a CSS value (e.g., 3rem, 40px)
aspectstring—Aspect ratio for the viewport (e.g., 16/9, 4/3, 1/1)

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