Component <MainHero />

Props

Props	Type	Meaning	Possible values
title	string	Add hero title	string
titleType	string	Set hero title type	heading / banner
subtitle	string	Add hero subtitle	string
background	string	Set hero background color or gradient	HEX coor
image	string	Set hero image	image path
imagePosition	string	Change hero image and text position	left / right
imageSize	string	Change hero image size. This setting also change font size, hero height and paddings	full / auto
card	node	Add hero platform cad	element
handleGoBack	function	Add hero back button with provided action	() => void

---

Position

Examples:

<MainHero
  title="WHAT<span style='color: #fff'> LOREM IPSUM?</span>"
  subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  background="#f14f6d"
  image="https://via.placeholder.com/950x630/ffffff/000000?text=Demo"
  imagePosition="left"
/>

<MainHero
  title="WHAT<span style='color: #fff'> LOREM IPSUM?</span>"
  subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  background="#f14f6d"
  image="https://via.placeholder.com/950x630/ffffff/000000?text=Demo"
  imagePosition="right"
/>

---

Image sizes

Examples:

<MainHero
  title="<span style='color: #fff'>WHAT </span>LOREM IPSUM?"
  subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  background="#35a577"
  image="https://via.placeholder.com/950x630/ffffff/000000?text=Demo"
  imageSize="full"
/>

<MainHero
  title="<span style='color: #fff'>WHAT </span>LOREM IPSUM?"
  subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  background="#35a577"
  image="https://via.placeholder.com/950x630/ffffff/000000?text=Demo"
  imageSize="auto"
/>

---

With card

Examples:

<MainHero
  title="WHAT<span style='color: #fff'> LOREM IPSUM?</span>"
  subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  background="#ff9fc4"
  image="https://via.placeholder.com/950x630/ffffff/000000?text=Demo"
  card={<div>Card content</div>}
/>

---

With back button

Examples:

<MainHero
  title="WHAT<span style='color: #fff'> LOREM IPSUM?</span>"
  subtitle="Lorem Ipsum is simply dummy text of the printing and typesetting industry."
  background="#bbd9e4"
  image="https://via.placeholder.com/950x630/ffffff/000000?text=Demo"
  handleGoBack={() => {}}
/>