Identity Guidelines

Components

Components are the building blocks of the Harvard Business School (HBS) identity.

  • Universal Components

    Universal Components are singleton (used once) components required to build sites.

  • Content Components

    Content Components are used by content creators to build pages.

  • Primitives

    Primitives are elemental components combined to create compound components.

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

Toppers

Toppers are singleton components required to start pages.

  • Page Toppers

    Page toppers are required to start pages.

  • Article Toppers

    Article toppers are required to start news articles, stories, and blog posts.

  • Template Toppers

    Template toppers are required to start pages with specific templates.

Template CompatibilityArchive PageLanding PageDetail PageArticle Page
Page Topper (all)⚫️⚫️⚫️
Article Topper (all)⚫️
Course Topper⚫️⚫️⚫️
Editorial Topper⚫️⚫️⚫️
Event Topper⚫️⚫️⚫️
Profile Topper⚫️⚫️⚫️
Search Topper⚫️

Blocks

Blocks are repeatable components used to create page content.

  • Accordion

    The Accordion component allows users to hide or reveal content.

  • CTA

    The CTA component displays one or more prominent links.

  • Event Schedule

    The Event Schedule component displays events in date order.

  • Events Tease

    The Events Tease component highlights two to six events.

  • Grid List

    The Grid List component displays multiple items of text in a visual grid.

  • Hero Statement

    The Hero Statement component features a large message with one or more links and a large accompanying image or video.

  • Hero Tease

    The Hero Tease component presents a large visual format to tease an HBS story or other editorial piece.

  • Hierarchical Tease

    The Hierarchical Tease component presents multiple HBS stories or other editorial pieces.

  • Media Asset Row

    The Media Asset Row component presents one to three media assets, such as images.

  • Media Carousel

    The Media Carousel component presents three or more media assets in a horizontally-advancing slideshow.

  • Multi-Feed Tease Row

    The Multi-Feed Tease Row component features multiple lists of articles, each with a title and CTA link for more.

  • Multiple Column List

    The Multiple Column List component displays a group of links under a common title and subtitle.

  • Section Intro Text

    The Section Intro Text component displays multi-column narrative text and optional image under an introduction.

  • Side-By-Side List

    The Side-By-Side List component displays a variety of links and numerical statistics in a column layout with titles and subtitles.

  • Statistics

    The Statistics component displays a list of numerical statistics with optional image and CTA link.

  • Supporting Details

    The Supporting Details component displays a list of related text items with accompanying image.

  • Table

    The Table component displays tabular data in a column-and-row grid layout.

  • Tease Carousel

    The Tease Carousel component highlights multiple links or stories in a color horizontally-scrolling layout.

  • Tease Feed

    The Tease Feed component lists articles, books, or events in a vertical scrolling layout.

  • Tease Row

    The Tease Row component lists articles, books, links, videos, or people in a horizontal layout.

  • Timeline Tease

    The Timeline Tease component displays events on a date or a range of dates.

  • Video Testimonial

    The Video Testimonial component highlights a quote with one to three accompanying videos.

Content Block Template Compatibility

ComponentArchive PageLanding PageDetail PageArticle Page
Accordion⚫️⚫️⚫️
CTA⚫️⚫️⚫️
Event Schedule⚫️⚫️⚫️
Events Tease⚫️
Grid List — Large⚫️
Grid List — Small⚫️⚫️⚫️
Hero Statement⚫️
Hero Tease⚫️
Hierarchical Tease⚫️
Media Asset Row⚫️⚫️⚫️
Media Carousel⚫️
Multi Feed Tease Row⚫️
Multiple Column List⚫️
Section Intro Text⚫️
Side-By-Side List⚫️
Statistics⚫️⚫️⚫️
Supporting Details⚫️
Table⚫️⚫️⚫️
Tease Carousel⚫️
Tease Feed⚫️⚫️⚫️⚫️
Tease Row⚫️⚫️⚫️
Timeline Tease⚫️⚫️⚫️
Video Testimonial⚫️⚫️⚫️

Content Block Alignment Options

ComponentCenterWideFull
Accordion⚫️⚫️⚫️
CTA⚫️⚫️⚫️
Event Schedule⚫️
Events Tease⚫️
Grid List — Large⚫️
Grid List — Small⚫️⚫️⚫️
Hero Statement⚫️
Hero Tease⚫️
Hierarchical Tease⚫️
Media Asset Row⚫️⚫️⚫️
Media Carousel⚫️
Multi Feed Tease Row⚫️
Multiple Column List⚫️
Section Intro Text⚫️
Side-By-Side List⚫️
Statistics⚫️⚫️⚫️
Supporting Details⚫️
Table⚫️⚫️⚫️
Tease Carousel⚫️
Tease Feed⚫️⚫️⚫️
Tease Row⚫️⚫️⚫️
Timeline Tease⚫️⚫️⚫️
Video Testimonial⚫️⚫️

Template-Specific Singletons

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

Article Singletons

  • Related People

    The Related People component provides information on people mentioned in an article.

  • Article Footer

    The Article Footer component provides a standard collection of article credits, keywords, and topic links.

Template CompatibilityArchive PageLanding PageDetail PageArticle Page
Article Footer⚫️
Related People⚫️⚫️

Primitives

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