Count Card
A count card displays a count or key metric with an icon and label, for dashboards and summary views.
Overview
A count card highlights a single number or metric alongside an icon and a short label, so people can scan key figures at a glance. It’s built for dashboards and summary views, where several count cards sit side by side to summarize the state of a system.
Count cards can carry supporting details, such as a trend badge, a progress meter, or a sparkline, and a card-level action menu.
Usage
forge-count-card is built from named slots (icon, label, header-end, action, count, count-end, body, and full-width) plus theme to apply semantic color and no-border to remove the border. Every slot is optional, but include at least an icon and a count, and use the same slots across the cards on a page so they stay aligned in a grid. Put a forge-icon-button in action, not header-end, so its 48px touch target aligns correctly. Use a count card for a single metric; for a general container with a header, body, and footer, use a structured card instead.
Slot locations
Revenue
$12,450.00
Rules
Basic usage
Slot an icon, a label, and a count. Add a badge to header-end for supporting context.
A count card with an icon, label, header badge, and count.
Multiple cards
Count cards work well in a grid to build a dashboard-style summary.
Four count cards in a responsive grid.
With full width
Use the full-width slot for content that spans the card’s width below the count, such as a sparkline or progress indicator.
A count card with a sparkline spanning its full width.
Additional body content
Use the body slot to add supporting content below the count, such as a progress meter or a last-updated time.
A count card with a trend badge, a meter, and a last-updated line in the body.
With menu
Use the action slot to add an icon button that opens a card-level menu.
A count card with an icon button that opens an options menu.
Themes
Set theme to primary, secondary, tertiary, success, error, warning, info, or info-secondary to apply semantic color. The default is none.
Count cards in each available theme.
A card component for displaying a count or metric with an icon and label.
import "@tylertech/forge/count-card";| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
theme | — | CountCardTheme | 'none' | The theme variant applied to the card. |
noBorder | — | boolean | false | Whether to hide the card border. |
| Name | Description |
|---|---|
icon | The icon displayed at the start of the card header. |
label | The label text displayed next to the icon. |
header-end | Optional content at the end of the header, ideal for badges or small accessories. |
action | Optional slot for a `forge-icon-button`. Use this instead of `header-end` for icon buttons, as it provides proper alignment for the 48x48 touch target. |
count | The main count or value displayed prominently below the header. |
count-end | Optional content displayed after the count, ideal for units or secondary values. |
body | Optional content below the count for additional details or secondary information. |
full-width | Optional full-width content below the primary card content, ideal for sparklines, meters, or progress indicators. |
| Name | Description |
|---|---|
--forge-count-card-icon-background | Controls the background color of the icon container. Defaults to Forge's surface-container color. |
--forge-count-card-icon-color | Controls the color of the icon. Defaults to Forge's on-surface color. |
--forge-count-card-icon-container-size | Controls the size of the icon container. Defaults to `32px`. |
--forge-count-card-icon-size | Controls the size of the icon itself. Defaults to `24px`. |
--forge-count-card-color | Controls the text color of the label and count. Inherited from theme when a theme is applied. |
Screen reader behavior
A count card has no role of its own: its icon, label, count, and other slotted content are read in order as ordinary content. Keep the label and count as plain text so they read naturally in sequence, such as “Revenue $12,450.00”. The label and count also show a tooltip with their full text.
Labeling
Always slot a text label so the count has context. Decorative icons in the icon slot don’t need a name, but an aria-label is required on any forge-icon-button in the action slot, such as “More options”.
<forge-count-card>
<forge-icon slot="icon" name="people"></forge-icon>
<span slot="label">Total users</span>
<span slot="count">1,234</span>
<forge-icon-button slot="action" aria-label="More options">
<forge-icon name="more_vert"></forge-icon>
</forge-icon-button>
</forge-count-card>Color and contrast
Themes change the card’s colors, but color shouldn’t be the only signal of meaning. Pair a success, error, or warning theme with text or an icon, such as a badge reading “Over budget”.
Keyboard interaction
The card itself isn’t focusable. Interactive content you slot into it, such as the action icon button, is reachable in its normal order with Tab and activated with Enter or Space.
For a progress indicator in the body or full-width slot, such as forge-meter, give it an accessible label that describes what it measures. Add text alternatives for charts like sparklines.