{% set image %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
src: '/images/placeholders/backgrounds/background-light-tall.jpg',
srcset: '/images/placeholders/backgrounds/background-light-tall-640.jpg 640w, /images/placeholders/backgrounds/background-light-tall-1024.jpg 1024w, /images/placeholders/backgrounds/background-light-tall-1920.jpg 1920w',
width: 3840,
height: 2160,
},
} only %}
{% endset %}
<div style="height: 400px; position: relative;" class="t-bolt-black">
{% include '@bolt-components-background/background.twig' with {
fill: 'gradient',
items: [
image,
]
} only %}
</div>
Prop Name | Description | Type | Default Value | Option(s) |
---|---|---|---|---|
attributes
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
opacity
|
Overlay opacity |
string
|
none
|
|
fill
|
Type of fill to use for the overlay. |
string
|
solid
|
|
focal_point
|
Point where the background gradient highlight should originate. |
object
| — |
|
video
|
Set to true if you like to use video as a background. |
boolean
|
false
|
|
video_toggle_button
|
A Drupal-rendered button that will play and pause a background video. |
any
| — |
|
items
|
An array of renderable items to place in the background. |
array
| — |
|
shape_group
|
Add a Bolt Background Shapes group. |
string
|
none
|
|
shape_alignment
|
Alignment of shape group. |
string
|
right
|
|
npm install @bolt/components-background
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
{% include '@bolt-components-background/background.twig' with {
opacity: 'medium',
items: [
image
]
} only %}
valign
options.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
src: '/images/placeholders/backgrounds/background-light-tall.jpg',
srcset: '/images/placeholders/backgrounds/background-light-tall-640.jpg 640w, /images/placeholders/backgrounds/background-light-tall-1024.jpg 1024w, /images/placeholders/backgrounds/background-light-tall-1920.jpg 1920w',
width: 4320,
height: 2880,
style: '--e-bolt-image-position: center center;',
},
} only %}
{% endset %}
{% include '@bolt-components-background/background.twig' with {
opacity: 'medium',
items: [
image
]
} only %}
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
{% set toggle_button %}
{% set icon_video %}
<svg class="e-bolt-icon" viewBox="0 0 36 36" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M 11 10 L 17 10 L 17 26 L 11 26 M 20 10 L 26 10 L 26 26 L 20 26">
<animate class="background-video-toggle-animation" begin="indefinite" attributeType="XML" attributeName="d" fill="freeze" from="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" to="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" dur="0.1s" keySplines=".4 0 1 1"
repeatCount="1"></animate>
</path>
</svg>
{% endset %}
{% include '@bolt-elements-button/button.twig' with {
content: 'Pause',
icon_only: icon_video,
border_radius: 'full',
hierarchy: 'secondary',
attributes: {
type: 'button',
'data-video-target': 'backgroundVideoTarget',
class: 'js-base-video-toggle js-bolt-background-video-toggle c-bolt-background__video-toggle-button is-playing',
'aria-label': 'Pause the background video'
}
} only %}
{% endset %}
{% set background_video %}
{% include '@bolt-elements-image/image.twig' with {
attributes: {
src: '/images/placeholders/backgrounds/background-light-tall.jpg',
background: true,
loading: 'lazy',
}
} only %}
{% set video %}
<video-js
data-account="1900410236"
data-player="O3FkeBiaDz"
data-embed="default"
data-video-id="5999324539001"
autoplay loop muted
id="backgroundVideoTarget"
class="c-base-video"></video-js>
{% endset %}
{% include '@bolt-elements-ratio/ratio.twig' with {
content: video,
ratio: 'wide'
} only %}
{% endset %}
{% include './_00-background-band-demo.twig' with {
background: {
fill: 'solid',
video: true,
video_toggle_button: toggle_button,
opacity: 'heavy',
items: [
background_video,
]
}
} only %}
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
{% include '@bolt-components-background/background.twig' with {
shape_group: 'A',
shape_alignment: 'left'
} only %}
All themes are supported. A few examples are shown below.
This background has a solid
fill and the surrounding theme is t-bolt-white
This background has a solid
fill and the surrounding theme is t-bolt-black
This background has a solid
fill and the surrounding theme is t-bolt-navy-dark
<div class="t-bolt-navy-dark">
{% include '@bolt-components-background/background.twig' with {
fill: 'solid',
} only %}
</div>
focal_point
sets the horizontal and vertical alignment of the gradient (if applicable).
gradient
fill and the focal point is set to horiztonal: left
and vertical: top
gradient
fill and the focal point is set to horiztonal: left
and vertical: bottom
{% include '@bolt-components-background/background.twig' with {
fill: 'gradient',
focal_point: {
vertical: 'top',
horizontal: 'left',
},
} only %}
solid
and gradient
fill options.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
src: '/images/placeholders/backgrounds/background-light-tall.jpg',
srcset: '/images/placeholders/backgrounds/background-light-tall-640.jpg 640w, /images/placeholders/backgrounds/background-light-tall-1024.jpg 1024w, /images/placeholders/backgrounds/background-light-tall-1920.jpg 1920w',
width: 4320,
height: 2880
},
} only %}
{% endset %}
{% include '@bolt-components-background/background.twig' with {
fill: 'solid',
opacity: 'medium',
items: [
image
]
} only %}
opacity: none
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: light
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: medium
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: heavy
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
opacity: full
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
{% include '@bolt-components-background/background.twig' with {
opacity: 'medium',
items: [
image
]
} only %}
Continuously improve results by visualizing how future adjustments to your strategies can impact business performance. Simulate and test your ideas, evaluate the results using intuitive views, and then deploy optimal alterations.
{% set image %}
{% include '@bolt-elements-image/image.twig' with {
background: true,
attributes: {
src: '/images/placeholders/backgrounds/background-light-tall.jpg',
loading: 'eager'
},
} only %}
{% endset %}
{% include '@bolt-components-background/background.twig' with {
opacity: 'heavy',
fill: 'gradient',
focal_point: {
horizontal: 'right',
vertical: 'top',
},
items: [
image,
]
} only %}