Communications and Marketing

Website Style Guide

This guide is aimed at helping our users understand and make good use of the features we offer within our platform.

Colors Explore our brand colors.
Fonts Explore our fonts and their usage in our platform.
Components Looking for a way to make your pages more interesting? Learn more about our multi-column layouts.

Layout Structure

Let's begin by studying how our website is structured and its many elements.

Note: The layout structure for Centers and Institutes, though similar, is different and is not reflected below.

  1. Header
    Our global navigation offers a breakdown of the entire site and will help visitors get to any section they are looking for.
  2. Hero
    Visual aid to help the visitor know what section they are in. These can be configured in the Header section of each entity.
  3. Local Navigation
    Unlike the global navigation, this area focuses only in the section it is in. Most likely indicated by the Entity Header above.
  4. Breadcrumb
    The breadcrumb allows users to keep track of their locations within the site.
  5. Main Content Area
    This is the section where the main content you build is displayed.
  6. Footer
    Contains links to important sections of the site as well as other external links.
Visual breakdown of the different sections of the site that includes the points mentioned below.

This guide is specific to PublicHealth.JHU.edu and its related websites. Please review the Bloomberg School's branding tool kit (BSPH ID required) or JHU's brand guidelines for broader design needs.