This is a full-size hero with solid tinted background.

This is a medium hero with solid tinted background.

This is an extra small hero with solid tinted background.

Hero in the main column

This is a small hero with solid tinted background within the main column.

Hero sizes

There are several predefinded hero heights to choose from:

  • 100% viewport hight (add class .hero-full)
  • 80% viewport hight (add class .hero-lg)
  • 60% viewport hight (add class .hero-md)
  • 40% viewport hight (add class .hero-sm)
  • 20% viewport hight (add class .hero-xs)

Hero Text sizes

There are several predefinded responsive hero text sizes to choose from:

hero-text-xxl

hero-text-xl

hero-text-lg

hero-text-md

hero-text-sm