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-price">
<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-price">
<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
- 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 - Show prices with
nds-card-price, not tags: the amount 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 | 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-neutral, nds-yellow, nds-red, nds-blue, nds-green | Color variants that retint title, border-hover, and icon. Combine with nds-color for a matching tinted fill |
nds-card-actions nds-end | Right-aligns the actions row within the card |
nds-card-status | Absolute-positioned status badge slot pinned to the top-start corner of the card; place a tag or badge inside |
nds-disabled / [disabled] | Mutes colors, dims sub-content, and removes pointer interactions |
Data Attributes
| Attribute | Description |
|---|---|
data-status | Color variant on the card root without a class. Values: neutral, warning, error, critical, info, success. Equivalent to the corresponding color class modifier |
data-state="loading" | Set on the card root, or on a parent .nds-grid or .nds-paged-content, to render skeleton shimmer placeholders on all child cards. 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 |
--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 |
--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) |