Cards — arXiv Design System

Contents

Basic cards

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

Public

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 have 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

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. 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.

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 on both the Canvas and the Warm Tint.

Public

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-tint-warm) and a 4px top edge in the accent, so it reads as reference rather than content. No padding of its own: the pairs have 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 tinted card and the Canvas 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

User: Katrin Solberg
Email: katrin.solberg@example.org
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.

Stat cards

One number with its label, on the warm tint. Use a group of them for a summary at the top of a dashboard.

Member institutions

1,284

12 more than last month

Submissions this month

2,391

From member institutions

Downloads this month

4.2M

Relevant code

<div class="ds-card ds-card--stat">
  <p class="ds-panel-label">Member institutions</p>
  <p class="ds-stat-value">1,284</p>
  <p class="ds-stat-context">12 more than last month</p>
</div>

.ds-card--stat: A card that holds one number. Warm tint, the same on both surfaces. In a .ds-card-grid, stat cards are narrower than other cards and fill the row.
.ds-panel-label: What the number counts. It comes first, so a screen reader reads the label before the number.
.ds-stat-value: The number: 2rem, weight 600, with tabular figures so numbers in a row of cards line up.
.ds-stat-context: Optional. One short line under the number, such as a change or a unit.

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.

Cards that link

A card that is one link, for a page whose job is to send the reader somewhere else: the whole card opens the page its heading names.

<div class="ds-card-grid">
  <div class="ds-card ds-card--link">
    <h3><a href="#">Computer Science</a></h3>
    <p>40 categories</p>
  </div>
  <div class="ds-card ds-card--link">
    <h3><a href="#">Economics</a></h3>
    <p>3 categories</p>
  </div>
  <div class="ds-card ds-card--link">
    <span class="ds-tag ds-tag--warning">Needs attention</span>
    <h3><a href="#">Quantitative Finance</a></h3>
    <p>9 categories</p>
  </div>
</div>

.ds-card--link: The heading's link covers the whole card, so the card is one target and one tab stop. Hover and keyboard focus mark the whole card.
The heading's <a>: The only link in the card. A second link or a button inside it cannot be reached by pointer, because the heading's link lies over it.
.ds-tag--warning: A card that needs attention says so on the card itself. A tag placed first in the card sits in its top corner, beside the heading, so the rest of the card lines up with its neighbours. See Tags.

Data list

A few short details as label and value pairs, each label beside its value, without a card: for example under an item in a list. Inside an accordion, a plain <dl> already lays out pairs.

Comments: 18 pages, 6 figures
DOI: 10.1016/j.ascom.2026.101198
arXiv ID: 2609.36857

Relevant code

<dl class="ds-data-list">
  <div><dt>Comments</dt><dd>18 pages, 6 figures</dd></div>
  <div><dt>DOI</dt><dd><a href="#">10.1016/j.ascom.2026.101198</a></dd></div>
  <div><dt>arXiv ID</dt><dd><a href="#">2609.36857</a></dd></div>
</dl>

.ds-data-list: A <dl>, one <div> per pair, in smaller type. A label never wraps; a long value does.

Accessibility essentials

Name a data card. It is a <section> with an aria-label such as “User information”, so a screen reader user can jump straight to it and hears what it holds. A section without a name is not exposed as a landmark at all.
Keep each label with its value. A label and its value sit together in one <div>, <dt> first, so they are read as a pair. The label is real text in the markup and the uppercase comes from CSS, so it stays correct for a screen reader and for copy and paste.
Values are text. An identifier, an address or a date in a data card is plain text: it can be selected, copied, found with in-page search and read aloud. Do not put a value in an image or draw it with CSS.
No editable fields inside a data card. Its tinted surface says read-only. A form control inside it contradicts what the surface tells a sighted reader and puts a focus stop inside a region that announces as reference. Editable fields take a basic .ds-card.