Cards

When you need to draw a box around related content, reach for a card. Public pages and internal tools each have their own color variations but the use cases are shared. The markup is the same on both surfaces; the internal colours come from .ds-internal on a parent element and nothing else changes.

Contents

Basic cards

Public card

A flexible and unopinionated white surface with a hairline border and 8px radius.

submit/5720431

Spectral gaps in random regular hypergraphs. Submitted 2026-09-18 to math.CO, awaiting moderation.

Relevant code 
<div class="ds-card">
  <h3>submit/5720431</h3>
  <p>Spectral gaps in random regular hypergraphs. Submitted 2026-09-18 to math.CO, awaiting moderation.</p>
</div>
.ds-card
The box: white surface, hairline --ds-border, 8px radius, padding from the scale. Its first and last children carry no outer margin, because the padding is the space at the edges. It sets position: relative, so a margin note or an anchored pill measures from it.

Internal card

The same markup inside .ds-internal. The basic card has no accent of its own, so it looks the same on both surfaces; what changes is everything inside it that reaches for the accent, such as the button.

submit/5720431

Spectral gaps in random regular hypergraphs. Submitted 2026-09-18 to math.CO, awaiting moderation.

Relevant code 
<body class="ds-page ds-internal">
  …
  <div class="ds-card">
    <h3>submit/5720431</h3>
    <p>Spectral gaps in random regular hypergraphs. Submitted 2026-09-18 to math.CO, awaiting moderation.</p>
    <div class="ds-btn-group"><button type="button" class="ds-btn ds-btn-primary">Approve</button><button type="button" class="ds-btn">Hold</button></div>
  </div>
.ds-internal
On a parent, usually <html> or <body>. Re-points the accent to Access Lime for everything inside. Nothing on the card itself changes.

Data cards

Intended for organizing metadata and other reference information: the facts about one record, each pair stacking a label over a value. Cards read correctly against both white or a warm-wash page background.

Public data card

arXiv ID
2311.04082
Submitted
2023-11-07
Subjects
cond-mat.soft
Licence
CC BY 4.0
Relevant code 
  <section class="ds-card ds-card--data" aria-label="Paper information">
  <dl>
    <div><dt>arXiv ID</dt><dd><a href="#">2311.04082</a></dd></div>
    <div><dt>Submitted</dt><dd>2023-11-07</dd></div>
    <div><dt>Subjects</dt><dd>cond-mat.soft</dd></div>
    <div><dt>Licence</dt><dd><a href="#">CC BY 4.0</a></dd></div>
  </dl>
</section>
.ds-card.ds-card--data
On a <section> with an aria-label, which makes it a named region. A tinted ground (--ds-surface-muted) and a 4px top edge in the accent, so it reads as reference rather than content. No padding of its own: the pairs carry it.
dl > div
One pair per <div>, <dt> label then <dd> value. Pairs sit side by side when the card is wide enough for two and stack in one column when it is not; a hairline separates them in both directions.
dt, dd
The label is small, condensed and uppercased by CSS: type it in sentence case. The value is in IBM Plex Mono and wraps anywhere, so a long address or identifier stays inside the card. A value that goes somewhere is an <a href> and takes the ordinary link colours.
  • Read-only only. Never place editable fields inside a data card. The filled surface signals “this is system context, not something you control here.”
  • Editable content uses the basic card. When a group of editable fields needs a boundary, use a plain .ds-card, a white panel with a hairline and an 8px radius, and not a data card. Keeping the two visually distinct is deliberate: a filled surface reads as read-only system context; a plain bordered panel reads as “you can edit this.”
  • Sidebar placement. A data card sets no width of its own; the sidebar it sits in does. The contrast between the card and the warm-wash page background creates the visual hierarchy.
  • Links in the card. A value that navigates to a related record (user profile, submission detail) is a link. Limit links to navigational items and do not use them for inline actions.
  • Monospace IDs. Every value renders in IBM Plex Mono (“monospace signals read-only system data”), so an arXiv ID needs no override.
  • Row count. 2–6 pairs is the intended range. If more fields are needed, consider grouping into two separate cards rather than a very tall single card.

Internal data card

Remote host
128.84.12.201
Date
2024-12-31
Relevant code 
<body class="ds-page ds-internal">
  …
  <section class="ds-card ds-card--data" aria-label="User information">
  <dl>
    <div><dt>User</dt><dd><a href="#">Katrin Solberg</a></dd></div>
    <div><dt>Email</dt><dd><a href="#">katrin.solberg@example.org</a></dd></div>
    <div><dt>Remote host</dt><dd>128.84.12.201</dd></div>
    <div><dt>Date</dt><dd>2024-12-31</dd></div>
  </dl>
</section>
.ds-internal
The top edge takes Access Lime. The markup is the public one.

Groups of cards

Peers in a set share one grid. The count of columns does not follow a breakpoint but adjusts to the content. The grid will drop to one column when a card can no longer hold its minimum width.

2311.04082

Anomalous diffusion in confined active matter. Published 2023-11-07, cond-mat.soft.

2409.11873

A note on the endpoint Strichartz estimate. Published 2024-09-19, math.AP.

2506.02210

Calibrating photometric redshifts with sparse spectroscopy. Published 2025-06-03, astro-ph.CO.

Relevant code 
<div class="ds-card-grid">
  <div class="ds-card">
    <h3>2311.04082</h3>
    <p>Anomalous diffusion in confined active matter. Published 2023-11-07, cond-mat.soft.</p>
  </div>
  <div class="ds-card">…</div>
  <div class="ds-card">…</div>
</div>
.ds-card-grid
Cards side by side. The grid supplies the gap, so a card inside it takes no top margin of its own. Any card goes in it, a data card included, and it is the same on both surfaces.
Submitter
Anne-Marie George
arXiv ID
2311.04082
Submitted
2023-11-07
Status
Pending review
Relevant code 
<div class="ds-card-grid">
  <section class="ds-card ds-card--data" aria-label="User information">…</section>
  <section class="ds-card ds-card--data" aria-label="Submission information">…</section>
</div>
.ds-card-grid
The same grid, holding two data cards on the internal surface.

Accessibility essentials