Hero

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

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

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

HeroImage

HeroHeader

Design Tokens

Nested Elements

Image

Title

Subtitle

Hierarchy

Primary

Secondary

Variants

Main

Light

Accent

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