Skip to main content

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​

Loading...

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-fs-hero

data-fs-hero-image

data-fs-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

Didn't find your answers? Ask the Community. For documentation suggestions, submit your feedback.

JOIN THE COMMUNITY