Site Hero

Site Hero

The <SiteHero> component is used to define the header banner and title of each page.

Props

Prop	Type	Default	Description
title	string		The hero heading.
description	string | node		Supporting text below the title.
bannerType	string	starburst	One of the banner types below. An unrecognized or missing value falls back to starburst. Documentation pages use docs.
children	node		Optional content rendered inside the hero, below the title and description.

Banner Types

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.

fluidBlue

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

Hello Fluid Blue

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

fluidRed

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

Hello Fluid Red

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.