Components

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

Content Components are used by content creators to build pages.

Primitives are elemental components combined to create compound components.

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

The Local Primary Navigation provides hierarchical intra-site navigation.

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

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

Page toppers are required to start pages.

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

Template toppers are required to start pages with specific templates.

The Accordion component allows users to hide or reveal content.

The CTA Banner component displays one or more prominent links.

The Event Schedule component displays events in date order.

The Events Tease component highlights two to six events.

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

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

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

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

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

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

The Multi-Column Rich Text component displays a two-column narrative text with rich formatting options.

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

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

The People Listing component displays a list of people with or without bios using the Person Tease primitive.

The Podcast Player component is used to embed podcast audio on a page.

The Pull Quote component highlights an excerpt or quote with optional attribution.

The Quote Testimonial component highlights a quote with one to three accompanying media assets.

The Rich Text component displays a single-column narrative text with rich formatting options and optional embedded images.

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

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

The Side-By-Side Section Intro component displays a title, narrative text, optional subtitle, and optional order number.

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

The Statistics Row component displays a list of numerical statistics on cards.

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

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

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

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

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

The Text Callout component highlights one or more pieces of information on a page.

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

The Truncator component allows users to reveal or hide content. This is useful for reducing cognitive load for large sections of content.

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

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

Multi-select checkboxes for faceted filtering

Numbered links to break up long lists of entries across multiple pages

Button for progressing content forward or backward

Standardized share tools for articles

Standardized article tease link for use in article listings

Sidebar content for pages and articles

Standardized book tease link for use in listings

Navigation links for hierarchical page structures

Standardized article byline

Standardized title for use in components

Standardized Call to Action (CTA) link

Embed media in components.

Standardized event tease link for use in event listings

Styled form elements

Standardized <head> element

Standardized iconography component

Embed a Kaltura video in components.

Standardized HBS logo

Embed media in components.

Simple form example

Segment and subtitle page and component sections.

Standardized participant story tease link for use in components

Standardized person tease link for use in components

Standardized podcast tease link for use in components

Standardized program tease link for use in components

Standardized quote tease link for use in components

Search form input element

Standardized loading state for use in components

Navigation links for hierarchical page structures with peers

Standardized links to social media accounts

Standardized social media tease link for use in social media directory listings

Collapse multiple panes of related content into one interactive group.

Standardized timeline event for use in the Timeline Tease component

Standardized bottom pop-up for use on pages

A simple tooltip component for exposing more information inline