Hero - Intelligence Community Design System

Skip to page content

Show navigation section

Component demo

Interactive example

Explore

Check out our new drinks

Web component

React

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>

<IcHero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
>
<IcButtonvariant="primary"slot="interaction">
    Explore
</IcButton>
<IcButtonvariant="secondary"slot="interaction">
    Check out our new drinks
  </IcButton>
</IcHero>

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	If`true` , 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.

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.

Variants

Centre aligned

Interactive example

Explore

Check out our new drinks

Web component

React

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>

<IcHero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
aligned="center"
class={classes.hero}
>
<IcButtonvariant="primary"slot="interaction">
    Explore
</IcButton>
<IcButtonvariant="secondary"slot="interaction">
    Check out our new drinks
  </IcButton>
</IcHero>

Content centre aligned

Interactive example

Explore

Check out our new drinks

Web component

React

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>

<IcHero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
aligned="center"
contentAligned="center"
class={classes.hero}
>
<IcButtonvariant="primary"slot="interaction">
    Explore
</IcButton>
<IcButtonvariant="secondary"slot="interaction">
    Check out our new drinks
  </IcButton>
</IcHero>

Size small

Interactive example

Order now

Submit new flavour

Web component

React

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>

<IcHero
heading="New coffee launches 14 September 2022"
subheading="Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary."
size="small"
class={classes.hero}
>
<IcButtonvariant="primary"slot="interaction"size="small">
    Order now
</IcButton>
<IcButtonvariant="secondary"slot="interaction"size="small">
    Submit new flavour
  </IcButton>
</IcHero>

Secondary heading and search

Interactive example

Web component

React

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>

<IcHero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
secondaryHeading="The classics"
secondarySubheading="Try our original flavours."
class={classes.hero}
>
<IcSearchBarslot="interaction"label="Search for coffee"hideLabel/>
</IcHero>

Card right content

Interactive example

Explore

Check out our new drinks

Web component

React

Show full code

<ic-hero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
card-heading="Out now"
card-message="Try our new strawberry infused tea."
aligned="full-width"
>
<ic-buttonvariant="primary"slot="interaction">Explore</ic-button>
<ic-buttonvariant="secondary"slot="interaction">Check out our new drinks</ic-button>
<ic-card-vertical
heading="Out now"
message="Try our new strawberry infused tea."
slot="secondary"
class="hero-card"
></ic-card-vertical>
</ic-hero>

<IcHero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
cardHeading="Out now"
cardMessage="Try our new strawberry infused tea."
aligned="full-width"
class={classes.hero}
>
<IcButtonvariant="primary"slot="interaction">Explore</IcButton>
<IcButtonvariant="secondary"slot="interaction">Check out our new drinks</IcButton>
<IcCardVertical
heading="Out now"
message="Try our new strawberry infused tea."
slot="secondary"
className={classes.heroCard}
/>
</IcHero>

Image right content

Interactive example

Explore

Check out our new drinks

Web component

React

Show full code

<ic-hero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
aligned="full-width"
>
<ic-buttonvariant="primary"slot="interaction">Explore</ic-button>
<ic-buttonvariant="secondary"slot="interaction">Check out our new drinks</ic-button>
<svg
slot="secondary"
class="card-image"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<rectfill="#ff7700"width="1600"height="900"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</svg>
</ic-hero>

<IcHero
heading="Everything I brew, I brew it for you"
subheading="This news is hot off the French press."
aligned="full-width"
class={classes.hero}
>
<IcButtonvariant="primary"slot="interaction">Explore</IcButton>
<IcButtonvariant="secondary"slot="interaction">Check out our new drinks</IcButton>
<SlottedSVG
slot="secondary"
className={classes.cardImage}
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 1600 900"
>
<rectfill="#ff7700"width="1600"height="900"/>
<polygonfill="#cc0000"points="957 450 539 900 1396 900"/>
<polygonfill="#aa0000"points="957 450 872.9 900 1396 900"/>
<polygonfill="#c50022"points="-60 900 398 662 816 900"/>
<polygonfill="#a3001b"points="337 900 398 662 816 900"/>
<polygonfill="#be0044"points="1203 546 1552 900 876 900"/>
<polygonfill="#9c0036"points="1203 546 1552 900 1162 900"/>
<polygonfill="#b80066"points="641 695 886 900 367 900"/>
<polygonfill="#960052"points="587 900 641 695 886 900"/>
<polygonfill="#b10088"points="1710 900 1401 632 1096 900"/>
<polygonfill="#8f006d"points="1710 900 1401 632 1365 900"/>
<polygonfill="#aa00aa"points="1210 900 971 687 725 900"/>
<polygonfill="#880088"points="943 900 1210 900 971 687"/>
</SlottedSVG>
</IcHero>

Last reviewed 31 May 2024 .