Contact Info

  • A contact info component should always be wrapped in an address tag
  • The title 'Address' is set as an h3 so screen reader users can easily navigate to it when browsing the page by headings. It's set to a third level heading because we are going to assume the address is in the footer, and the footer should have an h2 with the inner content of 'Footer'
  • The state is wrapped in a abbreviation tag

Address

Sparkbox

123 Webster St

Suite 200

Dayton, OH 45402

Phone: 123-123-1234

Email: 

<address class="contact-info">
  <h3 class="contact-info__title">Address</h3>
  <p class="contact-info__name">Sparkbox</p>
  <div class="contact-info__address">
    <p>123 Webster St</p>
    <p>Suite 200</p>
    <p>Dayton, <abbr title="Ohio">OH</abbr> 45402</p>
  </div>
  <p>Phone: <a href="tel:+01-123-123-1234" class="contact-info__phone">123-123-1234</a></p>
  <p>Email: <a href="mailto:email@email.com" class="contact-info__email">email@email.com</a></p>
</address>