hero docs

2.21.0

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

Basic Usage

This simple Hero demo only sets four props: the Hero content the image path the image's vertical alignment (set to bottom via the imageValign prop) and the theme color (light)

Reverse Desktop Order

This demo uses the reverseOrder prop to reverse the Hero's default column order so that on larger screens, the Image shows up on the left and the Content shows up on the right.

Reverse Desktop Order (No Image)

This demo shows that the reverseOrder prop still swaps the column order of Image / Content on larger screens, even if a Hero doesn't contain an image!

Image Minimum Width

This demo creatively uses the imageMinWidth prop to "pin" the image to the right side of the screen on larger devices.

Image Horizontal Alignment

This Hero demo sets the imageAlign prop so the image is right-aligned within it's Grid column instead of being center (default) or left aligned. This horizonal alignment is especially visible on smaller screens or when using smaller-width images.

Image Vertical Alignment (Top)

This demo sets the imageValign prop to top so the image is always flush with the top-edge of the Hero container.

Image Vertical Alignment (Bottom)

This demo sets the imageValign prop to bottom so the image is always flush with the bottom-edge of the Hero container.

Note: this automatically adjusts the content order on smaller (mobile) screens so the Image displays after the main content instead of before.
Debug Panel