Hero

Skip to page content

BETA

Component demo

Interactive example

Everything I brew, I brew it for you

This news is hot off the French press.

Web component

React

<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"	"left"
Property backgroundImage Attribute background-image	The optional background image. type: string
Property contentAligned Attribute content-aligned	The alignment of the hero content. type: IcHeroContentAlignments - "center" \| "left"	"left"
Property disableBackgroundParallax Attribute disable-background-parallax	If`true` , the background image (if set) will not scroll using a parallax effect. type: boolean	false
Property heading Attribute heading	The heading of the hero. type: string
Property secondaryHeading Attribute secondary-heading	The optional secondary heading, replaced by slotted right content. type: string
Property secondarySubheading Attribute secondary-subheading	The optional secondary subheading, replaced by slotted right content. type: string
Property size Attribute size	The size of the hero component. type: IcSizesNoLarge - "default" \| "small"	"default"
Property small Attribute small	This prop should not be used anymore. Set prop `size` to "small" instead. Deprecated	false
Property subheading Attribute subheading	The description for the hero. type: string

Property

aligned

Attribute

aligned

The alignment of the hero.

type: IcAlignment - "center" | "full-width" | "left"

Default: "left"

Property

backgroundImage

Attribute

background-image

The optional background image.

type: string

Property

contentAligned

Attribute

content-aligned

The alignment of the hero content.

type: IcHeroContentAlignments - "center" | "left"

Default: "left"

Property

disableBackgroundParallax

Attribute

disable-background-parallax

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

type: boolean

Default: false

Property

heading

Attribute

heading

The heading of the hero.

type: string

Property

secondaryHeading

Attribute

secondary-heading

The optional secondary heading, replaced by slotted right content.

type: string

Property

secondarySubheading

Attribute

secondary-subheading

The optional secondary subheading, replaced by slotted right content.

type: string

Property

size

Attribute

size

The size of the hero component.

type: IcSizesNoLarge - "default" | "small"

Default: "default"

Property

small

Attribute

small

This prop should not be used anymore. Set prop `size` to "small" instead.

Deprecated

Default: false

Property

subheading

Attribute

subheading

The description for the hero.

type: string

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

Everything I brew, I brew it for you

This news is hot off the French press.

Web component

React

<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

Everything I brew, I brew it for you

This news is hot off the French press.

Web component

React

<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

New coffee launches 14 September 2022

Brand new flavours now available! Irresistible. Caramel. Decadence. Sugary.

Web component

React

<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

Everything I brew, I brew it for you

This news is hot off the French press.

The classics

Try our original flavours.

Web component

React

<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

Everything I brew, I brew it for you

This news is hot off the French press.

Out now

Try our new strawberry infused tea.

Web component

React

<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
heading="Out now"
message="Try our new strawberry infused tea."
slot="secondary"
class="hero-card"
></ic-card>
</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>
<IcCard
heading="Out now"
message="Try our new strawberry infused tea."
slot="secondary"
className={classes.heroCard}
/>
</IcHero>

Image right content

Interactive example

Everything I brew, I brew it for you

This news is hot off the French press.

Web component

React

<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 .