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

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
  • light, medium, heavy

Overlay opacity

 medium
overlay string
  • enabled OR disabled

Should an overlay be used for this background.

 enabled
shapeGroup string
  • A, B, none

Add a Bolt Background Shapes group.

 N/A
shapeAlignment string
  • left OR right

Alignment of shape group.

 right
fill string
  • color OR gradient

Type of fill to use for the overlay.

 N/A
focalPoint object
    • horizontal

      Currently only reverses gradient on 'left'.

      • center, left, right
    • vertical

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

      • center, top, bottom

Where the opacity background should originate.

 N/A
contentItems array
  • [items]:
    • Type: object
    • Properties:

An array of objects to place in the background.

 N/A