Overview
Background can be added to any container. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
Install via NPM
npm install @bolt/components-background
Description
Background allows Bolt to set an image inside of bands.
- Can set an image inside the band
- Can set background shapes
- Can set focus on the left
- Can set focus on the right
- Can set light, medium, or heavy opacity
- Can set a left, right, or center gradient
We recommend a max-width of 2880px for full-bleed background images. This recommendation takes into consideration the common HD screen resolution of 1920x1080 and multiplies 1920 by 1.5.
Usage
{% include "@bolt-components-background/background.twig" with {
opacity: "heavy",
fill: "gradient",
focalPoint: {
vertical: "center",
horizontal: "center"
},
contentItems: [
{
pattern: "image",
src: "/images/content/backgrounds/background-tall-4.jpg"
}
]
} 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) |
|---|---|---|---|---|
|
|
A Drupal-style attributes object with extra attributes to append to this component. |
object
| — |
|
|
|
Overlay opacity |
string
|
medium
|
|
|
|
Should an overlay be used for this background. |
string
|
enabled
|
|
|
|
Add a Bolt Background Shapes group. |
string
| — |
|
|
|
Alignment of shape group. |
string
|
right
|
|
|
|
Type of fill to use for the overlay. |
string
| — |
|
|
|
Where the opacity background should originate. |
object
| — |
|
|
|
An array of objects to place in the background. Works with Image and Shape components. Video option is deprecated. |
array
| — |
|