React Components

# Card

_A **Card** is a versatile component designed to act as a container for various types of content, providing structure and context in a visually distinct box._

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
Interdum et malesuada fames ac ante ipsum primis in faucibus.

## Overview

---

The **Card** component will serve as a flexible container that can be used across different parts of an application to display information in a structured manner.

It is designed to be reusable, customizable, and responsive, as it can hold various elements like text, Medium, and other UI components.

It also provides a consistent layout and styling for presenting information in a visually appealing way.

<table class="_table_e3iru_2 _table--md_e3iru_59 _table--striped_e3iru_167 _identity-card__table_75e8e_7" data-ods="table" data-storybook="table"><tbody><tr><th scope="row">Name</th><td>Card</td></tr><tr><th scope="row">Also known as</th><td>Tile (previous name), Content Container, Product Card</td></tr><tr><th scope="row">Links</th><td><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://www.figma.com/design/9jDDTcR4a9jPRFcdjawAlf/ODS---UI-Kit?node-id=3-28244" target="_blank">Design <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://github.com/ovh/design-system/tree/master/packages/ods-react/src/components/card" target="_blank">Github <span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a><a class="_link_1qra4_2 _identity-card__app-link_75e8e_12" data-ods="link" href="https://ovh.github.io/design-system/v18.6.4/?path=/docs/ods-components-card--documentation" target="_blank">Previous major version<span class="_icon_g76et_2 _icon--external-link_g76et_256" data-ods="icon" role="presentation"></span></a></td></tr></tbody></table>

## Usage

---

A **Card** can be used to:

-   display a wide variety of content such as a text, or other elements.
-   emphasize important content
-   visually group related content
-   guide the user toward actions
-   provide the option to navigate to more detailed content

Several elements can be used in a **Card**:

-   A title
-   A description
-   A 
-   A 
-   Extra information

All these elements are not mandatory in every **Card**.

### Dos & Don'ts

| ✅ Do |
| --- |
| - Use Card to group related content or actions into a visually distinct, contained block |
| - Combine contextually related elements inside a Card (e.g., image, title, text, CTA/button) |
| - Use Card to highlight key content, such as featured items, previews, or summaries |
| - Keep the Card layout clean and scannable, using consistent spacing and visual hierarchy |
| - Limit the number of interactive elements (e.g., buttons or links) |
| - Apply Card when you need to modularize content for dashboards, lists, or repeated patterns |

| ❌ Don't |
| --- |
| - Don't overuse Card across the UI. They should enhance clarity, not create visual clutter |
| - Don't fill Card with unrelated or excessive content that breaks focus or structure |
| - Don't place too many buttons or CTAs within a single Card. Keep interactions minimal and purposeful |
| - Don't use Card to group inconsistent or unrelated components (e.g., mixing stats, forms, and media arbitrarily) |
| - Don't use Card to group inconsistent or unrelated components (e.g., mixing stats, forms, and media arbitrarily) |
| - Don't make the entire Card clickable unless it's meant to behave as a single interactive unit |
| - Don't apply inconsistent padding, borders, or elevation. All Cards should follow the same structural rules |

### Best Practices in Context

1.  **Card**
2.  **Content**

## Placement

---

**Cards** that are strongly related can be grouped in a layout group. This group can flow horizontally left to right and/or vertically top to bottom.

## Variation

---

### Color

-   **Neutral**: displaying standard content without conveying any particular status or urgency, maintaining a balanced and non-emphatic appearance.
-   **Primary**: displaying highlighted content with particular emphasis.

## Navigation

---

The **Card** component is non-interactive and does not receive keyboard focus.

## Accessibility

---

When multiple **Cards** are grouped together, it is important to ensure their structure is correctly conveyed to assistive technologies.

### Structuring groups of Cards with lists

If multiple **Cards** are displayed together (e.g., a collection of products, articles or dashboards), they should be wrapped in an unordered list of items (`<ul>` and `<li>`) to improve navigation for screen reader users.

-   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Interdum et malesuada fames ac ante ipsum primis in faucibus.
    
-   Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Interdum et malesuada fames ac ante ipsum primis in faucibus.
    

```jsx
<ul
  style={{
    display: 'flex',
    gap: '16px',
    listStyleType: 'none',
    margin: 0,
    padding: 0
  }}
>
  <li>
    <Card
      style={{
        padding: '8px'
      }}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.      <br />
      Interdum et malesuada fames ac ante ipsum primis in faucibus.    </Card>
  </li>
  <li>
    <Card
      style={{
        padding: '8px'
      }}
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.      <br />
      Interdum et malesuada fames ac ante ipsum primis in faucibus.    </Card>
  </li>
</ul>
```

This structure ensures that assistive technologies announce **Cards** as a list, rather than reading them as separate, unrelated announcements. Screen readers will announce the list and the number of items.

### Alternative approach with ARIA roles

When modifying the HTML structure is not possible, use [role="list"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/list_role) and [role="listitem"](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/listitem_role) to mimic list semantics.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
Interdum et malesuada fames ac ante ipsum primis in faucibus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
Interdum et malesuada fames ac ante ipsum primis in faucibus.

```jsx
<div
  role="list"
  style={{
    display: 'flex',
    gap: '16px'
  }}
>
  <Card
    role="listitem"
    style={{
      padding: '8px'
    }}
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.    <br />
    Interdum et malesuada fames ac ante ipsum primis in faucibus.  </Card>
  <Card
    role="listitem"
    style={{
      padding: '8px'
    }}
  >
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.    <br />
    Interdum et malesuada fames ac ante ipsum primis in faucibus.  </Card>
</div>
```

This ensures that screen readers still recognize the **Cards** as a structured list even without native `<ul>` and `<li>` elements.