Components

Checkers

Alternating text and image rows on a checkerboard grid, good for story sections with a strong visual rhythm. Odd rows place the image on the right; even rows flip it.

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

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.

Second row

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

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