Hero

StableAccessible

Hero elements are used below the main navigation as the first content element. They can be used for different purposes, but most often, they shortly describe the page's role and offer the page's essential function as a call-to-action button.

Usage

Example

Hero without an image

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.

Principles

  • Hero is primarily intended only for landing pages. Do not use Hero, if the page has a side navigation.
  • Hero is highly recommended to be the first element below the main navigation.

Use the Hero component when you want to:

  • Lead the user quickly to the actual content of the service or page.
  • To make a visual impact.
  • Add emotion to the look and feel of the page.

Functionalities

  • Image: There are both with-image and without-an-image options for Hero. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it's on the sides, while on mobile, it's below. Validate this for all screen sizes.
  • Colour: The background colour is recommended to be the primary colour of the colour palette selected for the site.
  • Koro shapes: Choose from six koro shapes (basic, beat, calm, pulse, vibration, and wave), which can be positioned at the bottom or over the Hero image at a 45-degree angle. To learn more about Koro shapes and their customization, refer to HDS Koros documentation.
  • Title and introduction (required): The suitable total length of the title and introduction is circa 230 characters, including spaces. The intro ends with a period.
  • CTA: Buttons can also be added to the Hero component, and it is recommended to include, e.g. the most critical link of the page in the Hero component, if one is known. By default, use a button with a background colour (primary button style). On dark background colours, secondary button style can be used.
  • Arrow icon: Hero can contain an arrow icon on the bottom left corner to indicate there's more content. The arrow slightly overlaps both the Hero and the following content. Can be used on all Hero variants and the color can be changed in Hero's theme.

React subcomponents

Hero has two subcomponents: Hero.Title and Hero.Text

Hero.Title

Hero.Title is rendered as a <h1>. If hero is not the first element with a heading, then the heading level should be changed. The level can be set with the headingLevel property of the Hero.Title

Hero.Text

Hero.Text is rendered as a <p>.

Variations

Image left or right

Use when you want to support the title's message with an image. Don't use an image just for illustrative purposes.

Hero image on the right

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.

Image as a background

Use when you want to fill the background area with an image. Use an image that works when the title and intro container covers part of the image.

Hero image as a background

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.

Diagonal koro shape and image as a background

Use when you want to create a dynamic Hero layout on your page. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it's on the sides, while on mobile, it's below. Validate this for all screen sizes.

Hero with a diagonal koro shape

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.

Note: Hero with diagonal Koros adjusts its contents based on browser width. Preview here might might not scale correcly. View Hero with diagonal Koros example in Storybook.

Wide bottom image

Use when you want to emphasize the title and introduction text content over the image. Ensure the image adapts to various screen sizes to prevent clipping, especially with faces in the picture. On desktop, it's on the right side, while on mobile, it's below. Validate this for all screen sizes.

Hero image below the title

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.

No image

Use when you don't have a suitable image to support the title section's message – or in a situation – where you want to emphasize a visual piece of content right after the Hero component.

Hero without an image

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.

Arrow icon

Used to indicate there's more content to follow.

Hero with an arrow icon

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.

Additional information

Used for example to give photo credits.

Hero with photographer information

This is an introduction text. The length is circa two sentences. The suitable total length of the title and introduction is around 230 characters, including spaces. The intro ends with a period.