background docs

2.15.2

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.

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

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
shape_group

Add a Bolt Background Shapes group.

 string none
  • A, B, none
shape_alignment

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
fill_color

Color of the fill to use in the overlay.

 string default
  • indigo, pink, default, black
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: any
    • Properties:

    background

    background opacity variations

    Light Opacity

    Medium Opacity

    Heavy Opacity

    Full Opacity

    background focal variations

    Heavy Opacity with Left Focal Point

    Heavy Opacity with Right Focal Point

    background shapes variations

    Background Shapes: Shape Group A

    Background Shapes: Shape Group B

    Background Shapes: Shape Group A, Alignment Left

    background fill variations

    Fill: Color

    Fill: Gradient

    background without overlay

    background valign variations

    Note: valign is an Image component prop, not a Background component prop. Set valign on images passed in via contentItems to control the vertical alignment.

    valign: center

    valign: top

    valign: bottom

    valign: 25%

    Debug Panel