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.


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 Banner

    The CTA Banner 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 Group

    The Statistics Group 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 Banner⚫️⚫️⚫️
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 Group⚫️⚫️⚫️
Supporting Details⚫️
Table⚫️⚫️⚫️
Tease Carousel⚫️
Tease Feed⚫️⚫️⚫️⚫️
Tease Row⚫️⚫️⚫️
Timeline Tease⚫️⚫️⚫️
Video Testimonial⚫️⚫️⚫️

Content Block Alignment Options

ComponentCenterWideFull
Accordion⚫️⚫️⚫️
CTA Banner⚫️⚫️⚫️
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 Group⚫️⚫️⚫️
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⚫️⚫️

Image Aspect Ratios

Component-Specific Guidelines

Recommended aspect ratios for each component that allow image use are provided below.

Toppers

ComponentAspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
Card Topper16:9Fixed*
(*Images will auto-crop based on the limiting dimension—see next section for details)
Fixed*Scales down proportionately on mobile—does not crop.
Media Page Topper1 asset – 16:9

2 assets – 4:3 x 2

3 assets: 3:4, 4:3 & 3:4
1 asset – 16:9 Fixed

2 assets – 4:3 Fixed

3 assets – 3:4 Fixed;
4:3 Crops uniformly left and right
Fixed1 asset – Scales down proportionately on mobile—does not crop.

2 assets – Height is fixed; width will crop (uniformly left and right) on mobile.

3 assets – 3:4 images scale down proportionally – will not crop on mobile; 4:3 images height is fixed but width will crop (uniformly left and right) on mobile.
Split Page Topper4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.
Statistics Page Topper4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Photo will go to square or slightly vertical on tablet and revert to horizontal on phone.
Split Article Topper4:3 or 3:4Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Will appear horizontal on desktop, vertical on tablet, and square-ish to slightly vertical on phone.
Simple Article Topper4:3Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Big Art Topper16:9Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Profile Topper3:4
(See Notes)
Fixed*Fixed*3:4 image will always crop top and bottom to just short of square (remains slightly vertical).

Scales down proportionately on mobile—does not crop.
*Images will auto-crop based on the limiting dimension—see next section for details.

Blocks

ComponentAspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
CTA Banner1 asset – 16:9

2 assets (mismatched heights) – 3:4 & 4:3

2 assets (same heights) – 3:4 x 2

3 assets – 3:4 x 3
1 asset – 16:9 Fixed (Photo); 16:9 Not Fixed (Video)*

2 assets (mismatched heights) – Fixed*

2 assets (equal heights) – 3:4 (See Notes)

3 assets – 3:4 Crops uniformly left and right
1 asset- 16:9 Fixed*

2 assets (mismatched heights) – Fixed*

2 assets (equal heights) – 3:4 (See Notes)

3 assets (See Notes)
1 asset – Scales down proportionately on mobile—does not crop.

2 assets (mismatched heights) – Scales down proportionately on mobile—does not crop.

2 assets (equal heights) – As width first narrows, height is fixed and images crop left and right equally.

At ~narrow tablet width, breaks to one (first) image and width is fixed and crops uniformly top and bottom.

3 assets – As width first narrows, height is fixed and images crop left and right equally.

At ~tablet width, breaks to (first) two images: height is fixed and width crops uniformly left and right (slightly more width shows on left and right of images than in 3 image view.)

At ~narrow tablet width, breaks to one (first) image: crops all sides – left and right uniformly; top and bottom uniformly.
Events Tease3:4Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Grid List – Large3:4N/AN/AScales proportionally down to tablet. No image on phone view.
Hero Statement16:9Fixed* (left and right sides will be cropped off of 16:9 image; part of image that shows is ~3:2)Fixed*Left and right sides of a 16:9 image will always be cropped off (actual proportion is ~3:2).

Text block covers increasing amount of lower-left section of image as browser width decreases.
Hero Tease16:9 (~3:2 viewable)Fixed* (left and right sides will be cropped off of 16:9 image; part of image that shows is ~3:2)Fixed*Left and right sides of a 16:9 image will always be cropped off (actual proportion is ~3:2).

Text block covers increasing amount of lower-left section of image as browser width decreases.
Hierarchical Tease16:9Fixed* (left and right sides will always be cropped off slightly on 16:9 image)Fixed*Left and right sides will always be cropped off slightly on 16:9 image.

Scales down proportionately on mobile.
Media Asset Row4:3 (~3:2 viewable)Fixed*Fixed* (top and bottom will always be cropped off slightly on 4:3 image)Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Scales down proportionally on mobile.
Media Carousel4:3 or 16:9Fixed*Fixed*Scales down proportionally on mobile. Video can use standard 16:9 thumbnail.
Multiple Column List4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Image goes from horizontal to vertical appearance at narrow widths.
Section Intro Text3:4 or 4:3 (3:4 more ideal)Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Statistics Group4:3Crops uniformly left and rightFixedHeight is fixed; width will crop (uniformly left and right) on mobile.

Image goes from horizontal to vertical appearance on phone.
Supporting Details3:4 or 4:3 (3:4 more ideal)Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Tease Feed4:3 (~3:2 viewable)Fixed*Fixed*

Top and bottom will always be cropped off slightly on 16:9 image (actual viewable area is ~3:2).
Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Scales down proportionately on mobile—does not crop.
Tease Row – Article4:3 (~3:2 viewable)Fixed*Fixed*

Top and bottom will always be cropped off slightly on 16:9 image (actual viewable area is ~3:2).
Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Scales down proportionately on mobile—does not crop.
Tease Row – Content4:3 (~3:2 viewable)

16:9 video
Fixed*Fixed*

Top and bottom will always be cropped off slightly on 16:9 image (actual viewable area is ~3:2).
Top and bottom will always be cropped off slightly on 4:3 image (actual viewable area is ~3:2).

Left and right will always be cropped off slightly on 16:9 image.

Scales down proportionately on mobile—does not crop.
Tease Row – Person1:1Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Tease Row – BookUse original book cover aspect ratio for images.Fixed*Fixed*Scales down proportionately on mobile—does not crop.
Timeline Tease4:3
(1800 x 1350 px)

1:1
(1060 x 1060 px)

16:9 (video)
(1920 x 1080)
Fixed*Fixed*Scales down proportionately on mobile – does not crop.
Video Testimonial16:9Crops very slightly left and right (uniformly).FixedHeight is fixed. Width crops very slightly (uniformly) as browser narrows.
*Images will auto-crop based on the limiting dimension—see next section for details.

Template-Specific Singletons

ComponentAspect Ratio (recommended)Width (proportional)Height (proportional)Scaling Behavior
Related People1:1Fixed*Fixed*Crops to circular frame.
*Images will auto-crop based on the limiting dimension—see next section for details.

How Photos Auto-Crop in Fixed Proportion Footprints

In fixed proportion image footprints (i.e., both width and height scale down proportionally on mobile), the posted image will be auto-cropped based on the limiting dimension:

Graphic shows how portrait and landscape images auto-crop based on limiting dimension in fixed proportion image footprints on mobile