Pager

How

A dark anchor 42px tall with the destination as its visible text and a chevron in a tinted end cap. .sdc-pager points forward with the cap on the right; .sdc-pager.sdc-pager--prev points back with the cap on the left.

When

To move between case studies in a fixed reading order. Not for general navigation, and not for links that open an artifact or leave the site.

Where

The foot of every case study page and the design systems page, always as a pair inside the pager container. Never in the header, never mid-page, never alone.

In code

src/components/ui/Pager.astro, and PagerPair.astro which owns the whole closing band so a page cannot put it in the wrong place.

---
import PagerPair from '../../components/ui/PagerPair.astro';
---
<PagerPair
  prev={{ href: '/work/plate', label: 'Plate', prefix: 'Previous case study: ' }}
  next={{ href: '/work/alt-meat', label: 'Alt-Meat', prefix: 'Next case study: ' }}
/>

Each link takes href, label and prefix. label is the visible text and stays the visible text. prefix is read before it, which is how the direction reaches a screen reader without an aria-label replacing what is on screen.

Pager on its own takes direction of prev or next, which picks the chevron and the side it sits on. Use PagerPair unless you have a reason not to.

PagerPair props:

Prop	Type	Default	What it does
prev	{ href, label, prefix? }	required	The link on the left. prefix is read before the label by a screen reader.
next	{ href, label, prefix? }	required	The link on the right.

Pager props, for the rare page that places one on its own:

Prop	Type	Default	What it does
direction	'prev' | 'next'	required	Which way the chevron points, and which side it sits on.
href	string	required	Where it goes.
label	string	required	The visible text.
prefix	string	unset	Read before the visible text by a screen reader. Renamed from hidden, which collided with the HTML attribute.

Anatomy

The visible text is the destination name only: “Plate”, not “Next: Plate”. The arrow carries the direction, so repeating it in words is noise for people who can see it.

For people who cannot, the direction is supplied as screen-reader-only text inside the link: hidden text reading “Next case study: “ sits before the destination, so the link announces as “Next case study: Plate” while showing “Plate”.

That distinction matters and was got wrong once. The direction was originally an aria-label on the link, which replaces the visible text rather than adding to it. An audit flagged it, correctly: a person using voice control who says “click Plate” must be able to activate what they can read. Hidden text extends the name; a label replaces it. Only one of those is safe.

States

Rest is charcoal with paper-coloured text. Hover inverts to the slate accent with white text. The end cap is a translucent panel over the button fill, so it shifts with the button rather than being its own colour.

In Windows High Contrast Mode the fill and cap are forced to system colours and the cap becomes a border, since a background-painted divider disappears there.

Responsive behaviour

On phones the pair stays on one row. Each pager takes half the width, grows taller as needed, and wraps its own label across two lines rather than dropping the pair into a stack. Minimum height on phones is 44px.

Content

The destination name, exactly as that case study is titled elsewhere. Shorten a long title rather than letting it wrap three times: “Becoming the Default at Checkout” is “Default at checkout” on the pager.

The last case study in the chain points back to the index instead, labelled “Back to all work”.

Do

• Ship them in pairs, previous on the left.
• Put direction in hidden text inside the link.
• Match the destination’s own title.

Don’t

• Add an aria-label that replaces the visible text.
• Write the direction in visible text next to the arrow.
• Use a pager to open a lab, a PDF or an external site.

Checks before you ship

1. The visible text is a destination name with no “Next” or “Previous” in it.
2. A screen reader announces the direction before the name.
3. At 390px wide, both pagers sit on one row and no label is cut off.
4. The pair reads previous on the left, next on the right.