Bolt Design System

Twig Usage

  {% include "@bolt-components-background/background.twig" with {
  opacity: "heavy",
  fill: "gradient",
  focal_point: {
    vertical: "center",
    horizontal: "center"
  },
  content_items: [
    {
      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`	`none` , `light` , `medium` , `heavy` , `full`
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`	`default` , `pink` , `navy` , `black` , `indigo`
focal_point	Where the opacity background should originate.	`object`	—	`horizontal` Currently only reverses gradient on 'left'. `center` , `left` , `right`
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`
overlay (deprecated)	Use opacity instead	—	—	—
shapeGroup (deprecated)	Use shape_group instead.	—	—	—
shapeAlignment (deprecated)	Use shape_alignment instead.	—	—	—
fillColor (deprecated)	Use fill_color instead.	—	—	—
focalPoint (deprecated)	Use focal_point instead.	—	—	—
contentItems (deprecated)	Use content_items instead.	—	—	—

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.