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.
headingLevel	number	1	1 renders the title as the page's <h1>. 0 renders it without heading semantics, for a hero that sits above the real page title, such as on blog posts.
className	string		Extra class on the hero element.

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

This banner replaces the title text with the Ouroboros wordmark (Layout/OuroborosLogo, an inline SVG in the current text color). The title stays the accessible name of the heading, so always pass it. The logo is an internal part of SiteHero and is not meant to be used on its own.

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