logo
Digital Design System
git icon

Contact Cards

Below you will find the different definitions and options to create your Contact Cards

Table of contents

Overview

Global Definition

Each Contact Card is based on a global CSS class called "msds-contact-card". It is important to include this class first as it is the main CSS class. Without this HTML class, you cannot utalize component. There are 3 types of Contact Cards:

  1. The default Contact Card, the default Contact Card is used for lists of contacts
  2. The second Contact Card has no image of the contact but has all the other information about the contact. The Contact Card without an image is used for lists of contacts
  3. The third is a Content Contact Card has the following:
    • An image of the contact
    • The contacts name
    • A description of the contacts position
    • A button that can be used to forward a user to another page
President & CEO
Card image
Lars Thinggaard
President & CEO, Milestone Systems
Contact Visit on LinkedIn
APAC & Corporate
Pernille Larsen
Corporate Communications Manager and PR & Communications Manager APAC
Contact Visit on LinkedIn
Card image
Lars Thinggaard
President & CEO, Milestone Systems

Sizes

Our cards can be rendered in 2 different sizes, large, and small. In order to use small cards, add the following

  • "col-md-3" instead of "col-md-4"
  • "msds-contact-card--small" to the same group of classes that has "msds-contact-card"
President & CEO
Card image
Lars Thinggaard
President & CEO, Milestone Systems
Contact Visit on LinkedIn
President & CEO
Card image
Lars Thinggaard
President & CEO, Milestone Systems
Contact Visit on LinkedIn

Default Contact Card

The default Contact Card has the following elements:

  • A headline for the contacts position
  • An image of the contact
  • The contacts name
  • A description of the contacts position
  • Links to reach the contact

Default Contact Card Large

The default large Contact Card can be used by wrapping your "msds-contact-card" block with a "col-md-4" from Bootstrap. Below is a example of the Milestone Large Contact Card.

As mentioned before, these Contact Cards are intended to be used in lists.

President & CEO
Card image
Lars Thinggaard
President & CEO, Milestone Systems
Contact Visit on LinkedIn 
<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-contact-card msds-contact-card--vertically-aligned">
        <div class="msds-contact-card__overlay"></div>
        <div class="msds-contact-card__headline">
          President &amp; CEO
        </div>
        <div class="msds-contact-card__caption">
          <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
        </div>
        <div class="msds-contact-card__body">
          <div class="msds-contact-card__body-contact-person">
            Lars Thinggaard
          </div>
          <div class="msds-contact-card__body-contact-position">
            President &amp; CEO, Milestone Systems
          </div>
          <div class="msds-contact-card__body-contact-details">
            <div class="msds-contact-card__body-contact-details-wrapper">
              <a class="msds-contact-card__link" href="#">
                <svg title="email" class="msds-contact-card__icon">
                  <use href="../../../msds-spritemap.svg#email" />
                </svg>
                Contact
              </a>
              <a class="msds-contact-card__link" href="#">
                <svg title="linkedin" class="msds-contact-card__icon">
                  <use href="../../../msds-spritemap.svg#linkedin" />
                </svg>
                Visit on LinkedIn
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Default Contact Card Small

Below is a example of the Milestone Small Themed Contact Card. The small cards have reduced element sizes and reduced padding.

  • The small cards have preset width based on bootstrap columns "col-md-3" and "msds-contact-card--small" as an extra class at the same level as "msds-contact-card".
President & CEO
Card image
Lars Thinggaard
President & CEO, Milestone Systems
Contact Visit on LinkedIn 
<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-3">
      <div class="msds-contact-card msds-contact-card--small msds-contact-card--vertically-aligned">
        <div class="msds-contact-card__overlay"></div>
        <div class="msds-contact-card__headline">
          President &amp; CEO
        </div>
        <div class="msds-contact-card__caption">
          <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
        </div>
        <div class="msds-contact-card__body">
          <div class="msds-contact-card__body-contact-person">
            Lars Thinggaard
          </div>
          <div class="msds-contact-card__body-contact-position">
            President &amp; CEO, Milestone Systems
          </div>
          <div class="msds-contact-card__body-contact-details">
            <div class="msds-contact-card__body-contact-details-wrapper">
              <a class="msds-contact-card__link" href="#">
                <svg title="email" class="msds-contact-card__icon">
                  <use href="../../../msds-spritemap.svg#email" />
                </svg>
                Contact
              </a>
              <a class="msds-contact-card__link" href="#">
                <svg title="linkedin" class="msds-contact-card__icon">
                  <use href="../../../msds-spritemap.svg#linkedin" />
                </svg>
                Visit on LinkedIn
              </a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Contact Card Without An Image

This Contact Card has a different layout to the default Contact Card

The Contact Card without an image has the following elements:

  • A headline for the contacts position
  • The contacts name
  • A description of the contacts position
  • Links to reach the contact

As mentioned before, these Contact Cards are intended to be used in lists.

Contact Card Large Without An Image

The large Contact Card without an image can be used by wrapping your "msds-contact-card" block with a "col-md-4" from Bootstrap. Below is a example of the Milestone Large Contact Card.

APAC & Corporate
Pernille Larsen
Corporate Communications Manager and PR & Communications Manager APAC
Contact Visit on LinkedIn 
<div class="container">
  <div class="row">
    <div class="col-12 col-md-4">
      <div class="msds-contact-card msds-contact-card--without-image msds-contact-card--vertically-aligned">
        <div class="msds-contact-card__overlay"></div>
        <div class="msds-contact-card__headline">
          APAC &amp; Corporate
        </div>
        <div class="msds-contact-card__body">
          <div class="msds-contact-card__body-contact-person">
            Pernille Larsen
          </div>
          <div class="msds-contact-card__body-contact-position">
            Corporate Communications Manager and PR &amp; Communications Manager APAC
          </div>
          <div class="msds-contact-card__body-contact-details">
            <a class="msds-contact-card__link" href="#">
              <svg title="email" class="msds-contact-card__icon">
                <use href="../../../msds-spritemap.svg#email" />
              </svg>
              Contact
            </a>
            <a class="msds-contact-card__link" href="#">
              <svg title="linkedin" class="msds-contact-card__icon">
                <use href="../../../msds-spritemap.svg#linkedin" />
              </svg>
              Visit on LinkedIn
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Contact Card Small Without An Image

Below is a example of the Milestone Small Themed Contact Card. The small cards have reduced element sizes and reduced padding.

  • The small cards have preset width based on bootstrap columns "col-md-3" and "msds-contact-card--small" as an extra class at the same level as "msds-contact-card".
APAC & Corporate
Pernille Larsen
Corporate Communications Manager and PR & Communications Manager APAC
Contact Visit on LinkedIn 
<div class="container">
  <div class="row">
    <div class="col-12 col-md-3">
      <div class="msds-contact-card msds-contact-card--small-without-image msds-contact-card--vertically-aligned">
        <div class="msds-contact-card__overlay"></div>
        <div class="msds-contact-card__headline">
          APAC &amp; Corporate
        </div>
        <div class="msds-contact-card__body">
          <div class="msds-contact-card__body-contact-person">
            Pernille Larsen
          </div>
          <div class="msds-contact-card__body-contact-position">
            Corporate Communications Manager and PR &amp; Communications Manager APAC
          </div>
          <div class="msds-contact-card__body-contact-details">
            <a class="msds-contact-card__link" href="#">
              <svg title="email" class="msds-contact-card__icon">
                <use href="../../../msds-spritemap.svg#email" />
              </svg>
              Contact
            </a>
            <a class="msds-contact-card__link" href="#">
              <svg title="linkedin" class="msds-contact-card__icon">
                <use href="../../../msds-spritemap.svg#linkedin" />
              </svg>
              Visit on LinkedIn
            </a>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

Content Contact Card

The Content Contact Card has the following elements:

  • An image of the contact
  • The contacts name
  • A description of the contacts position
  • A button that can be used to forward users to another page

The Content Contact Card can be used by wrapping your adding "msds-contact-card--content" to the wrapper class containing "msds-contact-card".

The Content Contact Card is intended to be used when you want to represent an author of a page or article.

Below is a example of the Milestone Large Contact Card.

Card image
Lars Thinggaard
President & CEO, Milestone Systems 
<div class="container">
  <div class="row card-row">
    <div class="col-12 col-md-4">
      <div class="msds-contact-card msds-contact-card--content msds-contact-card--vertically-aligned">
        <div class="msds-contact-card__caption">
          <img class="msds-contact-card__caption-image rounded-circle" src="../../../src/demo-img/contact-card-image.png" alt="Card image">
        </div>
        <div class="msds-contact-card__body">
          <div class="msds-contact-card__body-contact-person">
            Lars Thinggaard
          </div>
          <div class="msds-contact-card__body-contact-position">
            President &amp; CEO, Milestone Systems
          </div>
          <div class="msds-contact-card__body-contact-details">
            <div class="msds-contact-card__body-contact-details-wrapper">
              <button type="button" class="msds-btn msds-btn--primary msds-btn--icon">
                get in contact
                <div class="msds-icon"><svg>
                    <use href="../../../msds-spritemap.svg#email" /></svg></div>
              </button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>