Contact Card

a card used to display contact information such as phone number, address, or email address.

Variants

Contact Card contact-card

a basic contact card

  • 

    <div class="contact-card">
  <div>
    <p class="m-bottom-sm u-font-weight-semibold">
      Work Email
    </p>
    <p>example@example.com</p>
  </div>

  <div class="contact-card__actions">
    <a href="#">Edit</a>
    <a class="danger-link" href="#">Delete</a>
  </div>
</div>

Usage

When to use

Use this card for displaying contact information

Class Name Description
contact-card

the container class
contact-card__actions

contains actions for the card such as edit and delete