Components

Checkers

Story grid: .wckd-checkers on .columns.count-1; each row is a .column with .group (copy) and .media (visual). CSS flips image side on even rows.

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

Checkerboard rows

Wrap rows in .wckd-checkers with .columns.count-1. Each row is a .column with a .group for copy and a .media wrapper for the visual. Pair with layout utilities such as .round and .center as needed.

Text column

Pairs of rows flip image side on even .column.

Abstract landscape sample for the first checker row

Second row

Even row: image column leads (left in LTR), copy on the right.

Abstract landscape sample for the second checker row

Markup

<div class="wckd-checkers columns count-1 round center padded">
  <div class="column">
    <div class="group">
      <h3>Heading</h3>
      <p>Supporting copy.</p>
    </div>
    <div class="media">
      <img src="/path/image.jpg" width="800" height="480" alt="Description" />
    </div>
  </div>
  <div class="column">
    <div class="group">
      <h3>Next row</h3>
      <p>Layout alternates automatically.</p>
    </div>
    <div class="media">
      <img src="/path/image-2.jpg" width="800" height="480" alt="" />
    </div>
  </div>
</div>

When to use

  • Use for long-form product or brand stories where imagery and copy alternate rhythmically.
  • Use when you want a bento-adjacent layout without asymmetric grid math.

Implementation notes

  • The text cell must use .group and the media wrapper .media so named grid areas align with .wckd-checkers rules in wckd-ui-components.css.
  • Below 768px width, rows stack as text then image for every row.
  • Add more .column siblings for extra rows; odd and even children keep alternating image side on wide viewports.

Developer checklist

  • Keep one .group and one .media per .column for predictable grid placement.
  • Use real alt text on images when they convey meaning; empty alt is acceptable for decorative photos only.
  • Combine with .columns.count-1 so each checker row spans the full width of the checker container.

← All components