{% 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 %}
| 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
|
|
|
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
|
|
|
imageValign
|
Adjusts the Hero Image's vertical alignment |
string
|
middle
|
|
|
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
| — |
|
npm install @bolt/components-hero