Responsive Footer

Overview

The footer consists of quick links, language assistance links, contact information, and organization logos. The footer is built to be completely responsive so that elements wrap or stack to fit the various screen sizes and should, on all breakpoints, have the background fit to 100% of the width of the page.

Contents

• Design example
• Social Links
• Newsletter Signup
• Language links
• Footer Navigation
• Footer Text
• Footer Icons

Small & Medium Screen Footer

Large & Extra Large Screens

Social links

Specifications This links are represented as actionalble icons. The icons are from the FontAwesome Library. They are $charcoal color on default and then matches the social brand on hover (see list below for hover colors). Note: The blog icon is custom created Functionality OnClick/OnTap of icon, system displays the target in new tab.

• Facebook - icon: facebook-square - color: #3966b8 - link https://www.facebook.com/samhsa
• Twitter - icon: twitter-square - color: #00a2f9 - link https://twitter.com/samhsagov
• YouTube - icon: youtube-square - color: #fe2c13 - link https://www.youtube.com/samhsa/
• LinkedIn - icon: linkedin - color: #0E76A8 - link https://www.linkedin.com/company/substance-abuse-and-mental-health-services-administration/
• RSS - icon: rss-square - color: #f89c40 - link https://www.samhsa.gov/rss
• Blog - icon: “custom created” - color: #1b7391 - link https://blog.samhsa.gov/ Visual Styling
• On default, footer links are body text color and underlined.
  • color: $charcoal (#4A4A4A)
  • text-decoration: underline;
• On hover, links change to ruby with underline
  • color: $ruby (#A82D2B)
  • text-decoration: underline;

Newsletter Sign up

This module allows users to subscribe to the SAMHSA newsletter. The module is located on the footer, but may be used in other areas of the site. Please refer to the documentatation on the Newsletter Module page.

Language links

All links are pointed to anchor tags on the Language Services page. Specifications

• Title: text is in bold.
• Links: On Hover – underline appears.
• Pike sybol “|” : please use CSS rather than creating a physical pike, because of 508 concerns. Functionality OnClick/OnTap of icon, system displays the target in parent window.

Footer Navigation

Specifications On Hover – underline appears. For “|” – please use CSS rather than creating a physical pike, because of 508 concerns. Functionality OnClick/OnTap of icon, system displays the target in parent window.

• Home - https://www.samhsa.gov/
• Site Map - https://www.samhsa.gov/sitemap
• Viewers & Plugins - https://www.samhsa.gov/viewers-plugins
• Budget and Performance - https://www.samhsa.gov/about-us/budget
• Accessibility - https://www.samhsa.gov/accessibility
• Plain Language - https://www.samhsa.gov/plain-language
• Privacy Policy - https://www.samhsa.gov/privacy
• Disclaimers - https://www.hhs.gov/web/policies-and-standards/hhs-web-policies/disclaimer/index.html
• Freedom of Information Act - https://www.samhsa.gov/foia
• Nondiscrimination Notice - https://www.samhsa.gov/samhsa-nondiscrimination-notice
• EEO/No FEAR Act Data - https://www.hhs.gov/about/agencies/asa/eeo/resources/no-fear-act/index.html
• Office of the Inspector General - https://oig.hhs.gov/
• U.S. Department Health & Human Services https://www.hhs.gov
• Have a question about goverment services? Contact USA.gov

Footer text

Content: “SAMHSA’s mission is to reduce the impact of substance abuse and mental illness of America’s communities.” “5600 Fishers Lane, Rockville, MD 20857 1-877-SAMHSA-7 (1-877-726-4727)

Footer Icons

• SAMHSA Logo - OnClick/OnTap of link system displays https://www.samhsa.gov/ in parent window.
• HHS Logo - OnClick/OnTap of link system displays https://www.hhs.gov/ in new window.