A container for content representing a single entity.
<nve-card>
<nve-card-header>
<h2 nve-text="heading sm medium">Heading</h2>
</nve-card-header>
<nve-card-content>
<p nve-text="body" style="min-height: 64px">card content</p>
</nve-card-content>
<nve-card-footer>
<p nve-text="body">card footer</p>
</nve-card-footer>
</nve-card>
Heading
card content
card footer
Installation
<script type="module">
import '@nvidia-elements/core/card/define.js';
</script>
<nve-card>
<nve-card-header>
<h2 nve-text="heading sm medium">Heading</h2>
</nve-card-header>
<nve-card-content>
<p nve-text="body" style="min-height: 64px">card content</p>
</nve-card-content>
<nve-card-footer>
<p nve-text="body">card footer</p>
</nve-card-footer>
</nve-card>
Card Actions
Card with action buttons in the footer, including primary and secondary actions for interactive card layouts.
<nve-card>
<nve-card-header>
<div nve-layout="column gap:xs">
<h2 nve-text="heading sm bold">Heading</h2>
<h3 nve-text="body sm muted">Sub Heading</h3>
</div>
</nve-card-header>
<nve-card-content>
<p nve-text="body" style="min-height: 64px">card content</p>
</nve-card-content>
<nve-card-footer>
<div nve-layout="row gap:xs">
<nve-button container="flat" style="margin-left: auto">cancel</nve-button>
<nve-button>action</nve-button>
</div>
</nve-card-footer>
</nve-card>
Heading
Sub Heading
card content
Cards with media content (images) displayed in a grid layout, ideal for photo galleries, product catalogs, or visual content showcases.
<div nve-layout="grid gap:md span-items:6 align:stretch" style="max-width: 900px">
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body" style="min-height: 24px">card content</p>
</nve-card-content>
</nve-card>
<nve-card style="height: 100%; width: 100%">
<img
src="static/images/test-image-1.svg"
alt="example visualization for media card demo"
loading="lazy"
style="width: 100%; object-fit: cover"
/>
<nve-card-content>
<p nve-text="body" style="min-height: 24px">card content</p>
</nve-card-content>
</nve-card>
</div>
card content
card content
Overflow Content
Card with overflow content, where the card body scrolls when content exceeds the card height.
<nve-card style="height: 250px; width: 400px">
<nve-card-header>
<h2 nve-text="heading sm medium">Heading</h2>
</nve-card-header>
<nve-card-content>
<p nve-text="body" style="margin-bottom: 300px">card content</p>
<p nve-text="body">card content</p>
</nve-card-content>
<nve-card-footer>
<p nve-text="body">card footer</p>
</nve-card-footer>
</nve-card>
Heading
card content
card content
card footer
Card with integrated tabs in the header for multi-panel content within a single card interface.
<nve-card style="width: 400px; height: 200px">
<nve-card-header>
<h2 nve-text="heading sm bold">Heading</h2>
<nve-tabs>
<nve-tabs-item selected>tab 1</nve-tabs-item>
<nve-tabs-item>tab 2</nve-tabs-item>
<nve-tabs-item>tab 3</nve-tabs-item>
</nve-tabs>
</nve-card-header>
<nve-card-content>
<p nve-text="body">card content</p>
</nve-card-content>
</nve-card>
Heading
tab 1
tab 2
tab 3
card content
Card Description List
Card containing a description list layout, perfect for displaying key-value pairs, definitions, or structured data in a readable format.
<nve-card style="width: 650px">
<nve-card-header>
<h2 nve-text="heading sm bold">Nautical Terms</h2>
</nve-card-header>
<nve-card-content>
<dl nve-layout="grid gap:lg">
<dt nve-layout="span:4" nve-text="body muted medium">Knot</dt>
<dd nve-layout="span:8" nve-text="body">Knot is a unit of speed equaling 1 nautical mile per hour.</dd>
<dt nve-layout="span:4" nve-text="body muted medium">Port</dt>
<dd nve-layout="span:8" nve-text="body">
Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the
bow (the front of the vessel).
</dd>
<dt nve-layout="span:4" nve-text="body muted medium">Starboard</dt>
<dd nve-layout="span:8" nve-text="body">
Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing
towards the bow (the front of the vessel).
</dd>
</dl>
</nve-card-content>
</nve-card>
Nautical Terms
- Knot
- Knot is a unit of speed equaling 1 nautical mile per hour.
- Port
-
Port is the nautical term that refers to the left side of a ship, as perceived by a person facing towards the
bow (the front of the vessel).
- Starboard
-
Starboard is the nautical term that refers to the right side of a vessel, as perceived by a person facing
towards the bow (the front of the vessel).
Card with Divider
Card with a divider separating different content sections, useful for organizing related but distinct information within a single card.
<nve-card style="width: 400px; height: 300px">
<nve-card-header>
<h2 nve-text="heading sm bold">Heading</h2>
</nve-card-header>
<nve-card-content>
<p nve-text="body">card content</p>
</nve-card-content>
<nve-divider></nve-divider>
<nve-card-content>
<p nve-text="body">card content</p>
</nve-card-content>
</nve-card>
Heading
card content
card content
Container Full
Card with full container styling that extends to the edges, suitable for full-width layouts or when you want the card to blend with its container.
<nve-card container="full">
<nve-card-content>
<p nve-text="body">container full</p>
</nve-card-content>
</nve-card>
Release Status
All elements and features go through 3 phases of stability, pre-release, beta and stable.
pre-release
Docs Preview
API Documentation
Fully Themeable
beta
Robust unit test coverages
Passed API Review
Passed Designer VQA Review
Included in library package
stable
No known outstanding AA WCAG issues
No known outstanding performance issues
Adapts to different screen/container sizes
No breaking API changes for at least 90 days