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';

Usage

Hero banner components can be imported via the hero-banner entrypoint in the @ag.ds-next/react package.

For example:

import { ... } from '@ag.ds-next/react/hero-banner';

HeroBanner Props
Prop	Type	Description
background?	"body" \| "bodyAlt"Default: "bodyAlt"	The background of the component
children?	ReactNode
image?	ReactNode	The hero image

HeroBannerTitleContainer Props
Prop	Type	Description
children	ReactNode

HeroBannerTitle Props
Prop	Type	Description
children	ReactNode

HeroBannerSubtitle Props
Prop	Type	Description
children	ReactNode

HeroCategoryBanner Props
Prop	Type	Description
background?	"body" \| "bodyAlt"Default: "bodyAlt"	The background of the component
children?	ReactNode
image?	ReactNode	The hero image

HeroCategoryBannerTitle Props
Prop	Type	Description
children	ReactNode

HeroCategoryBannerSubtitle Props
Prop	Type	Description
children	ReactNode

HeroSubcategoryBanner Props
Prop	Type	Description
background?	"body" \| "bodyAlt"Default: "bodyAlt"	The background of the component
children?	ReactNode

HeroSubcategoryBannerTitle Props
Prop	Type	Description
children	ReactNode

You can view the full source code for this package on Github.