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.
• HeroHeading: wraps the Hero textual content. It may contain a title, description, and a call-to-action button.

Import

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

Usage

React

Loading...

CSS

[data-store-hero] {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 20rem;
  background-color: #001947;
  color: #fff;
}

[data-hero-heading] {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2rem;
}

[data-hero-heading] h1 {
  font-size: 1.81rem;
  font-weight: bold;
  margin-bottom: 1.5rem;
}

[data-hero-heading] a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  margin-top: 2rem;
  min-width: 11.25rem;
  width: fit-content;
  color: #001947;
  border: 1px solid #171a1c;
  background-color: #fff;
}

[data-hero-image] {
  height: 100%;
  overflow: hidden;
}

@media only screen and (min-width: 769px) {
  [data-store-hero] {
    flex-direction: row-reverse;
  }
  [data-hero-heading] {
    padding: 0 4rem;
  }
  [data-hero-heading] h1 {
    font-size: 3rem;
  }
}

Use cases

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

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

HeroHeading

Customization

data-store-hero

data-store-hero-image

data-store-hero-heading

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