> ## 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.

# Card

> A simple, reusable container with optional header and footer content, and a flexible body content slot. Optional header and footer content can be used and is structured to support consistency across the product. The Card body area is for data artifacts or widgets.

## Card

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

### When to use

* When users need to display data artifacts or widgets.
* When users need to display a grid of items, especially when users should be able to swap between list and grid views.
* When users need to display a chart or graph.
* When users need to display media content such as images or videos.

### When to use something else

* Don't use Cards to create unnecessary containers in the UI. Consider [Separator](/aura-design-system/primitives/separator)s and spacing to group content instead.
* Don't use Cards when dense metadata or many fields must be compared across rows; use a [Data grid](/aura-design-system/primitives/data-grid) or a simple list.

### Behavior

* Structural container only: put interactive controls ([Button](/aura-design-system/primitives/button), links, [Checkbox](/aura-design-system/primitives/checkbox), etc.) inside the card body or actions area, not on the shell unless the whole card is intentionally one focusable target.

### Often used with

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