2.24.1

Bolt Hero

A large promo section that typically featuring a headline, call to action, and prominent imagery.

Bolt's Component Explorer is being upgraded. It'll return in a future release!

A large promo section, generally at the top of a page, typically featuring a headline, call to action and a prominent image.

Install via NPM
npm install @bolt/components-hero
Overview Usage Schema Edit this page
  {% 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 %}

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
Debug Panel