Case block

How

An <sdc-case-block> holding a p.sdc-eyebrow kicker, an h2.sdc-case-block__lede heading and body paragraphs. The three sit on line height alone with no margins between them.

When

For each step of the argument in a case study: what was unclear, what was done, who was involved, what changed. One block, one step.

Where

Case study pages and the design systems page, one per section, inside its prose container.

In code

src/components/ui/CaseBlock.astro. The paragraphs go in the slot.

---
import CaseBlock from '../../components/ui/CaseBlock.astro';
---
<CaseBlock eyebrow="What was unclear" lede="PayPal showed up differently at every checkout.">
  <p>Each merchant integration carried its own patterns.</p>
</CaseBlock>

Prop	Type	Default	What it does
sdc-eyebrow	string	required	The small label above the claim.
lede	string	none	The one line claim. Becomes the h2. Omit it for a block that is body copy only.

The eyebrow is rendered by Eyebrow.astro, so it cannot drift from the eyebrow anywhere else.

The spacing rule

The kicker, the heading and the first paragraph carry no margin between them, so they read as one object. The space between blocks is what separates ideas.

This was wrong for a while and looked it. A rule matching “paragraph following a paragraph” was adding space above the heading and the first line of body, splitting each block into three floating pieces. The gap between blocks was then reduced by a quarter to compensate for how loose everything looked. If you are adjusting spacing here, adjust the space between blocks, never inside one.

The heading is a real heading

.sdc-case-block__lede is an h2. It used to be a styled paragraph, which meant a screen reader user navigating a case study by heading found exactly one stop: the page title. Seven pages had a single heading each.

It is styled by class, not by tag, so making it a real h2 changed the document outline and not a single pixel.

Content

Kicker is two to four words naming the step: “What was unclear”, “What I led”, “What changed”. It is not a section number and not a label like “Overview”.

Heading is the claim of the section in one line. It should be arguable, not descriptive: “A whole brand online, reduced to recipes” rather than “Background”.

Body is one to three sentences. Two paragraphs maximum. A block that needs more is two blocks.

Do

• Keep the heading arguable, not a label.
• Split a long block into two.
• Leave the internal spacing alone.

Don’t

• Use a paragraph where the heading belongs.
• Add margin between kicker, heading and body.
• Number the sections.

Checks before you ship

1. The page outline shows one h1 and an h2 per section.
2. Kicker, heading and body read as one group with clear space between blocks.
3. No block runs past two paragraphs.