Bolt Background
Getting Started
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 images 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
Usage
{% include "@bolt-components-background/background.twig" with {
opacity: "heavy",
fill: "gradient",
focalPoint: {
vertical: "center",
horizontal: "center"
},
contentItems: [
{
pattern: "image",
src: "/pattern-lab/images/content/backgrounds/background-tall-4.jpg"
}
]
} only %}Schema
| Name | Type | Value(s) | Description | Default |
|---|---|---|---|---|
| attributes | object
| |
A Drupal-style attributes object with extra attributes to append to this component. |
N/A |
| opacity | string
|
|
Overlay opacity |
medium
|
| overlay | string
|
|
Should an overlay be used for this background. |
enabled
|
| shapeGroup | string
|
|
Add a Bolt Background Shapes group. |
N/A |
| shapeAlignment | string
|
|
Alignment of shape group. |
right
|
| fill | string
|
|
Type of fill to use for the overlay. |
N/A |
| focalPoint | object
|
|
Where the opacity background should originate. |
N/A |
| contentItems | array
|
|
An array of objects to place in the background. |
N/A |
