Bolt Design System

Twig 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

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`
contentItems	An array of objects to place in the background.Works with Image and Shape components.Video option is deprecated.	`array`	—	[items]: Type:`any`

Install

  npm install @bolt/components-background

Dependencies

@bolt/components-background-shapes

@bolt/core-v3.x

Bolt Background

An absolute positioned element that renders as a background (image, video, or shapes) inside relative positioned containers.