Agriculture Design System
Beta
Design System for the Export Service

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.

View in FigmaView in StorybookView in Github
import { ... } from '@ag.ds-next/react/hero-banner';

Hero banner

Open in Playroom, opens in a new tab
<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.

Open in Playroom, opens in a new tab
<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.

Open in Playroom, opens in a new tab
<HeroSubcategoryBanner>
	<Breadcrumbs
		links={[
			{ href: '#', label: 'Section 1' },
			{ href: '#', label: 'Category page' },
			{ label: 'Subcategory page' },
		]}
	/>
	<HeroSubcategoryBannerTitle>
		Subcategory banner title - xxl/display (H1)
	</HeroSubcategoryBannerTitle>
</HeroSubcategoryBanner>
Edit this page