Activity Rings Card
Activity
Today- Move1,592 kcal88% of goal
- Exercise1h 45m88% of goal
- Running5.2 km65% of goal
A card with concentric goal rings and a tile per ring with its value. Hovering a tile or a ring focuses the pair.
Block library / 22 live previews
Explore every block.
The whole collection in one place. No categories to open and no pages to step through—just scroll until something fits.
Start exploringAll blocks
22 / 22
- View docs
- View docs
Allocation Card
Portfolio allocation46%+3.4%vs prior periodEquities exposure: $4.7M6 members
KA share-of-total card with a period switcher, a big percentage with delta, a tick bar, and a footer stat with an avatar stack.
- View docs
Balance Chart Card
Current balance$24,847.83+12.7%Last 24 hoursToday's sales$1,249.00+8.0%High$25,900.08Low$20,850.42Change-0.062%A balance or price card with a big value, delta, stat row, and a line chart with reference line and peak marker.
- View docs
Breakdown Card
Gross volume$41,540+15.0%- Online payments$26,800
- Subscriptions$10,400
- In-store sales$4,340
A total with delta and a list of contributors, each with a value and a hatched bar showing its share.
- View docs
Contributions Card
Contributions this year977+14.8%vs last year- 9B
- Lifetime tokens
- 562.7M
- Peak tokens
- 12h 54m
- Longest task
- 62days
- Top streak
ActivityA contribution-graph card: a headline total with delta, a row of stat tiles, a period switcher, and a year of daily activity.
- View docs
Data Table Card
Top productsUnits sold and revenue, ranked.1–5 of 10
Page 1 of 2A card around a data table: title, description, toolbar, rows, and pagination in the footer.
- View docs
Distribution Card
Capital inflows$12.4M+$390K- WaveMark CapitalCapital in$7.93M
- Envato FinancesCapital in$3.21M
- QBridge TechCapital in$1.25M
A total with delta, a stacked share bar, and a ranked list of the contributors with their values.
- WaveMark Capital
- View docs
Dot Plot Card
TransactionsPeak: Wed106Kvs last period+34,002CustomersHighest: Thu1,284vs last period+320A metric card with a big value, a dot-plot distribution with its peak called out, and the change vs the previous period.
- View docs
Dual Metric Card
Leads overview5421.43%New leadsTop sourceLinkedIn198Returning leadsConversion rate12.8%A card with two metrics side by side, each with a value, share badge, meter, and a supporting fact.
- View docs
Funnel Chart Card
Sign-up funnel197+5.2%vs previous period100%56%39%19%Link opened197Started110Completed77Converted38A conversion card with a flow funnel: a headline value with delta, a range picker that carries its own steps, and a tile per stage. Hovering a stage swaps the headline.
- View docs
Goal Chart Card
Steps31,600total steps+12.0%vs last weekA card with a total, a period switcher, and a bar chart with a dashed goal line that colors the bars reaching it.
- View docs
Heatmap Chart Card
Active users8,327+8.2%vs previous 7 daysMonTueWedThuFriSatSun000204060810121416182022LessMoreA card with a headline total, a delta, an optional period switcher, and a matrix heatmap whose hovered cell swaps into the headline.
- View docs
Insight Card
InsightsA hero card with a badge, a very large number, a headline, and a paged set of insights over a soft gradient.
- View docs
KPI Row Card
Catalog healthSKU coverage, replenishment pressure, and aging stock in one pass.In stock8,420+5.4%RisingOut of stock1,245-12.0%Gaps easingPending restock640+3.1%MovingSlow movers1,105+0.6%Stable12,845 products tracked across categories. 76% currently available in stock.Show full analyticsA card with a period switcher, a row of KPI tiles with sparklines and deltas, and a footer summary.
- View docs
Metric Tabs Chart Card
A row of metric tabs, each with a value and delta, above a line chart of the selected metric against the previous period. Click a tab to switch the chart.
- View docs
Period Bar Chart Card
Spending$10,420.00+126.7%Mar spending vs FebA card with a total for the selected period, a range switcher, and a bar chart that highlights that period. Click a bar to select its period.
- View docs
Progress Card
Compliance checks16/24 checks passing67% assignedA compact progress card with an icon title, a pill tick bar, and a count with a secondary stat.
- View docs
Ring KPI Card
API response time132 msdown from 148 msError rate1.4 %up from 0.9 %Request throughput4.3K req/sup from 3.9K req/sA card with a row of KPI tiles, each with a segmented ring next to the value and a comparison to the previous value.
- View docs
Score Gauge Card
Sleep scoreExcellent29 Jun - 5 Jul98- Duration: 7h 50m49/50
- Bedtime: 11:12 PM29/30
- Interruptions: 2 times20/20
A score card with a headline word, a radial gauge around the score, and a breakdown list of labelled bars.
- View docs
Stage Bars Card
Pipeline1,180+2.4%vs previous periodVisits1,180100%Sign-up79067%Active46039%Pro25021%Team12010%Enterprise403%Visits1,180Sign-up790Active460Pro250Team120Enterprise40The funnel as a list: a rounded bar per stage with its name, value, and share of the first stage, a range picker, and a tile per stage.
- View docs
Status Gauge Card
A status card with a headline word, a metric, an avatar stack, and a segmented semicircular gauge.
- View docs
Tick KPI Card
Open invoices512of 691Stock replenished7,420of 12,300 unitsBudget utilized103Kof 2.6MA card with a row of KPI tiles, each with a value out of a whole and a tick bar showing how far along it is.
Found the right shape? Every block is copied into your project as source.
Get started