PairList

When to use

To surface a short top-N ranked list of paired items (e.g. “best contrasts”, “most uncertain examples”). Each row links optionally to a detail page or anchor. Best for 3–8 rows.

Example

import PairList from '../../components/widgets/PairList.astro';

<PairList
  heading="Top contrasts"
  pairs={[
    { rank: "1", label: "happy vs sad",  spread: "0.42", href: "#c1" },
    { rank: "2", label: "fast vs slow",  spread: "0.31", href: "#c2" },
    { rank: "3", label: "near vs far",   spread: "0.19" },
  ]}
/>

Props

Prop	Type	Required	Notes
heading	string	yes	Section label rendered at the top of the list.
pairs	Pair[]	yes	Array of { rank, label, spread, href? }.

Pair shape:

Field	Type	Required	Notes
rank	string	yes	Display rank (often “1”, “2”, … but any short string).
label	string	yes	Item label or description.
spread	string	yes	Right-aligned metric (string so it can include units).
href	string	no	Anchor or page link. Falls back to #.

When not to use

• For unordered taxonomies. Use a <ul>.
• For long lists (> 10). Use a proper table.
• For navigation menus. Use the site header.