Standard
Build product, article, or service cards by combining header, content, tags, rating, and action sub-components
Card Title
Card Subtitle
Short description of this card content goes here for demonstration.
Statistic
A centered metric layout for headline numbers in dashboards and stats grids
0
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>
Product Pricing
A clear price line for product and service cards, built on the Numbers utility: a prominent amount with its currency icon, an optional crossed-out original for sale pricing, and a muted unit suffix as plain text
Sale pricing with the original crossed out
Smart Watch
AMOLED display, water resistant to 50 meters.
1299
1599
<div class="nds-card nds-stroke">
<div class="nds-card-image">
<img src="https://images.unsplash.com/photo-1523275335684-37898b6baf30?auto=format&fit=crop&w=800&q=60" alt="Smart Watch" loading="lazy">
</div>
<div class="nds-card-content">
<div class="nds-card-text">
<span class="nds-card-title">Smart Watch</span>
<p class="nds-card-description">AMOLED display, water resistant to 50 meters.</p>
</div>
<div class="nds-card-value">
<span class="nds-number-format" data-currency="SAR">1299</span>
<s class="nds-number-format" data-currency="SAR">1599</s>
</div>
</div>
<div class="nds-card-actions">
<button class="nds-btn nds-primary nds-full" type="button">
<span class="nds-label">Add to Cart</span>
</button>
</div>
</div>
Unit pricing with a plain-text suffix
Specialty Coffee
Medium-roast single-origin Arabica beans.
89
/ kg
<div class="nds-card nds-stroke">
<div class="nds-card-image">
<img src="https://images.unsplash.com/photo-1447933601403-0c6688de566e?auto=format&fit=crop&w=800&q=60" alt="Specialty Coffee" loading="lazy">
</div>
<div class="nds-card-content">
<div class="nds-card-text">
<span class="nds-card-title">Specialty Coffee</span>
<p class="nds-card-description">Medium-roast single-origin Arabica beans.</p>
</div>
<div class="nds-card-value">
<span class="nds-number-format" data-currency="SAR">89</span>
/ kg
</div>
</div>
<div class="nds-card-actions">
<button class="nds-btn nds-primary nds-full" type="button">
<span class="nds-label">Add to Cart</span>
</button>
</div>
</div>
Card Group
Pair cards with nds-grid for responsive column-shifting layouts
0
Active Users
0
Completed
0
Success Rate
0
Pending
Built-in Features
What you get out of the box with zero configuration
Composable Anatomy
Mix header, content, tags, rating, price, checkbox, status, and actions to build product, article, service, or user cards.
Seven Color Variants
Default, neutral, yellow, red, and blue treatments adjust title, border, and icon tints together. Combine with nds-color for a tinted fill.
Statistic Mode
Centered metric layout with display-sized numbers and an icon for dashboards and stats grids.
Image with Overlay
Aspect ratio, focal point, and gradient overlay are tunable per card through CSS variables on the image container.
On-Color Treatment
Add nds-oncolor to adapt text, borders, and icon tints for dark sections, hero backgrounds, or photographic surfaces.
Interactive States
Use the card as <a> or <button> to get hover and active feedback on stroke and shadow variants.
CSS-Driven Theming
Override padding, gap, radius, colors, and width per instance via --card-* custom properties.
Responsive Layout
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
- Wrap tags in
nds-card-metaonly when a second meta row sits beside them, such as a rating. The wrapper is a flex column that groups those rows. Tags on their own go straight insidends-card-content, with no wrapper:nds-card-tagsis styled by the card root, not by the wrapper - 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 - Place
nds-card-actionsafternds-card-content, not inside it. Only the content area scrolls inside a modal, so buttons placed inside it scroll out of reach on a long form. Actions inside the content still work: a modal pins them to the bottom, and annds-rowViewcard keeps them in the content column - 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 - Show a price, a rate, or a size with
nds-card-value, not tags: the value is an Numbers span (data-currencyrenders the riyal icon), a<s>child is the crossed-out original, and a unit suffix like/ kgis plain text - 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 | Element | Description |
|---|---|---|
nds-stroke | card root | Adds a 1px outline border around the card |
nds-shadow | card root | Adds an elevation shadow; deepens on hover when the card is interactive |
nds-color | card root | Tinted background fill that matches the active color variant |
nds-rowView | card root | Switches the card to a horizontal row layout. The header sits beside the content and keeps its own size, so an avatar or featured icon stays compact. An image header is 160px wide; set --card-image-width to change it. When the card is too narrow for both columns, the header takes the full width and the content moves under it |
nds-center | card root | Centers header, content, tags, rating, and actions horizontally. It must sit on the root, not on an inner part: the card also reads it to switch the featured icon's alignment, so a misplaced nds-center centers nothing and leaves the icon on the old rule |
nds-statistic | card root | Centered metric layout with a large display number; size with nds-md or nds-sm on the number element |
nds-user | card root | Compact user-card preset with a 224px default width |
nds-full-width / nds-full | card root | Removes the max-width cap so the card fills its container |
nds-oncolor | card root | Adapts text, borders, and icon tints for dark or photographic surfaces |
nds-neutral, nds-yellow, nds-red, nds-blue, nds-green | card root | Color variants that retint title, border-hover, and icon. Combine with nds-color for a matching tinted fill |
nds-end | .nds-card-actions | Right-aligns the actions row within the card |
nds-card-status | child of the card root | Absolute-positioned status badge slot pinned to the top-start corner of the card; place a tag or badge inside |
nds-disabled / [disabled] | card root | Mutes colors, dims sub-content, and removes pointer interactions |
Data Attributes
| Attribute | Element | Description |
|---|---|---|
data-status | card root | Declares the state the card is in. Values: neutral, warning, error, critical, info, success. It renders as the matching color variant, but it is not a color picker. Set it only when the card really carries that state. For a tint on a card that asserts no status, use the color class instead (nds-blue, nds-green, and the rest), and leave data-status off |
data-state="loading" | card root, or a parent .nds-grid / .nds-paged-content | Renders skeleton shimmer placeholders on the card, or on every child card when set on the parent. Equivalent to adding nds-loading as a class |
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, on both axes |
--card-padding-block | --card-padding | Top and bottom padding alone. Set it to pad one axis without touching the other |
--card-padding-inline | --card-padding | Start and end padding alone. Tab content reads it too, so a card-style tab panel keeps the same gutter |
--card-gap | --spacing-3xl | Vertical gap between header, content, meta, and actions |
--card-radius | --radius-lg | 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-strong | Statistic number color |
--card-rating | --text-secondary-paragraph | Rating helper text color |
--featuredicon-color | --featuredicons-icon-primary | Featured-icon color (also drives the avatar color) |
--featuredicon-bg | --featuredicons-background-primary-light | Featured-icon background color |
--card-image-width | 160px | Width of the image column in an nds-rowView card. It has no effect on a stacked card, where the image fills the card width |
--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) |