2.24.1

Bolt Hero

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

Published

History
View changes
Install
yarn add @bolt/components-hero
Source code
View on Github
Dependencies
@bolt/components-band @bolt/components-image @bolt/core-v3.x @bolt/global

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

Overview

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

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