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.

Sample element

Example 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>
View the <rh-card> demo in a new tab
© 2021-2024 Red Hat, Inc. Deploys by Netlify