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
| 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
| 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) |
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
h1orh2heading level for the headline. - Choose a hero image with a strong point of focus.
- Ensure high color contrast for text over images