Skip to main content
Created Nov 04, 2024
Last Updated Nov 04, 2024

Header

The Header is for applications and subsites outside of the main MBTA.com website.

This shows users that they are on an MBTA page.

When to use a Header

You must use the MBTA header at the top of every page if your service is being hosted on mbta.com.

When not to use a Header

You must not use the MBTA header if your service is not being hosted on the above domain.

How the Header works

Default Header

The default header uses the most minimal implementation, solely consisting of an MBTA logo which links to https://www.mbta.com. Applications are responsible for supplying a skip link here as well, with an href value referencing an ID for the HTML element which contains the primary application content.

<section role="banner">
  <a href="#main-content" class="mbta--skip-link">Skip to main content</a>
  <nav class="mbta--nav">
    <a class="mbta--logo" href="https://www.mbta.com">
      <img role="img" src="https://cdn.mbta.com/images/mbta-name-and-logo.svg" width="198" height="36" alt="Massachusetts Bay Transportation Authority" />
      <img role="img" src="https://cdn.mbta.com/images/mbta-logo.svg" width="36" height="36" alt="Massachusetts Bay Transportation Authority" />
    </a>
  </nav>
</section>

Variation: Header with actions

The following actions are permitted, but not required:

  • A button to let users modify the application language
  • A button to let users log in or out of the application using MBTA SSO
<section role="banner">
  <a href="#main-content" class="mbta--skip-link">Skip to main content</a>
  <nav class="mbta--nav">
    <a class="mbta--logo" href="https://www.mbta.com">
      <img role="img" src="https://cdn.mbta.com/images/mbta-name-and-logo.svg" width="198" height="36" alt="Massachusetts Bay Transportation Authority" />
      <img role="img" src="https://cdn.mbta.com/images/mbta-logo.svg" width="36" height="36" alt="Massachusetts Bay Transportation Authority" />
    </a>
    <ul class="mbta--nav-actions">
      <li><button>Languages</button></li>
      <li><button>Login</button></li>
    </ul>
  </nav>
</section>