Skip to main content

Site Hero

The <SiteHero> component is used to define the header banner and title of each page. You can configure it by passing the following properties: a title, a description, and a banner type.

Different banner types than can be used with <SiteHero> component:

ada

<SiteHero
  title="Hello Ada"
  description="This is just an example how easy it is to change the site heros."
  bannerType="ada" />

Hello Ada

This is just an example how easy it is to change the site heros.

dots

<SiteHero
  title="Hello Dots"
  description="This is just an example how easy it is to change the site heros."
  bannerType="dots" />

Hello Dots

This is just an example how easy it is to change the site heros.

fluid

<SiteHero
  title="Hello Fluid"
  description="This is just an example how easy it is to change the site heros."
  bannerType="fluid" />

Hello Fluid

This is just an example how easy it is to change the site heros.

overlap

<SiteHero
  title="Hello Overlap"
  description="This is just an example how easy it is to change the site heros."
  bannerType="overlap" />

Hello Overlap

This is just an example how easy it is to change the site heros.

zoomRedWhite

<SiteHero
  title="Hello Zoom"
  description="This is just an example how easy it is to change the site heros."
  bannerType="zoomRedWhite" />

Hello Zoom

This is just an example how easy it is to change the site heros.

zoomRedWhiteDark

<SiteHero
  title="Hello Zoom"
  description="This is just an example how easy it is to change the site heros."
  bannerType="zoomRedWhiteDark" />

Hello Zoom

This is just an example how easy it is to change the site heros.

zoomBlueRed

<SiteHero
  title="Hello Zoom"
  description="This is just an example how easy it is to change the site heros."
  bannerType="zoomBlueRed" />

Hello Zoom

This is just an example how easy it is to change the site heros.

waves

<SiteHero
  title="Hello Waves"
  description="This is just an example how easy it is to change the site heros."
  bannerType="waves" />

Hello Waves

This is just an example how easy it is to change the site heros.

starburst

<SiteHero
  title="Hello Starburst"
  description="This is just an example how easy it is to change the site heros."
  bannerType="starburst" />

Hello Starburst

This is just an example how easy it is to change the site heros.

braidBlue

<SiteHero
  title="Hello Braid"
  description="This is just an example how easy it is to change the site heros."
  bannerType="braidBlue" />

Hello Braid

This is just an example how easy it is to change the site heros.

braidRedBlue

<SiteHero
  title="Hello Braid"
  description="This is just an example how easy it is to change the site heros."
  bannerType="braidRedBlue" />

Hello Braid

This is just an example how easy it is to change the site heros.

braidBlack

<SiteHero
  title="Hello Braid"
  description="This is just an example how easy it is to change the site heros."
  bannerType="braidBlack" />

Hello Braid

This is just an example how easy it is to change the site heros.

ouroboros

<SiteHero
  title="Hello Ouroboros"
  description="This is just an example how easy it is to change the site heros."
  bannerType="ouroboros" />

This is just an example how easy it is to change the site heros.

Banner Types