Footer

The footer is a navigational component at the bottom of every page template.

Anatomy

• A fact bar showing quarterly data and stats from The Gray Notebook

  • Only displays on the Home, Landing, and Pathway templates

  • The Fact bar shows 1-3 (depending on browser width) facts

  • Gets updated quarterly by the Web Team

• A utility nav containing the links to utility sections of the site (About, Contact, etc.)

• A subscribe to updates link and description

• An agency links list of related agency links

• A social links list of WSDOT social media, blogs, and feed

• A copyright and policies links list of legal disclosures and links

Responsive sizing

As the browser becomes narrower, the link lists fit into a 2 column lay out, with the exception of the Subscribe block – which spans the full list.

Specs

Fact bar

• Heading: same styling as H6

• The data should start with a statistic and finish with the rest of the description text

• The CMS should allow the use bold text in the rest of the text, but no other styling

• Text colors: dark accent, gray 100

• Link color: dark accent

• Background color: light accent 15% (or #EFF9D9)

• Border-top: 1px solid light accent 50% (or #C3E86D)

• Angle graphic color: light accent 30% (or #D3ED97)

See featured facts in Cards for more styling information.

Link lists

• Link font size: base1 (mobile) base3 (desktop)

• Link line height: base3 (mobile), base5 (desktop)

• Space between lines: 16px

Footer Spacing

• Margin-top: 63px (mobile), 72px (desktop)

• Padding: 24px 15px (mobile), 32px auto (desktop)

• 5 columns are auto-width and evenly spaced in the container

Inspect navigation components in public site components in Figma

Change log

07/26/21 - Changed the "sign up for email..." box to have no padding and no background color.

09/02/21 - Added latest text content to the "Sign up" box in the footer.