2.5.2

Bolt Background

Background Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-background
Source code
View on Github
Dependencies

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

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

 object —
  • —
opacity

Overlay opacity

 string medium
  • light, medium, heavy
overlay

Should an overlay be used for this background.

 string enabled
  • enabled or disabled
shapeGroup

Add a Bolt Background Shapes group.

 string —
  • A, B, none
shapeAlignment

Alignment of shape group.

 string right
  • left or right
fill

Type of fill to use for the overlay.

 string —
  • color or gradient
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.

 array —
  • [items]:
    • Type: object
    • Properties: