Background shapes

Background Component Shapes in Bolt


View changes
yarn add @bolt/components-background-shapes
Source code
View on Github

A grid of colored vector shapes for use in backgrounds. Part of the Bolt “Components” CSS framework that powers the Bolt Design System. This component will likely not be used on its own, but rather will be a dependency of another component that includes it.

Install via NPM
npm install @bolt/components-background-shapes


Background shapes bring the brand further into Bolt. These shapes create a background texture for bands. The shapes are offset at an angle offset inside a band component.

Best Practices

Overview Usage Schema Edit this page Testing Steps
  {% include "@bolt-components-background-shapes/background-shapes.twig" with {
  shapeGroup: "B"
} only %}

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)

The shapeGroup to use to build the shapes layout.

string A
  • A or B
Debug Panel