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.

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

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Usage

Import the component


_10import { Hero, HeroImage, HeroHeader } from "@faststore/ui";

Import styles

To apply styles, include the following in your stylesheet:


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

For details, see Importing FastStore UI component styles.

Examples

Variants

Primary

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Secondary

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Color variants

Light

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

Accent

Example

Code

Explore more about our amazing products

All the amazing products from the brands we partner with.

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

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

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

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

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

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)`

Data attributes

You can target and override Hero styles using the following data attributes:

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"

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`

HeroImage

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

HeroHeader

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.

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