Hero banner
The hero banner sits at the top of the page under the Main nav and is used to grab a user’s attention.
import { ... } from '@ag.ds-next/react/hero-banner';
Hero banner
<HeroBanner image={ <img src="/img/placeholder/hero-banner.jpeg" role="presentation" alt="" /> } > <HeroBannerTitleContainer> <HeroBannerTitle> Website hero banner title - xxxl/display (H1) </HeroBannerTitle> <HeroBannerSubtitle> Short hero banner sentence - md/default (P) </HeroBannerSubtitle> </HeroBannerTitleContainer> <SearchBox onSubmit={() => {}}> <SearchBoxInput label="Search this website" /> <SearchBoxButton iconOnly={{ xs: true, md: false }}>Search</SearchBoxButton> </SearchBox> </HeroBanner>
Use the HeroBanner
components on home or landing pages.
Do
- select an appropriate image
- adhere to brand guidelines
- use category and subcategory banners
- use search and button group properties
- use to introduce a new section or category
- write concise and short description lengths.
Don’t
- use on lower-level pages
Image selection
Images in this component are automatically resized to fit their container using the object-fit
CSS property. Because of this it is important to use images of an appropriate image ratio. You can reference the image size and ratio of our example image.
Hero category banner
Use the HeroCategoryBanner
components for top level category pages.
<HeroCategoryBanner image={ <img src="/img/placeholder/hero-banner.jpeg" role="presentation" alt="" /> } > <HeroCategoryBannerTitle> Website hero banner title - xxl/display (H1) </HeroCategoryBannerTitle> <HeroCategoryBannerSubtitle> Hero banner sub title (P). </HeroCategoryBannerSubtitle> </HeroCategoryBanner>
Hero subcategory banner
Use the HeroSubcategoryBanner
components pages within a category.
<HeroSubcategoryBanner> <Breadcrumbs links={[ { href: '#', label: 'Section 1' }, { href: '#', label: 'Category page' }, { label: 'Subcategory page' }, ]} /> <HeroSubcategoryBannerTitle> Subcategory banner title - xxl/display (H1) </HeroSubcategoryBannerTitle> </HeroSubcategoryBanner>