2.21.0

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.

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