Hero

Hero displays a full-width banner at the top of a webpage.

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


_10import { 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:


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

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

Usage

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Props

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

Hero

Name	Type	Description	Default
variant	`"primary" \| "secondary"`	Specifies the component variant.	`primary`
colorVariant	`"main" \| "light" \| "accent"`	Specifies the component's color variant combination.	`main`
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing-library, and jest).	`fs-hero`

Hero Image

Name	Type	Description	Default
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-hero-image`

Hero Header

Name	Type	Description	Default
title*	`string`	Content for the h1 tag.
subtitle*	`string`	Content for the p tag.
icon	`string \| number \| false \| true \| {} \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal`	Icon component for additional customization.
link	`string`	Specifies the URL the action button goes to.
linkText	`string`	Specifies the action button's content.
testId	`string`	ID to find this component in testing tools (e.g.: cypress, testing library, and jest).	`fs-hero-heading`
linkTargetBlank	`false \| true`	Specify if the link opens in a new tab.

Design Tokens

Local token	Default value/Global token linked
`--fs-hero-text-size`	`var(--fs-text-size-lead)`
`--fs-hero-text-line-height`	`1.33`

Nested Elements

Image

Local token	Default value/Global token linked
`--fs-hero-image-border-radius`	`0`

Title

Local token	Default value/Global token linked
`--fs-hero-title-padding`	`var(--fs-spacing-5) 0 var(--fs-spacing-6)`
`--fs-hero-title-weight`	`var(--fs-text-weight-black)`
`--fs-hero-title-line-height`	`1.1`

Subtitle

Local token	Default value/Global token linked
`--fs-hero-subtitle-margin-top-mobile`	`var(--fs-spacing-2)`
`--fs-hero-subtitle-margin-top-tablet`	`var(--fs-spacing-4)`
`--fs-hero-subtitle-size`	`var(--fs-hero-text-size)`
`--fs-hero-subtitle-line-height`	`var(--fs-hero-text-line-height)`

Hierarchy

Primary

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Local token	Default value/Global token linked
`--fs-hero-primary-image-height-mobile`	`15rem`
`--fs-hero-primary-image-height-desktop`	`29rem`
`--fs-hero-primary-title-size`	`var(--fs-text-size-title-huge)`

Secondary

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Local token	Default value/Global token linked
`--fs-hero-secondary-image-height-mobile`	`11.25rem`
`--fs-hero-secondary-image-height-desktop`	`14.188rem`
`--fs-hero-secondary-title-size`	`var(--fs-text-size-title-page)`

Variants

Main

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Local token	Default 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

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Local token	Default 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

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Local token	Default 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