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

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, disabled
shape_group

Add a Bolt Background Shapes group.

 string —
  • A, B, none
shape_alignment

Alignment of shape group.

 string right
  • left, right
fill

Type of fill to use for the overlay.

 string —
  • color, gradient
focal_point

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
content_items

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

 array —
  • [items]:
    • Type: object
    • Properties:
    Overview Usage Schema Edit this page