Blocks - HBS Identity Guidelines | HBS Identity Guidelines

Blocks are repeatable components used to create page content. Browse content by block types, view component compatibility, or view alignment options

Block Types

Article Tease Row

Lists articles in a row
Article Tease Feed

Lists articles in a feed
Hero Tease

Presents a large visual format to tease an HBS story or other editorial piece.
Hierarchical Tease

Presents multiple HBS stories or other editorial pieces.
Multi-Feed Tease Row

Features multiple lists of articles, each with a title and CTA link for more.
Tease Carousel

Highlights multiple links or stories in a color horizontally-scrolling layout.

Alphanumeric Link List

Displays a links organized in an alphanumeric list
Small Grid List

Displays multiple items of text in a visual grid.
Big Grid List

Displays multiple items of text in a visual grid w/ image.
Multiple Column List

Displays a group of links under a common title and subtitle.
Side-By-Side List

Displays a variety of links and numerical statistics in a column layout with titles and subtitles.
Supporting Details

Displays a list of related text items with accompanying image.
Timeline Feed

Displays a list of dates in a feed

Data Visualization Embed

Displays a Datawrapper embed
Kaltura Video Tease Row

Displays a row of Kaltura teases
Media Carousel

Presents three or more media assets in a horizontally-advancing slideshow.
Media Asset Row

Presents one to three media assets, such as images.
Podcast Player

Embeds podcast audio on a page.

People Listing

Displays a feed of people with or without bios using the Person Tease primitive.
People Tease Row

Displays a small row of people teases
Participant Story Tease Row

Displays a larger row of people teases

Pull Quote

Highlights an excerpt or quote with optional attribution.
Quote Carousel

Displays quotes in a carousel
Quote Tease Row

Displays quotes in a row
Quote Testimonial

Highlights a quote with one to three accompanying media assets.

Statistics Group

Displays a list of numerical statistics with optional image and CTA link.
Statistics Row

Displays a list of numerical statistics on cards.

Rich Text

Displays a single-column narrative text with rich formatting options and optional embedded images.
Multi-Column Rich Text

Displays a two-column narrative text with rich formatting options.
Side-By-Side Section Intro

Adds a title along side compatible blocks
Section Intro Text

Displays multi-column narrative text and optional image under an introduction.
Table

Displays tabular data in a column-and-row grid layout.
Text Callout

Highlights one or more pieces of information on a page.

Accordion

Allows users to hide or reveal simple text content. This is ideal for things like FAQs.
Truncator

Allows users to hide or reveal additional content components. This is useful for reducing cognitive load for large sections of content.

Component	Archive Page	Landing Page	Detail Page	Article Page
Accordion		⚫️	⚫️	⚫️
CTA Banner		⚫️	⚫️	⚫️
Event Schedule		⚫️	⚫️	⚫️
Events Tease		⚫️	⚫️	⚫️
Grid List — Big		⚫️	⚫️	⚫️
Grid List — Small		⚫️	⚫️	⚫️
Hero Statement		⚫️
Hero Tease		⚫️
Hierarchical Tease		⚫️
Media Asset Row		⚫️	⚫️	⚫️
Media Carousel		⚫️
Multi-Column Rich Text		⚫️	⚫️	⚫️
Multi Feed Tease Row		⚫️
Multiple Column List		⚫️	⚫️	⚫️
People Listing		⚫️	⚫️
Podcast Player		⚫️	⚫️	⚫️
Pull Quote		⚫️	⚫️	⚫️
Quote Testimonial		⚫️	⚫️	⚫️
Rich Text		⚫️	⚫️	⚫️
Section Intro Text		⚫️
Side-By-Side List		⚫️
Side-By-Side Section Intro		⚫️
Statistics Group		⚫️	⚫️	⚫️
Statistics Row		⚫️	⚫️	⚫️
Supporting Details		⚫️
Table		⚫️	⚫️	⚫️
Tease Carousel		⚫️
Tease Feed	⚫️	⚫️	⚫️	⚫️
Tease Row		⚫️	⚫️	⚫️
Text Callout		⚫️	⚫️	⚫️
Timeline Tease		⚫️	⚫️	⚫️
Truncator		⚫️	⚫️	⚫️

Component	Center	Wide	Full
Accordion	⚫️	⚫️	⚫️
CTA Banner	⚫️	⚫️	⚫️
Event Schedule		⚫️
Events Tease	⚫️	⚫️	⚫️
Grid List — Big		⚫️	⚫️
Grid List — Small	⚫️	⚫️	⚫️
Hero Statement			⚫️
Hero Tease			⚫️
Hierarchical Tease			⚫️
Media Asset Row	⚫️	⚫️	⚫️
Media Carousel			⚫️
Multi-Column Rich Text		⚫️	⚫️
Multi Feed Tease Row			⚫️
Multiple Column List	⚫️	⚫️	⚫️
People Listing		⚫️	⚫️
Podcast Player	⚫️	⚫️	⚫️
Pull Quote	⚫️	⚫️	⚫️
Quote Testimonial	⚫️	⚫️
Rich Text	⚫️
Section Intro Text			⚫️
Side-By-Side List			⚫️
Side-By-Side Section Intro			⚫️
Statistics Group	⚫️	⚫️	⚫️
Statistics Row	⚫️	⚫️	⚫️
Supporting Details			⚫️
Table	⚫️	⚫️	⚫️
Tease Carousel			⚫️
Tease Feed	⚫️	⚫️	⚫️
Tease Row	⚫️	⚫️	⚫️
Text Callout	⚫️	⚫️	⚫️
Timeline Tease	⚫️	⚫️	⚫️
Truncator	⚫️	⚫️	⚫️