Card

Information: Documentation incomplete

This component still requires documentation.

Use the card component to group related information and actions.

Examples

Default

View HTML

<div class="uhb-c-card">
  <div class="uhb-c-card__content">
    <h2 class="uhb-c-card__heading">Card heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident inventore omnis totam porro ipsam a consectetur, atque corrupti officia deleniti eum culpa quae voluptas labore dolorem. Temporibus error fuga quasi.</p>
  </div>
</div>

Image

View HTML

<div class="uhb-c-card">
  <img class="uhb-c-card__image" src="https://via.placeholder.com/1920x1080" alt="">
  <div class="uhb-c-card__content">
    <h2 class="uhb-c-card__heading">Card heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident inventore omnis totam porro ipsam a consectetur, atque corrupti officia deleniti eum culpa quae voluptas labore dolorem. Temporibus error fuga quasi.</p>
  </div>
</div>

Clickable

View HTML

<div class="uhb-c-card uhb-c-card--clickable">
  <div class="uhb-c-card__content">
    <h2 class="uhb-c-card__heading">
      <a class="uhb-c-card__link" href="#">Card link</a>
    </h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident inventore omnis totam porro ipsam a consectetur, atque corrupti officia deleniti eum culpa quae voluptas labore dolorem. Temporibus error fuga quasi.</p>
  </div>
</div>

Primary

View HTML

<div class="uhb-c-card uhb-c-card--primary">
  <div class="uhb-c-card__content">
    <h2 class="uhb-c-card__heading">Card heading</h2>
    <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Provident inventore omnis totam porro ipsam a consectetur, atque corrupti officia deleniti eum culpa quae voluptas labore dolorem. Temporibus error fuga quasi.</p>
  </div>
</div>