<h2>What’s new in v3</h2>
<ul>
<li><strong>Building block:</strong> Cards now use a flexible base with two variants: one with standard padding and one for custom layouts.</li>
<li><strong>Content structure:</strong> Updated spacing for header, media, and footer, plus a more flexible body slot for richer content.</li>
<li><strong>Flexible layouts:</strong> Supports a wider range of layouts while staying aligned with system tokens and spacing rules.</li>
<li><strong>Design tokens:</strong> Provide a unified set of values for key properties, ensuring consistency across components and enabling easier customization. Learn more on the <a href="/getting-started/tokens">tokens page</a> and view the component’s token values in its <a href="?tab=Tokens">tokens tab</a>.</li>
</ul>
<h2>When to use</h2>
<p>Cards group related information into a clear, scannable block and help users compare or focus on specific content. They create visual separation and support flexible layouts for text, media and actions.</p>
<p>Use the card to:</p>
<ul>
<li>Highlight featured or important content.</li>
<li>Present repeated content patterns, such as products, resources or summaries.</li>
<li>Combine different content types (media, text, metadata, actions) into one cohesive module.</li>
<li>Improve scanability when the page contains multiple similar items.</li>
</ul>
<p>Cards, lists, and tables all organize information but serve different purposes. Choose the component that best fits your content structure and interaction needs.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Card</td>
<td>Use to group related information into a visually distinct block. Cards help users scan, compare or focus on content such as media, text or actions. They work well for featured items, summaries or repeated content patterns within a page.</td>
</tr>
<tr>
<td><a href="/components/link">Link</a></td>
<td>Use to navigate a user to another page or website, another place on the same page, or to open a link in a new tab.</td>
</tr>
<tr>
<td><a href="/components/list">List</a></td>
<td>Use to present a group of related information in a scannable format.</td>
</tr>
<tr>
<td><a href="/components/table">Table</a></td>
<td>Use to display complex groups of information for the purpose of reference, comparison or choice.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>A card is built from four main sections: media, header, body, and footer. It can include up to seven optional elements. Only the card title is required. All other elements are optional, allowing flexible content combinations.</p>
<p>This component supports the use of slots. For more details about how to use slots, see the <a href="/components/card?tab=Design#design-layout">layout</a> section.</p>
<details data-name='image-block' data-images='[{"alt":"The parts of a card, labeled 1 to 6.","caption":"The card component contains six elements within four sections.\n\n**Media** \n\n1. Media (optional): An image or visual block placed at the top of the card. Media supports flexible aspect ratios and can include images, illustrations, or chart previews depending on the use case.\n\n**Header**\n\n1. Overline (optional): used to provide contextual or categorical information.\n2. Icon (optional): An icon placed before or above the title.\n3. Title: The primary identifier of the card.\n4. Subtitle (optional): A supporting line that provides short context or classification.\n\n**Body**\n\n5. Description (optional): One or more lines of descriptive text.\n6. Slot (optional): A flexible content area used to insert custom elements such as charts, metrics, lists, or other UI blocks. The slot is the main extensibility point in the building block variant and supports more structured layouts in the vertical ue case card.\n\n**Footer**\n\n6. Call-to-action (optional): A link, button, or action group placed at the bottom of the card.","url":"https://dds.dell.com/site/v3/components/card/card-anatomy.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

<h2>Resources</h2>
<details data-name='card-collection' data-cards='[{"image":{"url":"","alt":""},"link":{"label":"Visit NN/g website","path":"https://www.nngroup.com/articles/cards-component/","type":"External"},"title":"Cards definition","description":"Read the Nielsen Norman Group&#39;s article on cards.","icon":"pop-up-arrow-corner"}]' data-NumberOfColumns='3' data-NumberOfColumnsMedium='2' data-NumberOfColumnsSmall='1' data-hideWidget='false'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Cards present content in a visually organized layout while maintaining consistent sizing. Different use cases may require adding or removing card elements. Consider the context of the experience when deciding which elements to include.

### Featured information

Use cards to highlight important or high‑value content. They draw attention, improve visibility, and support quick decision‑making. Cards can also present multiple items in a consistent layout, helping users browse content at a glance.

<details data-name='image-block' data-images='[{"alt":"Visual example of cards featuring content.","caption":"Example of using cards to feature content and create hierarchy.","url":"https://dds.dell.com/site/v3/components/card/card-3-column.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

### As navigation

Cards can serve as navigation elements by linking to deeper content or specific pages. Their visual weight and optional media help make destinations easy to identify. Navigation cards may include text, imagery, and clear actions to guide users to the linked content.

<details data-name='image-block' data-images='[{"alt":"Example of cards used for navigational content.","caption":"Example of cards used for navigational content.","url":"https://dds.dell.com/site/v3/components/card/card-usage-as-navigation.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Kinds

### Options

Cards are flexible and support additional combinations using optional media, body, and footer to accommodate different use cases. Every card includes a required title, while all other elements are optional. Body content is placed in the body (block) slot when extended or structured content is needed.

The examples below represent the most common recommended configurations. Always evaluate context and choose the structure that best fits your experience.

* **Card with footer:** Use when a card needs a clear action placed in the footer.
* **Card with media and body content:** Use for richer content where imagery and supporting text help convey context.
* **Card with body content:** Use for text‑focused content that does not require media or footer actions.

<details data-name='image-block' data-images='[{"alt":"Example of a card with footer.","caption":"Example of a card with footer.","url":"https://dds.dell.com/site/v3/components/card/card-kinds-footer.png"},{"alt":"Example of a card with media and body content.","caption":"Example of a card with media and body content.","url":"https://dds.dell.com/site/v3/components/card/card-kinds-media-and-body-content.png"},{"alt":"Example of a card with body content.","caption":"Example of a card with body content.","url":"https://dds.dell.com/site/v3/components/card/card-kinds-body-content.png"}]' data-numberofcolumns='3' data-hideWidget='false'></details>

## Layout

### Building block

A slot is available in this component to support flexible composition. It allows users to place additional elements such as images, text blocks, or other components while preserving the component’s layout, padding, and visual consistency.

Use the body slot for extended or structured content, such as longer descriptions or grouped information. Keep interactive actions in the footer unless the entire card is a link.

The building block has two variants that affect how these slots work:

* **Variant one** includes the system-defined internal padding and spacing. Use this variant for standard layouts.
* **Variant two** includes only the background and outer stroke, allowing you to replace the internal content with a local component. Use this variant for layouts that require non-standard or extended content while preserving the card’s outer structure.

Both variants use the same block order: header, media, body, and footer. They follow the spacing and alignment guidance below.

Use either a subtitle or an overline, not both. Since they serve the same purpose, using both creates redundancy and weakens the visual hierarchy.

<details data-name='image-block' data-images='[{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/card/card-layout-building-block-variant-one.png"},{"alt":"","caption":"","url":"https://dds.dell.com/site/v3/components/card/card-layout-building-block-variant-two.png"}]' data-numberofcolumns='2' data-hideWidget='false'></details>

### Alignment

Align cards from left to right within a group. The tallest card sets the row height. When space is limited, cards stack vertically, and their width adjusts responsively.

### Specifications

Apply spacing rules to maintain a consistent layout:

* **Outer padding:** 24px
* **Internal gaps:** 16px
* **Custom spacing:** 4px spacing grid

The card is responsive, so its width can vary depending on the use case.

<details data-name='image-block' data-images='[{"alt":"Example of cards components grouped horizontally and vertically with 12 pixels of padding. ","caption":"\nExample of card components grouped horizontally and vertically using 12px spacing between cards.","url":"https://dds.dell.com/site/v3/components/card/card-layout-specifications.png"}]' data-numberofcolumns='1' data-hideWidget='false'></details>

## Interaction

The card itself has no interaction states. Any links, buttons, or footers inside the card use their own component states.

Cards do not scroll. If the content exceeds the available space, it is truncated according to the card’s layout rules. When more room is needed, the card can expand to fit the content.

## Standards

### Accessibility

#### **Cards titles must be clear and purposeful**

The purpose of the card should be clearly understood from the card title alone.


WCAG 2.1: [1.3.1. Info and Relationships](https://www.w3.org/WAI/WCAG21/Understanding/info-and-relationships), [2.4.6 Headings and Labels](https://www.w3.org/WAI/WCAG21/Understanding/headings-and-labels.html)

#### **Card links must be unique and descriptive**

Card links should follow existing [DDS link guidance](/components/link/?tab=Design). Links should always describe their purpose, either explicitly in the link text, or by clear visual association with the card title (and with additional screen reader-only text provided so that the destination is still clear from the link alone).


WCAG 2.1: [2.4.4 Link Purpose in Context](https://www.w3.org/WAI/WCAG21/Understanding/link-purpose-in-context)

**Any charts and meaningful images should have alternative text**

If charts are included, the information conveyed should always be described with an alternative text. Images which convey additional information (and are therefore not decorative) should also have a meaningful, accurate description that is equivalent to the visual information being communicated.


WCAG 2.1: [1.1.1 Non-text Content](https://www.w3.org/WAI/WCAG21/Understanding/non-text-content)

**Do not rely on icons to communicate meaning**

If using [icons](/foundations/icons/), they should be chosen to reinforce the card’s purpose, as indicated by the title. Always choose icons with the widest recognizability, as the icon itself shouldn’t confuse people.

**Do not mix the usage of links and buttons**

Remember links are for navigating, not triggering actions. Misuse causes problems for keyboard and screen reader users who interact with these elements differently and will be confused if they hear them announced by the wrong role. For more information about when to use each, see the [link](/components/link/?tab=Design) and [button](/components/button/?tab=Design) guidance.

**Use large groups of cards sparingly**

Each card’s title will add a heading to the semantic page structure. Larger groupings of cards will increase the number of page headings, which can degrade the experience for screen reader users and other people who navigate by headings. Look for ways to break up cards into smaller grouped sections with subheadings.

### Content

#### **Capitalization**

Titles and subtitles should be written in sentence case, and content in the body section will follow writing standards. Calls to action capitalization depend on which trigger is attached: links are sentence case, while buttons are title case.

#### **Title and subtitle**

Use concise titles and subtitles describing the purpose of the card. Subtitles are optional and should provide complementary information if necessary.

**Do**: Card guidelines

**Don’t**: Read about use cases and accessibility for the card component

#### **Body content**

If used with a call to action, include a few lines to describe what event the action triggers. For example, if used for displaying related articles, the body copy should succinctly summarize the article it navigates to. In informative contexts, concisely explain or define the card’s title or topic.

Card

## Tokens

Component tokens define the visual decisions used by this component. Use these tokens to adjust the component while preserving consistency and accessibility across the system.

The table below lists all tokens consumed by the component, including their name, collection, associated CSS variable, and a preview.

For more details about tokens and how they work across the system, see the [tokens documentation](/getting-started/tokens).

| Name                             | Collection | CSS var                                       | Preview  |
| -------------------------------- | ---------- | --------------------------------------------- | -------- |
| card/gap                         | Component  | `var(--dds-card-gap)`                         | \-       |
| card/padding                     | Component  | `var(--dds-card-padding)`                     | \-       |
| border/radius/xs                 | Semantic   | `var(--dds-border-radius-xs)`                 | \-       |
| border/width/xs                  | Semantic   | `var(--dds-border-width-xs)`                  | \-       |
| color/background/SURFACE/neutral | Semantic   | `var(--dds-color-background-surface-neutral)` | \#FFFFFF |
| color/border/NEUTRAL/pale        | Semantic   | `var(--dds-color-border-neutral-pale)`        | \#C5D4E3 |
| size/4                           | Global     | `var(--dds-size-4)`                           | \-       |
| size/16                          | Global     | `var(--dds-size-16)`                          | \-       |
| color/purple/10                  | Global     | `var(--dds-color-purple-10)`                  | \#FBEBFF |
| color/purple/80                  | Global     | `var(--dds-color-purple-80)`                  | \#66278F |

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/?path=/docs/components-card--docs)
<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-card--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Code

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/?path=/docs/components-card--docs)
<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?args=&id=components-card--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/?path=/docs/components-card--docs)
<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-card--docs&viewMode=docs&websiteFrame=true' data-hideWidget='false'></details>

Cards are containers for concise information about a single subject. They can display featured information, related content, or navigational choices. In groups, cards present collections of similar content.