<h2>When to use</h2>
<p>From a navigational perspective, cards are similar to the link component. When used for featured information or related content, they are comparable to a list or a table component. In the latter instances, for example, ecommerce experiences will often include a toggle to switch between a list and card view.</p>
<table>
<thead>
<tr>
<th>Component</th>
<th>Use case</th>
</tr>
</thead>
<tbody><tr>
<td>Card</td>
<td>Used for navigation purposes, featured information or related content, depending on context and elements added. As content containers, they are useful to organize information consistently 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>A list presents a group of related information in a scannable format.</td>
</tr>
<tr>
<td><a href="/components/table">Table</a></td>
<td>A table displays complex groups of information for the purpose of reference, comparison, or choice.</td>
</tr>
</tbody></table>
<h2>Anatomy</h2>
<p>A card component can contain up to seven elements within four sections. Note that except for the card title, all elements are optional. This allows cards to have different content combinations and to remain flexible to diverse contexts across digital experiences.</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. Image (optional): image, must have a 16:9 aspect ratio.\n\n**Header**\n\n2. Icon (optional): icon placed above or to the left of the card title.\n3. Card title: required headline or title.\n4. Subtitle (optional): supporting line of content.\n\n**Body**\n\n5. Container (optional): container for charts or graphs.\n\n**Footer**\n\n6. Call-to-action (optional): link, button, or button group.","url":"https://dds.dell.com/site/components/card/card-anatomy.jpg"}]' data-numberofcolumns='1'></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'></details>


figma

Figma UI Kit

dds__icon--metadata

Vanilla

angular

Angular

react

React

## Usage

Cards display content in a visually organized way, maintaining a consistent size within the screen for the information added. Different use cases may require adding different elements to the card. For example. cards intended to have a navigational purpose should have a link in the footer.

### Featured information

Cards used for featuring information highlight important and valuable content for users, as they improve visibility and engagement. They are useful in enhancing accessibility by providing clear and focused content. Cards are also helpful to organize and streamline information on a page, helping create or maintain an organized layout.

<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/components/card/card-3-column.jpg"}]' data-numberofcolumns='1'></details>

### As navigation

Cards can be used for navigational purposes. The advantage to this is that they carry additional visual weight as a containerized object on the page. Additionally, cards accommodate both media and text in order to provide more context about the link’s destination.


<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/components/card/default.png"}]' data-numberofcolumns='1'></details>

## Kinds

### Options

There are many content combinations for a card, which allows for various applications of the component. It is possible to include media, body content, and footer. The header must always contain a title, while an icon and a subtitle are optional elements.

<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/production/0d/fd/Cards_Kinds1_34ed8a10c7.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/production/0b/0b/Cards_Kinds2_a12ca6d62f.png"},{"alt":"Example of a card with body content.","caption":"Example of a card with body content.","url":"https://dds.dell.com/site/production/49/cc/Cards_Kinds3_411a52490c.png"}]' data-numberofcolumns='3'></details>

## Layout

### Alignment

Always horizontally align cards within a group from the left to the right side of the screen. The height of the largest card in a group will determine the height for all cards. When the horizontal space is limited, stack them vertically, while preserving their original order.

### Specifications

When placed in groups, cards should present collections of similar content. Following the alignment guidelines, the recommended space between each card should be a multiple of 4 pixels, horizontally and vertically (read more about the baseline grid on the [grid foundations page](/foundations/grid/#baseline-grid)). All units of measurement are in pixels.

<details data-name='image-block' data-images='[{"alt":"Example of cards components grouped horizontally and vertically with 12 pixels of padding. ","caption":"Example of card components grouped horizontally and vertically with 12 pixels of padding.","url":"https://dds.dell.com/site/components/card/card-specs-1.png"}]' data-numberofcolumns='1'></details>

## Interaction

A card component does not have different states, since it consists of a static container on the page. If the card contains a footer with a link or buttons, these triggers’ states should follow their standard guidelines. See [button](/components/button/?tab=Design#interaction) and [link](/components/link/?tab=Design#interaction) component pages to understand their different states.
Since this component does not have a scroll bar feature, the card component is truncated at a certain point. If the card content requires more space, it is possible to expand the card height.

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

 To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://vanilla.delldesignsystem.com/index.html?path=/docs/components-card--basic)

<details data-name='iframe-doc' data-link='https://vanilla.delldesignsystem.com/iframe.html?args=&id=components-card--basic&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://angular.delldesignsystem.com/index.html?path=/story/components-card--basic)

<details data-name='iframe-doc' data-link='https://angular.delldesignsystem.com/iframe.html?id=components-card--docs&args=&viewMode=docs&websiteFrame=true'></details>

To see other interactive examples of this component or for additional developer documentation, visit [Storybook](https://react.delldesignsystem.com/index.html?path=/story/components-card--basic)

<details data-name='iframe-doc' data-link='https://react.delldesignsystem.com/iframe.html?args=&id=components-card--docs&viewMode=docs&websiteFrame=true'></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.

<p>AI Chat Toolkit has moved! You can now find it under the AI section.</p>


AI Chat Toolkit Redirect

<p>The DDS Feedback Form has been updated to point to Service Now (the new official intake form). Please <a href="/resources/videos/servicenow-overview">review this video</a> to learn more about how to interact with our team. Although the tool and process changed, our team expects to continue providing the same support as before.</p>
