Standard
Build product, article, or service cards by combining header, content, tags, rating, and action sub-components
Card Title
Short description of this card content goes here for demonstration.
Statistic
A centered metric layout for headline numbers in dashboards and stats grids
Active Users
<div class="nds-card nds-stroke nds-statistic">
<div class="nds-card-header">
<div class="nds-card-featured-icon">
<span class="nds-featured-icon nds-circle nds-xl">
<i class="nds-icon nds-icon-avatar" aria-hidden="true"></i>
</span>
</div>
</div>
<div class="nds-card-content">
<div class="nds-card-text">
<span class="nds-card-number nds-counter-value nds-number-format" data-target="125847">0</span>
<p class="nds-card-description">Active Users</p>
</div>
</div>
</div>
Card Group
Pair cards with nds-grid for responsive column-shifting layouts
Active Users
Completed
Success Rate
Pending
Built-in Features
What you get out of the box with zero configuration
Mix header, content, tags, rating, checkbox, status, and actions to build product, article, service, or user cards.
Default, gold, neutral, lavender, yellow, red, and blue treatments adjust title, border, and icon tints together. Combine with nds-color for a tinted fill.
Centered metric layout with display-sized numbers and an icon for dashboards and stats grids.
Aspect ratio, focal point, and gradient overlay are tunable per card through CSS variables on the image container.
Add nds-oncolor to adapt text, borders, and icon tints for dark sections, hero backgrounds, or photographic surfaces.
Use the card as <a> or <button> to get hover and active feedback on stroke and shadow variants.
Override padding, gap, radius, colors, and width per instance via --card-* custom properties.
Card actions stack on mobile. Pair with nds-grid for column-shifting card groups.
Usage Guidelines
When and how to use cards effectively
Best Practices
- Use cards to group related content into scannable units: service tiles, product listings, article previews, and dashboard widgets
- Use
nds-statisticfor headline metrics in dashboards: a single number, a label, and an optional icon. Pair multiple statistic cards inside a grid for KPI rows - Choose
nds-strokefor flat or content-heavy layouts. Usends-shadowfor elevated, floating, or modal-adjacent cards - Use
nds-colortogether with a color variant (nds-blue,nds-yellow, etc.) to category-code or status-code groups of cards in dashboards - Use
nds-oncolorwhen placing cards on dark sections, hero backgrounds, or imagery so text and borders stay readable - Make the entire card clickable by using
<a>or<button>as the root element, not by wrapping a card in a separate link - Don't use a card for a transient status message: use an Alert instead. Don't use a card to block the user for a decision: use a Modal
- Don't nest cards inside cards. If you need internal structure, use
nds-card-meta,nds-card-tags, or a definition list inside the content area - Add a featured icon or avatar in the header for quick visual recognition. Size up (
nds-lg,nds-xl) on statistic cards and grid contexts where the icon carries the meaning - Keep card descriptions to one or two lines. For longer copy, add
nds-truncateon the title and description, or link out to a detail page from the actions area
Modifier Classes
| Class | Description |
|---|---|
nds-stroke | Adds a 1px outline border around the card |
nds-shadow | Adds an elevation shadow; deepens on hover when the card is interactive |
nds-color | Tinted background fill that matches the active color variant |
nds-rowView | Switches the card to a horizontal row layout (header sits to the side) |
nds-center | Centers header, content, tags, rating, and actions horizontally |
nds-statistic | Centered metric layout with a large display number; size with nds-md or nds-sm on the number element |
nds-user | Compact user-card preset with a 224px default width |
nds-full-width / nds-full | Removes the max-width cap so the card fills its container |
nds-oncolor | Adapts text, borders, and icon tints for dark or photographic surfaces |
nds-gold, nds-neutral, nds-lavendar, nds-yellow, nds-red, nds-blue | Color variants that retint title, border-hover, and icon. Combine with nds-color for a matching tinted fill |
nds-disabled / [disabled] | Mutes colors, dims sub-content, and removes pointer interactions |
CSS Custom Properties
| Property | Default | Description |
|---|---|---|
--card-bg | --background-card | Card background color |
--card-bg-hover | --background-card-hovered | Background when the card is interactive and hovered |
--card-border | --border-neutral-primary | Stroke color for the nds-stroke variant |
--card-border-hover | --border-primary | Stroke color when the card is hovered |
--card-border-active | --border-neutral-primary | Stroke color when the card is pressed |
--card-padding | --spacing-xl | Inner padding of the card |
--card-gap | --spacing-3xl | Vertical gap between header, content, meta, and actions |
--card-radius | --components-card-radius | Corner radius |
--card-width | 100% | Card width inside its container |
--card-width-min | 0 | Minimum width |
--card-width-max | 360px | Maximum width cap |
--card-title | --text-display | Title color |
--card-subtitle | --text-primary | Subtitle color |
--card-text | --text-display | Description and body text color |
--card-number | --text-primary-sa-flag | Statistic number color |
--card-rating | --text-secondary-paragraph | Rating helper text color |
--icon-color | --featuredicons-icon-primary | Featured-icon color (also drives the avatar color) |
--icon-bg-color | --featuredicons-background-brand-light | Featured-icon background color |
--img-ratio | 2 / 1 | Set on .nds-card-image to control aspect ratio |
--img-pos-x | 50% | Horizontal focal point of the image |
--img-pos-y | 50% | Vertical focal point of the image |
--overlay | 0 | Opacity of the dark gradient overlay on the image (0 to 1) |