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 Compatibility | Archive Page | Landing Page | Detail Page | Article 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
| Component | Archive Page | Landing Page | Detail Page | Article 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
| Component | Center | Wide | Full |
|---|---|---|---|
| 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 Compatibility | Archive Page | Landing Page | Detail Page | Article 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
| Component | Aspect Ratio (recommended) | Width (proportional) | Height (proportional) | Scaling Behavior |
|---|---|---|---|---|
| Card Topper | 16:9 | Fixed* (*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 Topper | 1 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 | Fixed | 1 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 Topper | 4:3 | Crops uniformly left and right | Fixed | Height is fixed; width will crop (uniformly left and right) on mobile. |
| Statistics Page Topper | 4:3 | Crops uniformly left and right | Fixed | Height 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 Topper | 4:3 or 3:4 | Crops uniformly left and right | Fixed | Height 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 Topper | 4:3 | Fixed* | Fixed* | Scales down proportionately on mobile—does not crop. |
| Big Art Topper | 16:9 | Fixed* | Fixed* | Scales down proportionately on mobile—does not crop. |
| Profile Topper | 3: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. |
Blocks
| Component | Aspect Ratio (recommended) | Width (proportional) | Height (proportional) | Scaling Behavior |
|---|---|---|---|---|
| CTA | 1 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 Tease | 3:4 | Fixed* | Fixed* | Scales down proportionately on mobile—does not crop. |
| Grid List – Large | 3:4 | N/A | N/A | Scales proportionally down to tablet. No image on phone view. |
| Hero Statement | 16:9 | 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. |
| Hero Tease | 16: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 Tease | 16:9 | Fixed* (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 Row | 4: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 Carousel | 4:3 or 16:9 | Fixed* | Fixed* | Scales down proportionally on mobile. Video can use standard 16:9 thumbnail. |
| Multiple Column List | 4:3 | Crops uniformly left and right | Fixed | Height is fixed; width will crop (uniformly left and right) on mobile. Image goes from horizontal to vertical appearance at narrow widths. |
| Section Intro Text | 3:4 or 4:3 (3:4 more ideal) | Fixed* | Fixed* | Scales down proportionately on mobile—does not crop. |
| Statistics Block | 4:3 | Crops uniformly left and right | Fixed | Height is fixed; width will crop (uniformly left and right) on mobile. Image goes from horizontal to vertical appearance on phone. |
| Supporting Details | 3:4 or 4:3 (3:4 more ideal) | Fixed* | Fixed* | Scales down proportionately on mobile—does not crop. |
| Tease Feed | 4: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 – Article | 4: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 – Content | 4: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 – Person | 1:1 | Fixed* | Fixed* | Scales down proportionately on mobile—does not crop. |
| Tease Row – Book | Use original book cover aspect ratio for images. | Fixed* | Fixed* | Scales down proportionately on mobile—does not crop. |
| Timeline Tease | 4: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 Testimonial | 16:9 | Crops very slightly left and right (uniformly). | Fixed | Height is fixed. Width crops very slightly (uniformly) as browser narrows. |
Template-Specific Singletons
| Component | Aspect Ratio (recommended) | Width (proportional) | Height (proportional) | Scaling Behavior |
|---|---|---|---|---|
| Related People | 1:1 | Fixed* | Fixed* | Crops to circular frame. |
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:
