Red Hat design system

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

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>