Meta row

How

A description list. The key is 11px uppercase at weight 800 in muted charcoal, followed by a pipe, then the value. On cards the class is .sdc-card__meta; in a case study hero it is .sdc-meta-row.

When

For two to three facts that frame a piece of work: what it was, who it was for, what it was trying to do. Not for a list of features, and not for prose.

Where

Under the text on a case study card, and under the deck in a case study hero.

In code

src/components/ui/MetaRow.astro, which CaseHero already renders from its own meta prop. Call it directly only outside a hero.

---
import MetaRow from '../../components/ui/MetaRow.astro';
---
<MetaRow
  items={[
    { term: 'Role', value: 'Principal Designer &middot; PayPal' },
    { term: 'Team', value: 'Merchant Enablement' },
  ]}
/>

items is an array of { term, value }. Two or three pairs. Four wraps badly on a phone. It renders a description list, so each label stays tied to its value rather than only sitting above it.

Prop	Type	Default	What it does
items	{ term: string; value: string }[]	required	The pairs, in reading order. Two or three; four wraps badly on a phone. value may carry inline HTML.

The pipe

A pipe separates key from value. It is a CSS pseudo-element with empty alternative text, so it is drawn but never spoken. A screen reader hears “Product, Figma plugin, PayPal”, not “Product pipe Figma plugin”.

On phones the pair stacks, key above value, and the pipe is removed. A separator between two things on one line is a separator; the same character at the end of a line is a stray mark.

The labels

On cards: Product and Objective.

In a case study hero: Role, Org and Recognition, or Role, Team and Scope depending on the case.

These are deliberate. “Client” and “Service” were the original labels and were replaced: they describe an agency relationship, and they invite a reader to sort work by who paid rather than by what it did.

Content

Values are fragments, not sentences. No trailing full stop. Six words is long.

“One tap in each merchant’s own checkout” is at the limit. “Faster merchant flow setup” is right.

Do

• Use two pairs on a card, three in a hero.
• Keep values to a short fragment.
• Leave the pipe to CSS.

Don’t

• Type a pipe character into the content.
• Write a sentence in a value.
• Reintroduce Client or Service as labels.

Checks before you ship

1. At 390px wide the key sits above the value and no pipe is visible.
2. A screen reader reads key then value with no punctuation between.
3. No value wraps past two lines on a card.