Section and figure

How

<sdc-section> supplies vertical rhythm; <sdc-layout-container> supplies the measure and gutters. tone=“alt” shifts the ground to the card surface, tone=“ink” inverts it.

When

Every band of content on a page. Alternate the tone only to separate ideas, not for variety.

Where

All pages except the pinned decks, which manage their own stage.

In code

src/components/ui/CaseSection.astro for the band, CaseFigure.astro for the image inside it.

---
import CaseSection from '../../components/ui/CaseSection.astro';
import CaseBlock from '../../components/ui/CaseBlock.astro';
import CaseFigure from '../../components/ui/CaseFigure.astro';
---
<CaseSection alt>
  <CaseBlock eyebrow="What I led" lede="Two tools, one pipeline." />
</CaseSection>

<CaseSection figure flush inner={false}>
  <CaseFigure src="/images/example.webp" alt="..." width={2400} height={971} loading="lazy" />
</CaseSection>

Prop	Type	Default	What it does
tone	'alt' | 'ink'	unset	Darker surface or inverted band. Alternate alt, never two in a row.
figure	boolean	false	A full bleed figure band.
flush	boolean	false	No top padding, so the band sits tight against the one above.
id	string	none	Anchor target for a link that jumps here.
layout	'prose' | 'pager' | 'orbit' | 'bare' | false	'prose'	What the container lays out, or false for a band with no container at all.
width	'narrow'	unset	A narrower measure, for pure reading.
labelledby	string	unset	Id of the band’s heading. Makes the band a named region landmark, since a custom tag has no role of its own.
animate	boolean	true	Fades in on scroll. Turn it off for a band that must be readable immediately.

The case study styles live under .sdc-case, which Site.astro puts on <main> when a page passes variant="case". A case study page that forgets that prop renders unstyled, which is the loud failure rather than the quiet one.

Measure

Body copy is capped near 800px, not the full 1280px page width. A line of text longer than about 75 characters is measurably harder to track back from. Use width="narrow" on the container where the content is pure reading.

Figures

A case study figure sits between the deck and the stats, at full width of the measure. It used to sit at 75 percent and below the stats; both were changed because the image is evidence for the claim above it and belongs next to it.

Figure art is evidence, so it gets real alt text. Every one of the seven case study figures on the site carries a description and none is empty, because a figure in a case study is there to show something the prose claimed. See Case study figure, which is the authority on this, and write the alt even when a caption follows: a caption is read by everyone and says something different.

alt="" is for art that carries nothing, such as a background texture or the decorative quote mark on a recommendation card. If you cannot say what an image is evidence of, that is usually a sign it should not be on the page.

Captions

.sdc-cs-note and .wk-note are captions: 14px, muted, no rule, no accent bar. They are for a qualification, a disclosure or a credit. The PayPal proprietary disclosure is a caption.

A caption is not a pull quote. .sdc-cs-quote is the display-type treatment for a sentence worth stopping on. Using the caption style for emphasis makes a disclosure look like a design flourish.

Do

• Keep reading columns near the narrow measure.
• Put the figure directly under the claim it supports.
• Use a caption for disclosures and credits.

Don’t

• Alternate section tone for visual variety.
• Write alt text that repeats the caption.
• Use the caption style to emphasise a sentence.

Checks before you ship

1. No line of body copy runs much past 75 characters at 1440 wide.
2. Every new image has either empty alt text or a reason for its description.
3. Tone alternation marks a change of idea, not decoration.