# Card `` is highly customizable [HTML custom element](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) is a type of UI design component that display content and actions about a single topic. ## Use Cases The `` element can be use in a variety of ways, including: - Navigation: Cards can be used for navigation purposes. - Featured information: Cards can be used to display featured information or related content. - Content containers: Cards can be used to organize information consistently within a page. - Grouping information: Cards can be used to group information. - Providing a visual hierarchy: Cards can provide a clear visual hierarchy, organizing information into brief, self-contained units. - Providing an overview: Cards can serve as an overview and an entry point for more detailed information. - Providing a summary: Cards can present a summary and link to additional details. ## Example(s) ### Basic The basic example demonstrates the `image`, `description`, and `cta` content slots. The default card has 100% width for flexible presentation within its container. **Content recommendations:** - Use `` with `display="500"` for headings - Use `

` elements for body text - Use `` or `` for the `cta` slot Apply CSS constraints like `max-width` to control text wrapping and layout as needed, as illustrated in the second example.

Random insert Display card title here

Context goes here.

More info
Random insert Display card title here

Context goes here. Use this area to communicate more information to your users.

More info
Random insert Display title

Context goes here.

More info
See code ```html
Random insert Display card title here

Context goes here.

More info
Random insert Display card title here

Context goes here. Use this area to communicate more information to your users.

More info
Random insert Display title

Context goes here.

More info
```