> ## Documentation Index
> Fetch the complete documentation index at: https://docs.cognite.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Cognite Data Fusion (CDF) is an industrial DataOps platform. Prefer English docs unless the user asks for another locale.
> Follow /_llms/ index links recursively until you reach page URLs ending in .md. Fetch those Markdown twins instead of HTML.
> For REST APIs, default to calendar version 20230101 (stable). Use 20230101-beta or 20230101-alpha only if the user is on a preview API. Cite paths under /api-reference/concepts/<version>/ and the Cdf-Version header. Prefer the Python SDK (cognite-sdk) unless the user is in JavaScript/TypeScript.
> Start here by task: platform overview /cdf/index.md; data modeling /cdf/dm/index.md; data integration /cdf/integration/index.md; access /cdf/access/index.md; CDF Toolkit /cdf/deploy/cdf_toolkit/index.md; REST quickstart /dev/quickstart.md; Python SDK /dev/sdks/python/index.md; Atlas AI /cdf/atlas_ai/concepts/index.md; Flows apps /cdf/flows/index.md; Aura UI /cdf/aura/index.md; MCP and IDE setup /dev/guides/ide_ai_integration.md.
> For implementation work, also load /skill.md.

# Card

> A simple, styled container with optional header and footer content, and a flexible body content slot.

<Badge color="blue">v1.0.0</Badge> | [View in Storybook](https://master--695bb4b1b8041ae09768950a.chromatic.com/?path=/docs/primitives-card--docs)

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--basic" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--basic&viewMode=story&globals=theme:light" title="Card basic story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

## When to use

Cards group related content and actions about a single subject into a distinct, flexible container.

* Presenting heterogeneous content types together (e.g., image, title, summary text, metadata, badge, button).
* Structuring items in scannable, multi-column grid layouts (e.g., blog posts, product catalogs, user profiles, dashboard widgets).
* Serving as a entry-point preview that routes users to a detailed full-page view.

## When to use something else

* **Data Tables:** Use when users need to perform line-by-line text comparisons, sort by specific attributes, or scan large datasets.
* **Lists:** Use for simple, homogeneous text items without heavy visual hierarchy or individual media elements.
* **Dialogs / Drawers:** Use when triggering primary workflows, multi-step forms, or critical decision-making tasks rather than content browsing.

## Dos and don'ts

* **Do** focus each card on a single entity or subject.
* **Do** use consistent visual height and media ratios across grid items.
* **Do** provide clear hover and focus indicators for interactive Cards.
* **Do** truncate long description text to preserver layout grid balance.
* **Don't** nest Cards inside other Cards.
* **Don't** overload Cards with competing primary actions or extensive body text.
* **Don't** Embed inline links or Buttons inside a Card that is already fully clickable.
* **Don't** use Cards purely for background styling or wrapping single text paragraphs.

## Behavior

* **Click targets:** If the Card container itself is actionable, make the entire surface area trigger the primary action. If the Card contains multiple distinct actions (e.g., Bookmark, Share, View Details), make secondary controls individual target Buttons and keep the container static to avoid conflicting tap zones.
* **Visual states:** Include explicit visual feedback for Default, Hover (subtle elevation rise or border highlight), Focus-Visible (accessible focus ring for keyboard navigation), and Pressed states.
* **Responsive layout:** Cards should adjust fluidly—scaling column spans across desktop break-points and dropping down to a single-column, full-width stack on mobile screens.

## Anatomy

Each section of the Card is optional, but it is highly recommended to use a header to ensure a clear hierarchical relationship among content within the Card.

### Header

While not restricted, it is highly recommended to use a pre-configured header from Aura to create consistency across Cards in the product. Headers may consist of a combination of the following: leading icon, title, subtitle or status indicator and trailing content, which may be a Count or icon Buttons.

### Body

Card bodies are entirely flexible to present relevant information and may consist of, but not limited to, media images, text, and Charts.

### Footer

While not restricted, it is highly recommended to use a pre-configured footer from Aura to create consistency across Cards in the product. Footers may consist of Buttons or metadata.

## Often used with

[Button](/cdf/aura/primitives/button), [Badge](/cdf/aura/primitives/badge), [Avatar](/cdf/aura/primitives/avatar), [Separator](/cdf/aura/primitives/separator); optional card-title typography; body slots for charts, lists, or form fields.

## Accessibility

* Interactive containers: Avoid wrapping entire cards containing internal links or buttons inside a single parent `<a>` tag. Make internal action links individual keyboard focus targets.
* Document outline: Structure internal title nodes (CardTitle) into logical heading sequences (`<h2>` to `<h4>`) to support page landmark scanning.

## Visual examples

The examples below are interactive and follow the doc site's theming: light mode when the docs site is in light mode, and dark mode when you switch the docs site to dark mode.

### With text footer

Add a text-only footer to the Card when you need supplementary metadata—such as a timestamp or status line—without action buttons.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-text-footer" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-text-footer&viewMode=story&globals=theme:light" title="Card with text footer story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With left and right footer

Use a Card footer with left and right slots when you need metadata on one side and actions on the other—for example, a date on the left and a Button on the right.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-left-and-right-footer" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-left-and-right-footer&viewMode=story&globals=theme:light" title="Card with left and right footer story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With badge in header

Place a Badge in the Card header to show status or category—such as Active, Draft, or Beta—without crowding the title.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-badge-in-header" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-badge-in-header&viewMode=story&globals=theme:light" title="Card with badge in header story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Minimal

Use a minimal Card when you only need a bordered container for body content, without a header, footer, or actions.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--minimal" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--minimal&viewMode=story&globals=theme:light" title="Card minimal story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With icon and title only

Use a Card with only an icon and title in the header when the content is self-explanatory and you want a compact, scannable list item.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-icon-and-title-only" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-icon-and-title-only&viewMode=story&globals=theme:light" title="Card with icon and title only story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With actions

Add action Buttons to the Card header or footer when users can act on the card directly—for example, Edit, Delete, or Open.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-actions" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-actions&viewMode=story&globals=theme:light" title="Card with actions story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With icon and actions

Combine a header icon with Card actions when each item in a list has a distinct type and a primary action, such as opening a document or asset.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-icon-and-actions" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-icon-and-actions&viewMode=story&globals=theme:light" title="Card with icon and actions story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With header end badge

Place a Badge at the end of the Card header when status or count should align to the right—for example, unread count or severity.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-header-end-badge" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-header-end-badge&viewMode=story&globals=theme:light" title="Card with header end badge story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### With icon and header end

Use a Card with a header icon and end-slot content when the left icon identifies the item type and the right slot holds a Badge, menu, or action.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--with-icon-and-header-end" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--with-icon-and-header-end&viewMode=story&globals=theme:light" title="Card with icon and header end story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Content only

Use a content-only Card when the body is the focus and no header or footer is needed—for example, a chart, image, or data widget.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--content-only" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--content-only&viewMode=story&globals=theme:light" title="Card content only story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Grid layout

Arrange Cards in a grid when users browse a collection of items—such as assets, templates, or dashboards—and need equal visual weight per item.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--grid-layout" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--grid-layout&viewMode=story&globals=theme:light" title="Card grid layout story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Semantic headings

Set semantic heading levels on the Card title so the page outline stays correct when Cards appear inside sections with existing headings.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--semantic-headings" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--semantic-headings&viewMode=story&globals=theme:light" title="Card semantic headings story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Header with only icon and right

Use a Card header with only an icon and right-slot content when the title is implied by context—for example, a thumbnail card with a menu button.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--header-with-only-icon-and-right" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--header-with-only-icon-and-right&viewMode=story&globals=theme:light" title="Card header with only icon and right story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Header with only description

Use a Card header with only a description when a title would be redundant—for example, supplementary context below a page-level heading.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--header-with-only-description" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--header-with-only-description&viewMode=story&globals=theme:light" title="Card header with only description story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Long title and description clamping

Rely on title and description clamping when Card copy may be long, so list and grid layouts stay uniform without unpredictable row heights.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--long-title-and-description-clamping" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--long-title-and-description-clamping&viewMode=story&globals=theme:light" title="Card long title and description clamping story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Multiple titles or descriptions

Avoid multiple titles or descriptions in a single Card header; this example documents edge-case layout when more than one text block is present.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--multiple-titles-or-descriptions" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--multiple-titles-or-descriptions&viewMode=story&globals=theme:light" title="Card multiple titles or descriptions story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Card actions align variants

Choose Card action alignment—start, end, or spread—based on whether actions should group with metadata or anchor to the trailing edge of the footer.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--card-actions-align-variants" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--card-actions-align-variants&viewMode=story&globals=theme:light" title="Card card actions align variants story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Footer end only

Use a footer with only an end slot when a single action or status label should sit on the right—for example, a View details link.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--footer-end-only" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--footer-end-only&viewMode=story&globals=theme:light" title="Card footer end only story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>

### Footer start only

Use a footer with only a start slot when metadata or a secondary label belongs on the left—for example, Last updated or Created by.

<Frame>
  <iframe className="aura-storybook-embed w-full rounded-lg border border-zinc-950/10 dark:border-white/10" data-story-id="primitives-card--footer-start-only" src="https://master--695bb4b1b8041ae09768950a.chromatic.com/iframe.html?id=primitives-card--footer-start-only&viewMode=story&globals=theme:light" title="Card footer start only story" loading="lazy" style={{ height: "360px", display: "block", width: "100%" }} />
</Frame>