Components

Showcase Row

Portfolio-style rows where each column grows on hover or focus on wide screens and stacks cleanly on small ones. Implemented as .wckd-showcase on the usual Grid.

Jump to:

Download & setup

Download WCKD UI Style guide

Start with the package download and setup steps in Get Started, then use the style guide for utility and token references while implementing 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

Start from the default implementation, then apply one of these intent-driven variations based on your content and interaction goals.

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