⚠️ After March 18, 2024, the FastStore documentation will be migrated to the Developer Portal. For more information, access the official release note.

Hero

The Hero component is a full-width banner presented on the above-the-fold section of a web page. It serves as the first glimpse of your brand's identity and messaging.

The Hero component is a compound of the following:

  • HeroImage: wraps the Hero image.
  • HeroHeader: wraps the Hero textual content. It may contain a title, description, and a call-to-action button.

Import

Import the component from @faststore/ui

import { Hero, HeroImage, HeroHeader } from '@faststore/ui'

Import Styles into your FastStore project

To apply the styles of this component in your FastStore project, import the following into your stylesheet:

@import '@faststore/ui/src/components/organisms/Hero/styles.scss';

Follow the instructions in the Importing FastStore UI component styles tutorial.


Usage


Props

All hero-related components support all attributes also supported by the <div> tag. Besides those attributes, the following props are also supported:

Hero

NameTypeDescriptionDefault
variant"primary" | "secondary"Specifies the component variant.primary
colorVariant"main" | "light" | "accent"Specifies the component's color variant combination.main
testIdstringID to find this component in testing tools (e.g.: cypress, testing-library, and jest).fs-hero

Hero Image

NameTypeDescriptionDefault
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-hero-image

Hero Header

NameTypeDescriptionDefault
title*stringContent for the h1 tag.
subtitle*stringContent for the p tag.
iconstring | number | false | true | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortalIcon component for additional customization.
linkstringSpecifies the URL the action button goes to.
linkTextstringSpecifies the action button's content.
testIdstringID to find this component in testing tools (e.g.: cypress, testing library, and jest).fs-hero-heading
linkTargetBlankfalse | trueSpecify if the link opens in a new tab.

Design Tokens

Local tokenDefault value/Global token linked
--fs-hero-text-sizevar(--fs-text-size-lead)
--fs-hero-text-line-height1.33

Nested Elements

Image

Local tokenDefault value/Global token linked
--fs-hero-image-border-radius0

Title

Local tokenDefault value/Global token linked
--fs-hero-title-paddingvar(--fs-spacing-5) 0 var(--fs-spacing-6)
--fs-hero-title-weightvar(--fs-text-weight-black)
--fs-hero-title-line-height1.1

Subtitle

Local tokenDefault value/Global token linked
--fs-hero-subtitle-margin-top-mobilevar(--fs-spacing-2)
--fs-hero-subtitle-margin-top-tabletvar(--fs-spacing-4)
--fs-hero-subtitle-sizevar(--fs-hero-text-size)
--fs-hero-subtitle-line-heightvar(--fs-hero-text-line-height)

Hierarchy

Primary

Local tokenDefault value/Global token linked
--fs-hero-primary-image-height-mobile15rem
--fs-hero-primary-image-height-desktop29rem
--fs-hero-primary-title-sizevar(--fs-text-size-title-huge)

Secondary

Local tokenDefault value/Global token linked
--fs-hero-secondary-image-height-mobile11.25rem
--fs-hero-secondary-image-height-desktop14.188rem
--fs-hero-secondary-title-sizevar(--fs-text-size-title-page)

Variants

Main

Local tokenDefault value/Global token linked
--fs-hero-main-bkg-color
var(--fs-color-primary-bkg)
--fs-hero-main-text-color
var(--fs-color-primary-text)

Light

Local tokenDefault value/Global token linked
--fs-hero-light-bkg-color
var(--fs-color-secondary-bkg-light)
--fs-hero-light-text-color
var(--fs-color-text-display)

Accent

Local tokenDefault value/Global token linked
--fs-hero-accent-bkg-color
var(--fs-color-highlighted-bkg)
--fs-hero-accent-text-color
var(--fs-hero-light-text-color)

Use cases

Use the Hero component as the first element of your Home, brand, or collections pages.


Customization

data-fs-hero

data-fs-hero-image

data-fs-hero-heading

data-fs-hero-wrapper

data-fs-hero-title

data-fs-hero-subtitle

data-fs-hero-icon

data-fs-hero-heading

data-fs-hero-info

data-fs-hero-variant="primary" | "secondary"

data-fs-hero-color-variant="main" | "light" | "accent"


Best Practices

✅ Do's

Content

  • Draw a clear connection between the Hero image and text.
  • Ensure the copy is legible on the top of the imagery.
  • Keep your message clear and connected with your visuals.

Visual

  • Use strong contrasts to make call-to-action buttons stand out.
  • Follow your brand identity and guidelines. Remember that this is the first touchpoint shoppers will have with your brand.
  • Make your Hero component responsive.

Image

  • Use optimized images for your Hero image to avoid harming your website performance. Notice that if the Hero banners take too long to load, they may lose efficacy.
  • Use an eye-catching image that adds value to your page. Hero images have a significant impact on your brand perception, website traffic, and sales conversion rate.

❌ Don'ts

  • Don't exceed 2-3 lines for the Hero headline.
  • Don't use more than one Hero on a web page.
  • Don't use pixelated or blurry images.

Accessibility

  • Use an h1 or h2 heading level for the headline.
  • Choose a hero image with a strong point of focus.
  • Ensure high color contrast for text over images