background docs

2.23.0

Bolt Background

Background Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-background
Source code
View on Github
Dependencies
@bolt/components-background-shapes @bolt/core-v3.x

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.

Overview Usage Schema Edit this page

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)
attributes

A Drupal-style attributes object with extra attributes to append to this component.

 object —
  • —
opacity

Overlay opacity

 string medium
  • light, medium, heavy, full
overlay

Should an overlay be used for this background.

 string enabled
  • enabled or disabled
shapeGroup

Add a Bolt Background Shapes group.

 string none
  • A, B, none
shapeAlignment

Alignment of shape group.

 string right
  • left or right
fill

Type of fill to use for the overlay.

 string color
  • color, gradient, linear-gradient, radial-gradient
fillColor

Color of the fill to use in the overlay.

 string default
  • indigo, pink, default, black
focalPoint

Where the opacity background should originate.

 object —
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
    • vertical

      Currently doesn't use this value. Intended future application.

      • center, top, bottom
contentItems

An array of objects to place in the background. Works with Image and Shape components. Video option is deprecated.

 array —
  • [items]:
    • Type: any

background

background opacity variations

Light Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

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.

Medium Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

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.

Heavy Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

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.

Full Opacity

Visualization & Simulation

Imagine the Future with Decision Hub

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.

background focal variations

Heavy Opacity with Left Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

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.

Heavy Opacity with Right Focal Point

Visualization & Simulation

Imagine the Future with Decision Hub

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.

background shapes variations

Background Shapes: Shape Group A

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

Visualization & Simulation

Imagine the Future with Decision Hub

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.

Background Shapes: Shape Group B

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

Visualization & Simulation

Imagine the Future with Decision Hub

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.

Background Shapes: Shape Group A, Alignment Left

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

Visualization & Simulation

Imagine the Future with Decision Hub

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.

background fill variations

Fill: Color

Visualization & Simulation

Imagine the Future with Decision Hub

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.

Fill: Gradient

Visualization & Simulation

Imagine the Future with Decision Hub

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.

background without overlay

Visualization & Simulation

Imagine the Future with Decision Hub

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.

background valign variations

Note: valign is an Image component prop, not a Background component prop. Set valign on images passed in via contentItems to control the vertical alignment.

valign: center

Visualization & Simulation

Imagine the Future with Decision Hub

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.

valign: top

Visualization & Simulation

Imagine the Future with Decision Hub

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.

valign: bottom

Visualization & Simulation

Imagine the Future with Decision Hub

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.

valign: 25%

Visualization & Simulation

Imagine the Future with Decision Hub

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.
Debug Panel