Components · Data

Data & Cards

Where real data lives. Numbers stay Red Hat Mono and tabular; cards are flat hairline panels — the interactive variant adds the wing-wipe, never a shadow.

Cards

.across-card · .across-card--interactive

The container archetype. Resting cards are still; .across-card--interactive adds the wing-wipe and a 2.5% lift. Tint the accent with .across-card--track / --orbit / --relay.

Currency · live
0.9234
+0.0021 · +0.23%
USD → EUR14:42 UTC
Clocks · pinned
14:42
UTC+1 · Lisbon
Europe/Lisbon+1h

Weather

Clear in San Francisco — 62°F, feels like 60°. Static card, no hover affordance.

HTML
<div class="across-card across-card--interactive across-card--orbit">
  <div class="across-card__eyebrow"><span class="dot"></span> Currency · live</div>
  <div class="across-card__value">0.9234</div>
  <div class="across-card__delta across-card__delta--up">+0.23%</div>
</div>

Stat Grid

.across-statgrid · .across-stat

A hairline-separated row of key figures. Deltas use the semantic up/down colors — never the rebindable accent.

USD → EUR
0.9234
+0.23% 24h
GBP → USD
1.2710
−0.11% 24h
Pairs tracked
14
across 3 workspaces
Alerts
2
1 triggered
HTML
<div class="across-statgrid">
  <div class="across-stat">
    <div class="across-stat__label">USD → EUR</div>
    <div class="across-stat__value">0.9234</div>
    <div class="across-stat__foot"><span class="across-stat__delta across-stat__delta--up">+0.23%</span> 24h</div>
  </div>
</div>

Table

.across-tableSort, filter & select? See .across-data-table ↓

The ledger. Number columns are .num (right-aligned, tabular); --boxed frames it, --zebra stripes it. For sort/filter/select/paginate, wrap it in the full .across-data-table below.

PairNameRate24hStatus
USD → EUREuro0.9234+0.23%Live
GBP → USDUS Dollar1.2710−0.11%Live
BTC → USDBitcoin67,412.00−1.82%Volatile
HTML
<table class="across-table across-table--boxed across-table--zebra">
  <thead><tr><th>Pair</th><th class="num">Rate</th></tr></thead>
  <tbody>
    <tr><td>USD → EUR</td><td class="num">0.9234</td></tr>
  </tbody>
</table>

Data Table

.across-data-table · data-dtable

The working ledger: a .across-table wrapped in .across-data-table[data-dtable] for sort, scoped search, status filter, row selection, and density — all auto-wired by primitives.js straight from the markup (the rows live in HTML). Click a header to sort, type to filter, tick rows to select. The same surface drives the currency dashboard.

Tracked pairs 0 selected
Status
Pair Region Status Rate 24h
EUR / USDEurozoneLive1.0847+0.21%
GBP / USDUnited KingdomLive1.2693−0.08%
USD / JPYJapanLive157.42+0.44%
AUD / USDAustraliaPaused0.6612+0.12%
USD / CHFSwitzerlandLive0.8971−0.17%
USD / CADCanadaStale1.3702+0.03%
6 of 14 pairs · mid-market
HTML
<div class="across-data-table" data-dtable>
  <div class="across-data-table__bar">
    <span class="across-data-table__title">Tracked pairs</span>
    <span class="across-data-table__count" data-dt-count></span>
    <span class="across-data-table__bar-spacer"></span>
    <div class="across-data-table__search" data-dt-search>…<input>…</div>
    <div class="across-data-table__filter" data-dt-filter>…</div>
    <div class="across-data-table__density" data-dt-density>…</div>
  </div>
  <div class="across-data-table__scroll">
    <table class="across-table" data-dt-table>
      <thead><tr>
        <th class="across-data-table__checkcol"><input type="checkbox" data-dt-all></th>
        <th class="is-sortable" data-key="pair">Pair</th>
        <th class="num is-sortable" data-key="rate">Rate</th>
      </tr></thead>
      <tbody>
        <tr data-status="live">
          <td><input type="checkbox" class="across-data-table-check dt-row"></td>
          <td>EUR / USD</td>
          <td class="num" data-sort="1.0847">1.0847</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
<!-- sort / search / filter / select / density auto-wire from the markup -->

Sortable

.across-sortable · data-sortable

Drag rows to reorder — auto-wired by primitives.js, fires a reorder event. The handle is the drag affordance.

01USD → EUREuro
02GBP → USDUS Dollar
03JPY → USDUS Dollar
HTML
<div class="across-sortable" data-sortable>
  <div class="across-sortable__row">
    <span class="across-sortable__handle"><i class="ph-light ph-dots-six-vertical"></i></span>
    <span class="across-sortable__main"><span class="across-sortable__name">USD → EUR</span></span>
  </div>
</div>

Avatars

.across-avatar · .across-avatar-group

Tonal initials drawn from the brand wings, with presence rings and an overflow group. Sizes xs → xl. When a headshot is available, drop an <img class="across-avatar__img"> inside — it fills the shape, keeps the presence ring, and stacks in groups just like the initials.

DA KA RO JL EJ
DA KA RO +5
Dana Adeyemi Kai Alvarez Rosa Okafor Jun Lee Eli Jensen
Kai Alvarez Rosa Okafor DA +3
HTML
<!-- initials -->
<span class="across-avatar across-avatar--md across-avatar--orbit">KA</span>

<!-- headshot — drop in an img, it fills the shape -->
<span class="across-avatar across-avatar--md">
  <img class="across-avatar__img" src="/avatars/rosa.jpg" alt="Rosa Okafor">
</span>

<!-- headshot + presence ring -->
<span class="across-avatar across-avatar--md">
  <img class="across-avatar__img" src="/avatars/eli.jpg" alt="Eli Jensen">
  <span class="across-avatar__status across-avatar__status--online"></span>
</span>

<!-- photos and initials stack together in a group -->
<div class="across-avatar-group">
  <span class="across-avatar across-avatar--sm"><img class="across-avatar__img" src="/avatars/kai.jpg" alt="Kai"></span>
  <span class="across-avatar across-avatar--sm across-avatar--track">DA</span>
  <span class="across-avatar-group__more">+3</span>
</div>