Card

Container for related content. The .card.stat variant is purpose-built for metric display.

Preview · Card

Code

HTML · @primus/ui-core

<div class="vstack" style="max-width:480px">
  <div class="card">
    <h3 style="margin:0 0 0.5rem">Revenue Overview</h3>
    <p style="margin:0;color:var(--muted-foreground);font-size:0.875rem">Monthly metrics at a glance.</p>
  </div>
  <div class="hstack" style="flex-wrap:wrap">
    <div class="card stat" style="flex:1;min-width:140px">
      <span class="card-label">Monthly Revenue</span>
      <span class="card-value">$142,000</span>
      <span class="card-delta up">+12% vs last month</span>
    </div>
    <div class="card stat" style="flex:1;min-width:140px">
      <span class="card-label">Churn Rate</span>
      <span class="card-value">2.1%</span>
      <span class="card-delta down">+0.4% this month</span>
    </div>
  </div>
</div>

React

import { Card, PrimusStatCard } from 'primus-react-ui';

<Card variant="default" padding="md">
  <h3>Revenue Overview</h3>
  <p>Monthly metrics at a glance.</p>
</Card>

<PrimusStatCard title="Monthly Revenue" value="$142,000"
  change={{ value: 12, type: 'increase' }} description="vs last month" />

Angular

<primus-card variant="default" padding="md">
  <h3>Revenue Overview</h3>
  <p>Monthly metrics at a glance.</p>
</primus-card>

<primus-stats-card label="Monthly Revenue" [value]="'$142,000'"
  delta="+12%" trend="up" description="vs last month">
</primus-stats-card>

Props

Prop	Type	Default	Description
variant	default | outlined | elevated	default	Visual style
padding	none | sm | md | lg	md	Padding size

Version history

See the Changelog for version history and breaking changes.