Contact info

The contact information component is used to display phone, email, mailing address, and fax information for offices within the Bureau. This pattern may show up in either the main content area or the sidebar, as seen in the mockup below:


Use case

When to use
  • When there is a specific action users may want or need to take that requires contacting a specific office within the Bureau.
  • Default placement should be in the sidebar, use main content area when contact information is of extra significance or directly ties into the main objective of the page.
When something else is better
  • When no contact information is needed or no specific action is tied to the contact information.


The mockups below show simultaneously how this pattern works within either the main content area or the sidebar:

Breakpoints 901+

As seen on pages with right sidebar.

Desktop mockup

Breakpoints 901+

As seen on pages with a sub nav.

Stacked mockup

Breakpoints 900 and less

Patterns are stacked single column.

Stacked mockup

Content guidelines

Headings should be the official name of the office.

Description beneath heading should clearly state why a user would need to contact the office. This description should closely follow the office descriptions linked through the bureau structure page. About 2-3 sentences in length (150-300 characters).

Email address should always be formatted as, not (Addresses are automatically redirected, no technical work is necessary to support this standard.)

Mailing address:

  • Street suffixes (street, place, avenue, etc.) should be spelled out.

  • Cardinal directions (NW, SW, NE, SE, N, E, S, W) should be title case with no periods, and come after a comma.

  • Washington, D.C. has a comma and periods in D.C.


Mockup with specs
  • Pre-set contact options are email, phone number (including TTY/TDD), fax, and physical addresses.
  • Sidebar pattern includes the option for map imagery.
  • Pre-set minicons are used to help visually reinforce the type of contact method.