Data display

Surfaces

stat card, lift card, status ticket, empty state, list rows and an avatar stack.

new

Examples

Stat card

sparkline draws on hover

Active users2,418▲ 12.4%

<div class="pt-stat">
  <small>Active users</small>
  <strong>2,418</strong>
  <em>▲ 12.4%</em>
  <svg viewBox="0 0 120 44" preserveAspectRatio="none">
    <path d="M0 38 L20 30 L40 34 L60 18 L80 24 L100 8 L120 12" />
  </svg>
</div>

Lift card

hard shadow, arrow runs

Launch plan

Four steps, two owners.

Open

<div class="pt-lcard">
  <h4>Launch plan</h4>
  <p>Four steps, two owners.</p>
  <span class="pt-go">Open</span>
</div>

Status ticket

light circles the border

Request sent

Waiting for approval

<div class="pt-tkt">
  <p>Request sent</p>
  <strong>Waiting for approval</strong>
</div>

Empty state

plus turns on hover

Nothing here yet. Add the first one.

<div class="pt-empty">
  <svg viewBox="0 0 24 24">
    <path d="M12 5v14M5 12h14" />
  </svg>
  <p>Nothing here yet. Add the first one.</p>
</div>

List rows

bar and indent on hover

Report v3Done

Launch planActive

Team AlphaDraft

<div class="pt-rows">
  <div>Report v3<span>Done</span></div>
  <div>Launch plan<span>Active</span></div>
  <div>Team Alpha<span>Draft</span></div>
</div>

Avatar stack

fan out on hover

ALBKCM+4

<div class="pt-avs">
  <i>AL</i>
  <i>BK</i>
  <i>CM</i>
  <i>+4</i>
</div>