Hero

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

Published Last updated: 4.0.0 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
custom_background

Renderable background image for this item, should use the Image or Shape component.

string , object , array
image

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

string
image_srcset

A valid image srcset value with different cuts of the image for different breakpoints

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
attributes

A Drupal attributes object. Applies extra HTML attributes to the parent element.

object
Install Install
  npm install @bolt/components-hero
Dependencies @bolt/components-band @bolt/components-image @bolt/core-v3.x @bolt/global