Morningstar Logo
Morningstar Design

Hero

This hero will start every family brand page in the top-most section. It appears directly under the navigation bars.

Anatomy

The hero is made up of five items.

Primary Hero anatomy
  1. Title sets the topic for the hero and the content of the page.
  2. Body text gives context about the main topic of the page.
  3. Image enforces the content of the hero. Depending on the hero variation, it can be boxed in a slot or a full-bleed background image.
  4. Background
  5. CTAs: Enforces the desired user action. CTAs are optional. There could be no CTA, only a primary CTA, a primary and a secondary CTA, or a primary, a secondary and a tertiary CTA.

Usage

When to Use

Use a primary hero on family brand pages to hook the users and give them a positive first impression of the page’s content, making them scroll to explore more.

When Not to Use

Don’t use a primary hero on general pages or social pages where there is a variety of content for the user to choose from, such as blog posts or research pages. Use a general hero or a section with a text block instead.

Variants

There are two variations of the hero, based on its image: full-bleed or boxed. Both can be adapted to the four breakpoints. The image should be set to fill and anchored to the top-right corner.

Primary hero: Boxed variant
Primary Hero: Full bleed variant
Variation
Purpose
Image
Background
Icon
CTA

Primary

Use for family brand pages when the image has a lot of details, gives more context, and communicates more information.

Boxed

Solid color

No icon

No CTAs; a primary, a primary and a secondary; a primary, a secondary and a tertiary

Primary - full bleed

Use for family brand pages when the image is textural, has most of its details at the right, or works as a visual hook.

Full-bleed

Full-bleed image

No icon

No CTAs; a primary, a primary and a secondary; a primary, a secondary and a tertiary

Image

The background image and boxed images will take the height of the hero or the assigned slot.

Primary hero image types

Container

Spacing

Ensure that proper space is given between each item in the container.

Spacing of the primary hero boxed variant for the XL breakpoint
Primary: XL
Spacing of the Primary hero boxed variant for the LG breakpoint
Primary: LG
Spacing of the Primary hero boxed variant for the MD breakpoint
Primary: MD
Spacing of the Primary hero boxed variant for the SM breakpoint
Primary: SM
Spacing of the Primary-full bleed hero variant for the XL breakpoint
Primary-full bleed: XL
Spacing of the Primary-full bleed variant for the LG and MD breakpoint
Primary-full bleed : LG
Spacing of the Primary-full bleed variant for the SM breakpoint
Primary-full bleed: MD
Spacing of the Primary-full bleed variant for the SM breakpoint
Primary-full bleed: SM

Hierarchy

A proper hierarchy must be ensured for the elements that compose the primary hero. The title, with first the highest level of importance, needs to give a clear and short idea of the topic of the page. Keep in mind that the optional CTAs will go below the body text.

Alignment

The alignment of components to the hero container or content at the same level of the page should follow a left-justified pattern. For this variant, the body will align to the bottom of the container. For the SM viewports, the CTAs will take the width of the page, and the image will adjust at the bottom of the hero, taking the width of the page as well.

Primary hero text alignment
Primary hero items alignment in the container
Primary hero items alignment in the container
Primary hero right alignment of elements at the compact version

Do adjust the image at the bottom of the hero, taking the width of the view port when reaching compact sizes.

Primary hero wrong alignment of elements at the compact version

Don’t adjust the image at the top of the hero when reaching compact sizes.

Sizing

The hero will adjust to the viewport sizes. The image will keep the height of the section between the viewport sizes.

Primary

Primary hero boxed variant sizing guidelines

Primary-Full Bleed

Primary hero full bleed variant sizing guidelines

Themes

Primary

Primary Hero on the dark theme
Boxed image on dark theme
Primary variation on the mid theme
Primary on mid theme
Primary Hero on the light theme
Primary on light theme

Full-Bleed Image

Primary-full bleed hero variation on the dark theme
Primary-full bleed hero on dark theme
Primary-full bleed hero variation on the mid theme
Primary-full bleed hero on mid theme
Primary-full bleed hero variation on the light theme
Primary-full bleed hero on light theme

Form

Form Errors

Hero

Secondary Hero

Morningstar Design provides a shared language and approach for building empowering, on-brand experiences for investors. Reach out for support if you have any questions.

©2025 Morningstar, Inc. All rights reserved. Terms of use