Showcase
Present visual content in a constrained viewport with optional decorative chrome. The showcase rune wraps images, videos, or embedded content — useful for screenshots, product shots, or component previews.
Showcase is the degenerate frameTarget: "self" case of the surface model: its body is the media, so frame chrome (shadow, displacement, offset, aspect) lands on the showcase itself. Its distinct value is breakout — spilling past a non-clipping ancestor.
SPEC-086 — showcase's old shadow / bleed / offset / aspect / place attributes are now deprecated aliases for the frame-* facets below. They still work (with a build warning) for one minor release, then are removed. Use the frame-* facets.
Basic usage
Wrap any visual content in a showcase to give it a framed presentation.
{% showcase %}
{% /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><div class="rf-showcase" 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 a silhouette drop-shadow with frame-shadow. Four levels: none, sm, md, lg. (This is distinct from elevation, which is a box-shadow on a rune's self surface — see surfaces.)
{% showcase frame-shadow="sm" %}
{% /showcase %}<div data-rune="showcase">
<div data-name="viewport">
<p>
<img src="https://picsum.photos/seed/interface/800/450" alt="Interface preview">
</p>
</div>
<meta data-field="frame-shadow" content="sm">
</div><div class="rf-showcase" data-frame-shadow="sm" 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 frame-shadow="lg" %}
{% /showcase %}<div data-rune="showcase">
<div data-name="viewport">
<p>
<img src="https://picsum.photos/seed/product/800/450" alt="Product shot">
</p>
</div>
<meta data-field="frame-shadow" content="lg">
</div><div class="rf-showcase" data-frame-shadow="lg" 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 (displacement)
Let the showcase spill beyond its container — a breakout host renders overflow: visible. frame-displace picks the edge or corner the content moves toward; frame-offset is the distance.
{% showcase frame-shadow="sm" frame-displace="bottom" frame-offset="lg" %}
{% /showcase %}<div data-rune="showcase">
<div data-name="viewport">
<p>
<img src="https://picsum.photos/seed/appscreen/800/500" alt="App screenshot">
</p>
</div>
<meta data-field="frame-displace" content="bottom">
<meta data-field="frame-offset" content="lg">
<meta data-field="frame-shadow" content="sm">
</div><div class="rf-showcase" data-displace="bottom" data-frame-shadow="sm" data-rune="showcase" data-density="compact" style="--frame-offset: var(--rf-spacing-lg)">
<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>Displace directions: top, bottom, end, bottom-end, top-end (both is also accepted). frame-offset is a named scale — none, sm, md, lg, xl (backed by the spacing tokens); a raw length warns and collapses to none.
Clip is host-owned: inside a clipping host (e.g. a bento cell) the same displaced showcase is cropped into a peek instead of spilling. frame-offset collapses on mobile regardless of host.
Aspect ratio
Enforce a uniform aspect ratio with frame-aspect. Content is cropped to fit (object-fit: cover).
{% showcase frame-aspect="16/9" frame-shadow="sm" %}
{% /showcase %}<div data-rune="showcase">
<div data-name="viewport">
<p>
<img src="https://picsum.photos/seed/landscape/800/600" alt="Landscape">
</p>
</div>
<meta data-field="frame-aspect" content="16/9">
<meta data-field="frame-shadow" content="sm">
</div><div class="rf-showcase" data-frame-shadow="sm" data-rune="showcase" data-density="compact" style="--frame-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
Facets compose freely.
{% showcase frame-shadow="lg" frame-displace="both" frame-aspect="16/9" %}
{% /showcase %}<div data-rune="showcase">
<div data-name="viewport">
<p>
<img src="https://picsum.photos/seed/heroimg/800/500" alt="Hero image">
</p>
</div>
<meta data-field="frame-aspect" content="16/9">
<meta data-field="frame-displace" content="both">
<meta data-field="frame-shadow" content="lg">
</div><div class="rf-showcase" data-displace="both" data-frame-shadow="lg" data-rune="showcase" data-density="compact" style="--frame-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
| Attribute | Type | Required | Description |
|---|---|---|---|
shadow | "none" | "soft" | "hard" | "elevated" | — | Shadow style around the showcase content |
bleed | "none" | "top" | "bottom" | "both" | "end" | "bottom-end" | "top-end" | — | Direction content extends beyond its container |
offset | string | — | CSS offset from the container edge |
aspect | string | — | Aspect ratio of the showcase area |
place | "left" | "center" | "right" | "top" | "bottom" | "top left" | "top center" | "top right" | "bottom left" | "bottom center" | "bottom right" | — | Position of content within the showcase area |
Universal attributes
bg
The background layer (SPEC-088): image, video, gradient, flat overlay wash and legibility scrim, in a single injected layer behind the rune's content.
| Attribute | Type | Required | Description |
|---|---|---|---|
bg | string | — | Background preset applied to this block |
bg-from | string | — | Gradient start colour — a semantic token name (→ var(--rf-color-*)) |
bg-gradient | "to-t" | "to-b" | "to-l" | "to-r" | "to-tr" | "to-br" | "to-bl" | "to-tl" | — | Gradient direction (bounded named set) |
bg-gradient-type | "linear" | "radial" | "conic" | — | Gradient type |
bg-to | string | — | Gradient end colour — a semantic token name |
bg-via | string | — | Optional middle gradient stop — a semantic token name |
scrim | "top" | "bottom" | "left" | "right" | "none" | — | Scrim direction (heaviest edge); presence turns the scrim on, "none" opts out of the default cover scrim |
scrim-blur | "none" | "sm" | "md" | "lg" | — | Frost scrim blur amount |
scrim-strength | "sm" | "md" | "lg" | — | Gradient scrim strength |
scrim-tone | "dark" | "light" | — | Whether the scrim darkens (for light text) or lightens (for dark text) |
scrim-type | "gradient" | "frost" | — | Scrim treatment: gradient (default) or frost (backdrop blur) |
elevation
The chrome/depth ladder (SPEC-107). The skin maps each rung to a chrome bundle by attribute, so there is no BEM class.
| Attribute | Type | Required | Description |
|---|---|---|---|
elevation | "sunken" | "flush" | "flat" | "raised" | "floating" | "overlay" | "none" | "sm" | "md" | "lg" | — | Surface depth on the SPEC-107 ladder (sunken→overlay); none/sm/md/lg are deprecated aliases |
frame
Surface chrome (SPEC-086): a named preset from the theme registry with inline `frame-*` overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
frame | string | — | Named frame preset presenting this block's media surface |
frame-anchor | string | — | Crop focal point when the guest is cut (object-position) |
frame-aspect | string | — | Aspect ratio of the framed media, e.g. "16/9" |
frame-displace | "top" | "bottom" | "end" | "bottom-end" | "top-end" | "both" | — | Edge/corner the framed guest moves toward |
frame-displace-mode | "peek" | "bleed" | — | How displacement renders: `peek` (default) translates the guest visually inside its frame target; `bleed` uses negative margin on the media zone so following layout pulls up — extends past a section like a hero without leaving a gap above |
frame-offset | "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | — | Displacement distance (non-linear named scale: sm…xl ride the block-spacing tokens, 2xl/3xl/4xl step up to section-spacing for bleed-mode displacements that clear a section edge) |
frame-overflow | "clip" | "bleed" | — | How the frame handles a guest whose content is wider than it: `clip` (default) keeps it inside the rounded frame; `bleed` runs an overflowing guest out to the layout edge on a narrow viewport so it reads as cropped by the screen (a bleed host only — hero/feature) |
frame-oversize | string | — | How far the guest exceeds its slot (scale factor) |
frame-place | string | — | Guest-box alignment in the slot (e.g. "left top") |
frame-shadow | "none" | "sm" | "md" | "lg" | — | Silhouette drop-shadow strength for the framed media |
inset
Internal padding override.
| Attribute | Type | Required | Description |
|---|---|---|---|
inset | "flush" | "tight" | "default" | "loose" | "breathe" | — | Inner padding of this block |
motion
Scroll-reveal entrance (SPEC-105). The author declares the character, the theme owns the choreography, a behaviour owns the timing.
| Attribute | Type | Required | Description |
|---|---|---|---|
reveal | "none" | "fade" | "slide" | "scale" | "blur" | — | Scroll-reveal entrance character (none|fade|slide|scale|blur); the theme owns the choreography |
stagger | boolean | — | Cascade this block's items in as it reveals (no-op on single-child runes) |
spacing
Block-level rhythm override.
| Attribute | Type | Required | Description |
|---|---|---|---|
spacing | "flush" | "tight" | "default" | "loose" | "breathe" | — | Vertical spacing above and below this block |
substrate
Generated pattern fills (SPEC-087). Markers only — the engine sets the attributes and cell/opacity custom properties, CSS draws the pattern.
| Attribute | Type | Required | Description |
|---|---|---|---|
substrate | "dots" | "grid" | "lines" | "cross" | "checker" | "none" | — | Generated surface pattern |
substrate-fill | "inherit" | "inset" | — | Surface fill the pattern sits on (full colour stays with tint) |
substrate-opacity | "sm" | "md" | "lg" | — | Pattern ink strength |
substrate-size | "sm" | "md" | "lg" | — | Pattern cell size |
substrate-target | "self" | "media" | — | Which surface the pattern fills (overrides the rune/theme default) |
tint
Per-rune colour override (SPEC-053): a named tint from the theme registry, with inline per-token overrides layered on top.
| Attribute | Type | Required | Description |
|---|---|---|---|
tint | string | — | Color tint preset applied to this block |
tint-mode | "auto" | "dark" | "light" | — | Whether the tint adapts to auto, dark, or light mode |
width
The track a block rune occupies.
| Attribute | Type | Required | Description |
|---|---|---|---|
width | "compact" | "narrow" | "content" | "wide" | "full" | — | Maximum width constraint for this block |
| Not available | Why |
|---|---|
| dropcap, reading | this rune declares no prose body |
| prominence | this rune has no page-section header |
Deprecated aliases (emit a build warning): shadow → frame-shadow (soft/hard/elevated → sm/md/lg), bleed → frame-displace, offset → frame-offset (named scale; raw lengths warn), aspect → frame-aspect, place → frame-place.