Hero
Hero
Component demo
Interactive example
Everything I brew, I brew it for you
<ic-heroheading="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>
<IcHeroheading="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
.
|
|
|
---|---|---|
|
The alignment of the hero. |
|
|
The optional background image. |
|
|
The alignment of the hero content. |
|
|
If |
|
|
The heading of the hero. An <h2> level heading. |
|
|
The optional secondary heading, an <h3> level heading. Replaced by slotted right content. |
|
|
The optional secondary subheading, replaced by slotted right content. |
|
|
The size of the hero component. |
|
|
The description for the hero. |
|
The alignment of the hero. |
The optional background image. |
The alignment of the hero content. |
If |
The heading of the hero. An <h2> level heading. |
The optional secondary heading, an <h3> level heading. Replaced by slotted right content. |
The optional secondary subheading, replaced by slotted right content. |
The size of the hero component. |
The description for the hero. |
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.
|
|
---|---|
|
|
|
|
|
|
|
|
|
|
|
|
Variants
Centre aligned
Interactive example
Everything I brew, I brew it for you
<ic-heroheading="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>
<IcHeroheading="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
<ic-heroheading="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>
<IcHeroheading="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
<ic-heroheading="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>
<IcHeroheading="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
The classics
<ic-heroheading="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-barslot="interaction"label="Search for coffee"hide-label="true"></ic-search-bar></ic-hero>
<IcHeroheading="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
Out now
<ic-heroheading="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-verticalheading="Out now"message="Try our new strawberry infused tea."slot="secondary"class="hero-card"></ic-card-vertical></ic-hero>
<IcHeroheading="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><IcCardVerticalheading="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
<ic-heroheading="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><svgslot="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>
<IcHeroheading="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><SlottedSVGslot="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>