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

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

Status checklist

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
Scroll back to the top