Bolt Hero

A pre-defined band featuring a headline, call to action, and prominent imagery.

Published Last updated: 2.24.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-hero/hero.twig" with {
  content: "Hero content goes here",
  background: "/images/heros/hero-background--yellow.svg",
  image: "/images/heros/hero-foreground--yellow.png",
  theme: "dark",
} only %}
Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
content

The content to display in the Hero

 string , array , object —
  • —
theme

Color theme to use within the Hero.

 string none
  • xlight , light , dark , xdark , none
background

The path to a background image that displays underneath the content / foreground image in the Hero.

 string —
  • —
image

The path to a foreground image that displays along-side the other Hero content.

 string —
  • —
imageAlign

Adjusts the Hero Image's horizontal alignment

 string center
  • left , center , right
imageValign

Adjusts the Hero Image's vertical alignment

 string middle
  • top , middle , bottom
imageMinWidth

Customizes the min width of the Hero Image

 string none
  • —
imageMaxWidth

Customizes the maximum width of the Hero Image

 string 450px
  • —
reverseOrder

Reverses the order on larger screens (desktop) so the image comes first (left column) and the content comes second (right column).

 boolean false
  • —
Install Install 
  npm install @bolt/components-hero
Dependencies @bolt/components-band @bolt/components-image @bolt/core-v3.x @bolt/global