Skip to content

MODULE — M02

Triptych

Three portrait shots in a row, each with a caption of its own beneath it.

Three panels

PLACEHOLDER4:5
01

The picture reaches the hairline on three sides.

PLACEHOLDER4:5
02

The caption keeps its own padding and its own rule.

PLACEHOLDER4:5
03

Alternate the warm tint so three cool panels do not run together.

HTML
<div class="hairline-grid" style="--cell:200px; width:100%">
  <div class="hairline-cell hairline-cell-flush triptych-panel">
    <div class="placeholder" style="--ratio:4/5">
      <span class="placeholder-kicker">PLACEHOLDER</span><span class="placeholder-note">4:5</span>
    </div>
    <div class="triptych-caption">
      <span class="triptych-index">01</span>
      <p class="triptych-text">The picture reaches the hairline on three sides.</p>
    </div>
  </div>
  <div class="hairline-cell hairline-cell-flush triptych-panel">
    <div class="placeholder placeholder-warm" style="--ratio:4/5">
      <span class="placeholder-kicker">PLACEHOLDER</span><span class="placeholder-note">4:5</span>
    </div>
    <div class="triptych-caption">
      <span class="triptych-index">02</span>
      <p class="triptych-text">The caption keeps its own padding and its own rule.</p>
    </div>
  </div>
  <div class="hairline-cell hairline-cell-flush triptych-panel">
    <div class="placeholder" style="--ratio:4/5">
      <span class="placeholder-kicker">PLACEHOLDER</span><span class="placeholder-note">4:5</span>
    </div>
    <div class="triptych-caption">
      <span class="triptych-index">03</span>
      <p class="triptych-text">Alternate the warm tint so three cool panels do not run together.</p>
    </div>
  </div>
</div>

Reference

Read from modules/triptych.css when this page was built, so it cannot fall behind the stylesheet.

CLASSES.triptych-panel.placeholder.triptych-caption.triptych-index.triptych-text
READS--ds-accent--ds-font-body--ds-font-display--ds-gap-loose--ds-gap-tight--ds-hairline--ds-ink-soft--ds-pad-card--ds-rule--ds-text-caption--ds-text-label--ds-track-meta

Notes

FLUSH CELLS, AND ONE HAIRLINE ONLY

Each panel is a .hairline-cell-flush, so the picture reaches the hairline on three sides and the caption carries its own padding and top rule. A padded cell would inset the picture, and three inset pictures in a row of hairlines look like a mistake.

The placeholder inside drops its own border, because the cell already draws one. Two hairlines meeting is a two-pixel line, which is the one thing this design never has.