Foundations cover accessibility standards, the grid system, page templates, color themes, and recommended image aspect ratios.

Example Pages

Example pages demonstrate in-context component usage.

  • Archive Page

    Archive Pages list a series of posts, such as news stories.

  • Article Page

    Article Pages deliver any editorial piece of content, from a simple text-only announcement to magazine-style stories.

  • Detail Page

    Detail Pages deliver informational or text-heavy content rather than driving users to other pages.

  • Editorial Landing Page

    Editorial Landing Pages provide an overview, and opportunity to tease articles, magazine-style stories, or other editorial content.

  • Landing Page

    Landing Pages provide visitors with an overview of a key topic.

  • Event / Conference

    Specific Event / Conference example showing use of Event Topper.

  • 404 Error

    Standard page when visitors request a non-existent URL.

  • Course

    Specific Course example showing use of Course Topper.

  • People Listing

    Specific People Listing example showing use of Person Tease Primitive.

  • Profile

    Specific Profile example showing use of Profile Topper.

Universal Components

Universal Components are singleton (existing once per site) components required to build HBS sites. The primary users are site builders spinning up new sites under the HBS Design System.

  • Global Menu

    The Global Menu provides consistent inter-site navigation among HBS sites.

  • Local Primary Navigation

    The Local Primary Navigation provides hierarchical intra-site navigation.

  • Site Footer

    The Site Footer provides customizable HTML content and links to support HBS sites.

  • Site Header

    The Site Header contains required per-site Design System needs.

Content Components

Content Components are used by content creators to build pages. They make up most of the HBS Design System and are used to present almost any type of content to site visitors.

  • Toppers

    Toppers are singleton components required to start pages.

  • Blocks

    Blocks are repeatable components used to create page content.

  • Template-Specific Singletons

    Template-Specific Singletons are components optionally used once on specific templates.


Primitives are elemental components combined to create compound components. The primary users are developers expanding the HBS Design System.