Skip to main content Red Hat Design System logo Contribute on Github

Card

Overview Style Guidelines Code

Overview

Cards are flexible surfaces used to group information in a small layout. They give small previews of information or provide secondary content in relation to the content it's near. Several cards can be used together to group related information.

Status

What do these mean?
Figma library:
Ready
Responsive:
Ready
RH Elements:
Ready
webRH:
Ready

Sample element

Image of a card element

Demos

View a live version of this component and see how it can be customized.

<rh-card>
<h2 slot="header">Card</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Nullam eleifend elit sed est egestas, a sollicitudin mauris
tincidunt. Pellentesque vel dapibus risus. Nullam aliquam
felis orci, eget cursus mi lacinia quis. Vivamus at felis sem.</p>
<rh-cta slot="footer" priority="primary">
<a href="#">Call to action</a>
</rh-cta>
</rh-card>

<script type="module">
import '@rhds/elements/rh-cta/rh-cta.js';
import '@rhds/elements/rh-card/rh-card.js';
</script>

<style>
[data-demo] { height: auto; }
</style>

Full screen demo

Property Status Meaning
Figma library Ready Component is available in the Figma library
Responsive Ready Component responds to changing viewport sizes in Figma and the browser
RH Elements Ready Component is available as a web component
webRH Ready Component is available as a web component
© 2021-2024 Red Hat, Inc. Deploys by Netlify