Contact Card

A Contact card is a component used to display relevant contact information of an individual or a department. It can be inserted into other layers or blocks such as the footer or a sidebar

Usage

{% set options = {
  "card-contact":
  {
    "class": "miz-card__contact",
    "title": "Contact Us",
    "subtitle": "Department Name",
    "phone": "(123) 456-7890",
    "email": "email@email.com",
    "address": "123 Building | Columbia, MO 65203"
  },
  "socialList":[
      {
      "name": "facebook",
      "class": "miz-svg--facebook",
      "href": "https://www.facebook.com",
      },
      {
      "name": "twitter",
      "class": "miz-svg--twitter",
      "href": "https://www.twitter.com",
      }
  ]

} %}

  {% include '@miz/components/card-contact/card-contact.twig' with options only %}

The above code will output:

<!-- Contact Card Output -->
<div class="miz-card__contact miz-card-contact">
    <h2 class="miz-card__contact--title">Contact Us</h2>
    <h6 class="miz-card__contact--subtitle">Department Name</h6>
    <p>123 Building | Columbia, MO 65203</p>
    <p><strong>Phone:</strong> (123) 456-7890</p>
    <p><strong>Email:</strong> <a href="mailto:email@email.com">email@email.com</a></p>

    <div class="miz-card__contact--social">
        <a href="https://www.facebook.com" class="miz-card__contact--social--icon miz-svg--facebook">
            <svg class="miz-icon miz-icon--md" aria-hidden="true" focusable="false">
                <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
            </svg>
        </a>
        <a href="https://www.twitter.com" class="miz-card__contact--social--icon miz-svg--twitter">
            <svg class="miz-icon miz-icon--md" aria-hidden="true" focusable="false">
                <use xlink:href="/images/icons/svg/sprite.symbol.svg#twitter"></use>
            </svg>
        </a>
    </div>
</div>

See the View tab for contact block variations to see an example of how it is being used.

Options

card-contact

The Contact Block is used by including it with an object made of a contact-block object and an optional socialList object.
Parameters with a * are required.

Param Default Values Description
class* miz-card__contact String Additional classes appended to the block message.
title null String A title for the contact block.
Recommended “Contact Us” or something similar.
Limit to less than 30 characters
subtitle null String A subtitle generally used for the department name.
Try and limit to less than 30 characters.
phone null String Phone number for the person or department
email null String Primary email contact information
address null String The physical building address

socialList

The socialList is meant to show icons that link to various social media outlets.
Parameters with a * are required.

Param Default Values Description
name * null String The name of the social media outlet. It should be all lower case
class null String Additional classes to add to the icon. Recommended using miz-svg--name to apply brand specific colors to the icons
href * null String Link to the social media profile for the person or department
{% set options = {
  "card-contact":
  {
    "class": "miz-card__contact",
    "title": "Contact Us",
    "subtitle": "Department Name",
    "phone": "(123) 456-7890",
    "email": "email@email.com",
    "address": "123 Building | Columbia, MO 65203"
  },
  "socialList":[
      {
      "name": "facebook",
      "class": "miz-svg--facebook",
      "href": "https://www.facebook.com",
      },
      {
      "name": "twitter",
      "class": "miz-svg--twitter",
      "href": "https://www.twitter.com",
      }
  ]

} %}

{% include '@miz/components/cards-contact/cards-contact.twig' with options only %}
<div class="miz-card__contact miz-card__contact">

    <h2 class="miz-card-contact__title">Contact Us</h2>

    <h6 class="miz-card-contact__subtitle">Department Name</h6>

    <p>123 Building | Columbia, MO 65203</p>

    <p><strong>Phone:</strong> (123) 456-7890</p>

    <p><strong>Email:</strong> <a href="mailto:email@email.com">email@email.com</a></p>

    <div class="miz-card-contact__social">
        <a href="https://www.facebook.com" class="miz-card-contact__social-icon miz-svg--facebook">
                      <svg class="miz-icon miz-icon--md" aria-hidden="true" focusable="false">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#facebook"></use>
  </svg>

        </a>
        <a href="https://www.twitter.com" class="miz-card-contact__social-icon miz-svg--twitter">
                      <svg class="miz-icon miz-icon--md" aria-hidden="true" focusable="false">
    <use xlink:href="/images/icons/svg/sprite.symbol.svg#twitter"></use>
  </svg>

        </a>
    </div>

</div>
/* No context defined for this component. */
  • Content:
    /**
     * @component Contact Block
    */
    
    .miz-card-contact {
      position: relative;
      /* stylelint-disable-next-line */ // JLR
      display: flex;
      flex-direction: column;
      min-width: 0;
      word-wrap: break-word;
      background-color: $miz-card__background-color;
      background-clip: border-box;
      border: $miz-card__border-width;
      border-style: $miz-card__border-style;
      border-color: $miz-card__border-color;
      border-radius: $miz-card__border-radius;
    
      > * {
        flex: 0 0 auto;
      }
    }
    
    .miz-card-contact__title {
      @include miz-text-heading-level-4;
    }
    
    .miz-card-contact__subtitle {
      @include miz-text-heading-level-2;
    }
    
    .miz-card-contact__social {
      /* stylelint-disable-next-line */ // JLR
      display: flex;
    }
    
    .miz-card-contact__social-icon {
      margin: $miz-space-inline-left-default;
      flex: 0 1 auto;
    
      &:hover,
      &:active,
      &:focus {
        opacity: 0.7;
      }
    }
    
    .miz-card-contact__social-icon .miz-icon {
      width: 2.5rem;
      height: 2.5rem;
    }
    
    // Hack for dark footer
    .miz-footer--dark {
      .miz-card-contact__title,
      .miz-card-contact__subtitle,
      p,
      a {
        color: $miz-white;
      }
    }
    
  • URL: /components/raw/miz-cards-contact/cards-contact.scss
  • Filesystem Path: fractal/pattern-library/miz/components/cards-contact/cards-contact.scss
  • Size: 1.1 KB