• Text Resize A A A
  • Print Print
  • Share Share on facebook Share on twitter Share

Layouts

HHS.gov uses Bootstrap’s responsive, mobile-first fluid grid system that scales up to 12 columns as the device or viewport size increases.

Figure 17, caption follows.
Figure 17: HHS.gov uses a responsive 12-column, flexible grid system. The 12-column grid is shown as an overlay on the HHS.gov layout.

Enterprise Templates

The templates used include the four responsive layouts shown below in figures 17 through 21.

Benefits of using the Enterprise templates include the following:

  • Sub-site of HHS Enterprise - utilizes HHS.gov primary navigation
  • Customizable local navigation
  • Customizable to include a Top Task tile and/or a slimboard
  • Customizable to include related links, dynamic content such as Tweets, static content such as a badge, or other elements
Figure 18, caption follows.
Figure 18: An overview of the HHS.gov home page layout which includes the four primary navigation tiles, the user-driven billboard carousel, as well as tiles depicting the HHS Blog, News and Top Tasks.

Figure 19, caption follows.
Figure 19: An overview of the HHS.gov primary navigation landing page layout which includes a Top Task tile and blue primary navigation tiles.

Figure 20, caption follows.
Figure 20: An overview of an HHS.gov interior level page with local navigation and blue primary navigation tiles.

Figure 21, caption follows.
Figure 21: An overview of an HHS.gov interior level basic page layout with local navigation, an article and secondary gray content tiles.

Figure 22, caption follows.
Figure 22: An overview of an HHS.gov interior level blog listing page with local navigation and a list of the blog posts available.

Independent Template

The Independent templates used include the responsive layouts shown below in figures 20 and 21, as well as many of the templates shown from the Enterprise site. This ensures that content is consistently displayed throughout all of HHS.gov.

Benefits of using the Independent templates include the following:

  • Independent primary navigation - up to 8 tiles/primary sections
  • Customizable icons for navigation and primary tiles
  • Customizable colors for primary navigation tiles
  • Customizable local navigation
  • Customizable to include Top Task tiles and/or sub-site billboard(s)
  • Customizable to include related links, dynamic content such as Tweets, static content such as a badge, or other elements
  • Customizable footer to include social media channels, Email Update Sign Up, and office location information

Figure 23, caption follows.
Figure 23: An overview of an HHS.gov Independent landing page layout which includes a Top Task tile, user-driven billboard carousel, primary navigation tiles and secondary content tiles.

Figure 24, caption follows.
Figure 24: An overview of an HHS.gov Independent interior level page with local navigation and basic text/article layout.
Content created by Digital Communications Division (DCD)
Content last reviewed on July 15, 2016