Intelligence Community Design System ICDS Get started Accessibility Styles Components Patterns Community
Show navigation section

Hero

Guidance Code Accessibility

Component demo

Interactive example

Explore Check out our new drinks
Web component React
StackBlitz
Show full code 
<ic-hero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
>
<ic-buttonvariant="primary"slot="interaction">Explore</ic-button>
<ic-buttonvariant="secondary"slot="interaction">
    Check out our new drinks
  </ic-button>
</ic-hero>

Hero details

Props

All components also accept native properties supported by the DOM, such asclassName and style .

Name Description Default
Property aligned
Attribute aligned

The alignment of the hero.

type: IcAlignment - "center" | "full-width" | "left" | undefined
"left"
Property backgroundImage
Attribute background-image

The optional background image.

type: string - string | undefined
Property contentAligned
Attribute content-aligned

The alignment of the hero content.

type: IcHeroContentAlignments - "center" | "left" | undefined
"left"
Property disableBackgroundParallax
Attribute disable-background-parallax

Iftrue , the background image (if set) will not scroll using a parallax effect.

type: boolean - boolean | undefined
false
Property heading
Attribute heading

The heading of the hero. An <h2> level heading.

type: string - string | undefined
Property secondaryHeading
Attribute secondary-heading

The optional secondary heading, an <h3> level heading. Replaced by slotted right content.

type: string - string | undefined
Property secondarySubheading
Attribute secondary-subheading

The optional secondary subheading, replaced by slotted right content.

type: string - string | undefined
Property size
Attribute size

The size of the hero component.

type: IcSizesNoLarge - "medium" | "small" | undefined
"medium"
Property subheading
Attribute subheading

The description for the hero.

type: string - string | undefined
Property aligned
Attribute aligned

The alignment of the hero.

type: IcAlignment - "center" | "full-width" | "left" | undefined
Default: "left"
Property backgroundImage
Attribute background-image

The optional background image.

type: string - string | undefined
Property contentAligned
Attribute content-aligned

The alignment of the hero content.

type: IcHeroContentAlignments - "center" | "left" | undefined
Default: "left"
Property disableBackgroundParallax
Attribute disable-background-parallax

Iftrue , the background image (if set) will not scroll using a parallax effect.

type: boolean - boolean | undefined
Default: false
Property heading
Attribute heading

The heading of the hero. An <h2> level heading.

type: string - string | undefined
Property secondaryHeading
Attribute secondary-heading

The optional secondary heading, an <h3> level heading. Replaced by slotted right content.

type: string - string | undefined
Property secondarySubheading
Attribute secondary-subheading

The optional secondary subheading, replaced by slotted right content.

type: string - string | undefined
Property size
Attribute size

The size of the hero component.

type: IcSizesNoLarge - "medium" | "small" | undefined
Default: "medium"
Property subheading
Attribute subheading

The description for the hero.

type: string - string | undefined

Slots

A slot allows for any type of element or markup to be passed into and rendered within a web component. This creates more flexibility than using a prop which must take a specific type of data.

Content can be slotted into a component by adding it as a top-level child of the component.

Slots can have a name to identify them. These specify which slot the content will be inserted into, and therefore where it will be rendered and how it will be used within the component. The name of the slot to be used can be specified by passing it via a slot attribute on the slotted content.

Read more about slots .


Name Description
Slot heading
Content will be rendered in the title area, in place of the heading.
Slot interaction
Content will be rendered in the interaction area, adjacent to the title area.
Slot secondary
Content will be rendered in the secondary content area.
Slot subheading
Content will be rendered in the title area, in place of the subheading.
Slot heading
Content will be rendered in the title area, in place of the heading.
Slot interaction
Content will be rendered in the interaction area, adjacent to the title area.
Slot secondary
Content will be rendered in the secondary content area.
Slot subheading
Content will be rendered in the title area, in place of the subheading.

Variants

Centre aligned

Interactive example

Explore Check out our new drinks
Web component React
StackBlitz
Show full code 
<ic-hero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
aligned="center"
>
<ic-buttonvariant="primary"slot="interaction">Explore</ic-button>
<ic-buttonvariant="secondary"slot="interaction">
    Check out our new drinks
  </ic-button>
</ic-hero>

Content centre aligned

Interactive example

Explore Check out our new drinks
Web component React
StackBlitz
Show full code 
<ic-hero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
aligned="center"
content-aligned="center"
>
<ic-buttonvariant="primary"slot="interaction">Explore</ic-button>
<ic-buttonvariant="secondary"slot="interaction">
    Check out our new drinks
  </ic-button>
</ic-hero>

Size small

Interactive example

Order now Submit new flavour
Web component React
StackBlitz
Show full code 
<ic-hero
heading="New coffee launches 14 September 2022"
subheading="Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary."
size="small"
>
<ic-buttonvariant="primary"slot="interaction"size="small">Order now</ic-button>
<ic-buttonvariant="secondary"slot="interaction"size="small">Submit new flavour</ic-button>
</ic-hero>

Interactive example

Web component React
StackBlitz
Show full code 
<ic-hero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
secondary-heading="The classics"
secondary-subheading="Try our original flavours."
>
<ic-search-bar
slot="interaction"
label="Search for coffee"
hide-label="true"
></ic-search-bar>
</ic-hero>

Card right content

Interactive example

Explore Check out our new drinks