Contact items

Ready

Notes
HTML
View
Context
Info

Contact items provide a consistent visual and structural format for content information. The icon should represent the method of contact or delivery.

By physical mail: contact-item--mail
By email: contact-item--email
By phone: contact-item--phone
By hand-delivery: contact-item--hand
By fax: contact-item--fax

When to use

Use contact items when the design presents a list of possible contact methods
Ex: Submit a question to RAD page
Use when there is a single contact item that needs higher visibility as an available resource
Ex: Contact us page; Advisory opinion process page

When to consider something else

When there is only one recommended or possible method of contact, it may be more appropriate to display the contact information inline with the text or instructions.


        
        <div class="grid grid--2-wide" style="padding: 2rem">
    <ul class="grid__item">
        <li class="contact-item">
            <div class="contact-item__icon">
                <img src="/img/i-phone--primary.svg" alt="Icon of a phone">
            </div>
            <div class="contact-item__content">
                <h5 class="contact-item__title">Toll free</h5>
                <span class="t-block">1-800-424-9530</span>
                <span class="t-block">8:30 a.m. to 5:30 p.m. Eastern Time</span>
            </div>
        </li>
        <li class="contact-item">
            <div class="contact-item__content--offset">
                <h5 class="contact-item__title">Local</h5>
                <span class="t-block">202-694-1000</span>
            </div>
        </li>
    </ul>
</div>


        <div class="grid grid--2-wide" style="padding: 2rem">
  <ul class="grid__item">
    <li class="contact-item">
      <div class="contact-item__icon">
        <img src="/img/i-phone--primary.svg" alt="Icon of a phone">
      </div>
      <div class="contact-item__content">
        <h5 class="contact-item__title">Toll free</h5>
        <span class="t-block">1-800-424-9530</span>
        <span class="t-block">8:30 a.m. to 5:30 p.m. Eastern Time</span>
      </div>
    </li>
    <li class="contact-item">
      <div class="contact-item__content--offset">
        <h5 class="contact-item__title">Local</h5>
        <span class="t-block">202-694-1000</span>
      </div>
    </li>
  </ul>
</div>


        
            
            /* No context defined. */

Handle: @contact-items
Preview:
- With layout
- Component only
Filesystem Path: components/02-components/contact-items/contact-items.html