Identity Guidelines

Web

Foundations

Foundations cover accessibility standards, the grid system, page templates, color themes, and recommended image aspect ratios.

Example Pages

Example pages demonstrate in-context component usage.

  • Archive Page

    Archive Pages list a series of posts, such as news stories.

  • Article Page

    Article Pages deliver any editorial piece of content, from a simple text-only announcement to magazine-style stories.

  • Detail Page

    Detail Pages deliver informational or text-heavy content rather than driving users to other pages.

  • Landing Page

    Landing Pages provide visitors with an overview of a key topic.

  • Editorial Landing Page

    Editorial Landing Pages provide an overview, and opportunity to tease articles, magazine-style stories, or other editorial content.

  • Event / Conference

    Specific Event / Conference example showing use of Event Topper.

  • 404 Error

    Standard page when visitors request a non-existent URL.

  • Course

    Specific Course example showing use of Course Topper.

  • Participant Story

    Specific Participant Story example showing use of Participant Story Topper.

  • People Listing

    Specific People Listing example showing use of Person Tease Primitive.

  • Profile

    Specific Profile example showing use of Profile Topper.

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

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.

Primitives

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

  • Archive Page Facets

    Multi-select checkboxes for faceted filtering

  • Archive Page Pagination

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

  • Arrow Button

    Button for progressing content forward or backward

  • Article Share Tools

    Standardized share tools for articles

  • Article Tease

    Standardized article tease link for use in article listings

  • Aside

    Sidebar content for pages and articles

  • Book Tease

    Standardized book tease link for use in listings

  • Breadcrumbs

    Navigation links for hierarchical page structures

  • Byline

    Standardized article byline

  • Component Header

    Standardized title for use in components

  • CTA

    Standardized Call to Action (CTA) link

  • Embed

    Embed media in components.

  • Event Feed Tease

    Standardized event tease link for use in event listings

  • Form

    Styled form elements

  • Head

    Standardized <head> element

  • Icon

    Standardized iconography component

  • Kaltura Embed

    Embed a Kaltura video in components.

  • Logo

    Standardized HBS logo

  • Media Asset

    Embed media in components.

  • Newsletter Signup

    Simple form example

  • Page Section

    Segment and subtitle page and component sections.

  • Participant Story Tease

    Standardized participant story tease link for use in components

  • Person Tease

    Standardized person tease link for use in components

  • Podcast Tease

    Standardized podcast tease link for use in components

  • Program Tease

    Standardized program tease link for use in components

  • Quote Tease

    Standardized quote tease link for use in components

  • Search Box

    Search form input element

  • Shimmer

    Standardized loading state for use in components

  • Sibling Page Navigation

    Navigation links for hierarchical page structures with peers

  • Social Media Links

    Standardized links to social media accounts

  • Social Media Tease

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

  • Tabs

    Collapse multiple panes of related content into one interactive group.

  • Timeline Event

    Standardized timeline event for use in the Timeline Tease component

  • Toast

    Standardized bottom pop-up for use on pages

  • Tooltip

    A simple tooltip component for exposing more information inline