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.

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