MODULE — M01
Case plate
A wide shot with a cream caption card hanging over its lower edge — and lying flat beneath it wherever there is no room to hang over anything.
Shot and overhanging card
Ten weeks, one engineer, forty thousand drawings made in the first month.
<div class="case-plate" style="width:100%">
<div class="placeholder" style="--ratio:21/9">
<span class="placeholder-kicker">PLACEHOLDER</span>
<span class="placeholder-note">Hero shot — 21:9</span>
</div>
<div class="case-plate-card">
<span class="case-plate-kicker">CASE STUDY 01</span>
<span class="case-plate-title">A drawing tool that never leaves the keyboard</span>
<p class="case-plate-text">Ten weeks, one engineer, forty thousand drawings made in the first month.</p>
</div>
</div>The same markup, in a narrow container
Nothing changed here but the width of the box it sits in. Below 40rem the card gives up its indent and its overhang and settles under the picture.
Ten weeks, one engineer, forty thousand drawings made in the first month.
<div class="case-plate" style="width:100%">
<div class="placeholder" style="--ratio:21/9">
<span class="placeholder-kicker">PLACEHOLDER</span>
<span class="placeholder-note">Hero shot — 21:9</span>
</div>
<div class="case-plate-card">
<span class="case-plate-kicker">CASE STUDY 01</span>
<span class="case-plate-title">A drawing tool that never leaves the keyboard</span>
<p class="case-plate-text">Ten weeks, one engineer, forty thousand drawings made in the first month.</p>
</div>
</div>Reference
Read from modules/case-plate.css when this page was built, so it cannot fall behind the stylesheet.
.case-plate.case-plate-card.case-plate-kicker.case-plate-title.case-plate-text--plate-shadow — falls back to --ds-shadow-raised--ds-cream--ds-font-body--ds-font-display--ds-gap-loose--ds-ink-on-cream--ds-muted-on-cream--ds-pad-card--ds-plate-card-pad--ds-plate-card-w--ds-plate-indent--ds-plate-overhang--ds-radius--ds-text-caption--ds-text-h3--ds-text-label--ds-track-meta--ds-track-snug--ds-weight-displayNotes
The card is capped at --ds-plate-card-w and pushed in by --ds-plate-indent, so it stops leaving any picture beside it the moment the plate is narrower than the two together. Measured across plate widths from 320 to 900: the picture still visible beside the card is zero at every width up to 640px, while the overhang goes on eating a fixed 56px of it — which at a 320px plate is 54% of the whole image, with the caption behind it.
So the switch is not a taste and not a phone size. The card hangs only when it leaves at least as much picture on the right as it is inset from the left — card width plus indent plus indent, 520 + 56 + 56 = 632px, rounded to the 40rem in the stylesheet. Below it the slice reads as something left over rather than something composed: at 622px it is 46px wide and looks like an accident; at 702px it is 126px and looks deliberate.
It asks the container, never the window, so a plate dropped into a sidebar on a wide screen collapses correctly — which a media query could not do. It is one of only two literal lengths in the library, and both are accounted for by name in check-css; a query condition cannot resolve a var(), which is the only reason a number the tokens above already decide has to be spelled again in CSS.
Absolute positioning would take the card out of flow, and then the plate has no idea how tall it is — whatever came next would slide underneath the part that hangs over. With a margin the plate still measures correctly, and the collapse is then three declarations going back to their initial values rather than a second layout.
The indent is clamp(0px, 4vw, 56px), which keeps the card off the edge without a fixed offset pushing it past one. Below the threshold it is not clamped but dropped: an indent on a card that spans the whole plate is a margin on one side and nothing on the other.