Zigzag

Alternating text-and-visual rows that build a narrative, the same two-column block, flipped side to side as you scroll.

Example

Two rows of the same two-column block, with the text and visual sides swapped between them, the alternation that gives the pattern its name.

Targeting

Reach the right visitor

Audience rules that work across client- and server-side, with no code changes.

image

Analysis

Read results in real time

Significance and confidence intervals update as data arrives.

Composition

Each zigzag row pairs an eyebrow-led text column with a visual card, then flips their order on the next row:

Eyebrow, the .kicker label that names the theme of each row.
Visual placeholder: the portrait image stand-in that sits opposite the text on each row, replaced by a real product image in production.

Usage

The zigzag walks a visitor through a sequence of related ideas, one row at a time, with the alternating sides keeping the rhythm.

Flip the text and visual sides on each successive row, that alternation is the whole pattern.
Keep it to 2-4 rows, beyond that the rhythm turns into a wall.
One idea per row, the eyebrow names the theme, the heading states it, the body supports it.
Keep the visuals consistent, same card treatment on every row so only the content changes.

Code

Link placeholder.css, then lay each row out as a two-column grid, swapping the order of the text and portrait .placeholder columns on alternating rows.

<link rel="stylesheet" href="/_shared/components/placeholder.css">

<div class="zigzag__row">
  <div>
    <p class="kicker">Targeting</p>
    <h2>Reach the right visitor</h2>
    <p>Audience rules that work across client- and server-side.</p>
  </div>
  <div class="placeholder" style="aspect-ratio:4/5">
    <i class="ph ph-image" aria-hidden="true"></i> image
  </div>
</div>