Components

Showcase Row

Grid row: .wckd-showcase on .columns; inactive columns shrink on wide viewports, hover/focus expands one cell; narrow viewports stack full width.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Three-column showcase

On wide viewports, inactive columns shrink width slightly; the hovered column expands. Narrow viewports stack columns at full width.

A
B
C

Markup

<div class="wckd-showcase columns count-3">
  <div class="column height-50 fill-dark">A</div>
  <div class="column height-50 fill-fade">B</div>
  <div class="column height-50 fill">C</div>
</div>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Core behaviour

One supported interaction model: hover/focus expansion on desktop, stacked layout on mobile, no alternate motion variants in the kit.

Markup

<div class="wckd-showcase columns count-3 padded rounded">
  <div class="column height-50 fill-dark">A</div>
  <div class="column height-50 fill-fade">B</div>
  <div class="column height-50 fill">C</div>
</div>

When to use

  • Use this pattern when you need side-by-side story lanes that invite exploration.
  • Use concise headings and one CTA per lane so expansion states stay readable.
  • Keep this near the top of landing content where hover intent is strongest.

Implementation notes

  • Current script initialises the first .columns.wckd-showcase on the page.
  • Hover expansion is desktop-first; mobile stacks naturally below breakpoint.
  • Keep per-column content lightweight to reduce layout reflow during hover changes.

Developer checklist

  • Use .wckd-showcase.columns with at least two direct .column children.
  • Treat this as a single-instance enhanced module unless script scope is expanded.
  • Verify hover affordances and CTA click targets after adding background media.

← All components