background shapes docs

2.23.0

Background shapes

Background Component Shapes in Bolt

Published

History
View changes
Install
yarn add @bolt/components-background-shapes
Source code
View on Github
Dependencies
@bolt/core-v3.x

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

Description

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

  • Set to the right side of the band if there is copy on the left.
  • Set to the left side of the band if there is copy on the right.
  • Shapes can be used behind cards or thumbnail images (video or just image) but should not make the content hard to consume by the user.
  • Shapes should not be used behind any text elements. Doing so makes the text hard to read.
  • Don't use background shapes if it makes the content in the band hard to parse
  {% 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)
shapeGroup

The shapeGroup to use to build the shapes layout.

string A
  • A or B

background shapes

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle

shapeGroup: A

circle-square
Outline Circle
square-square
Little Circle
square-square
Little Circle

shapeGroup: B

square-square
Outline Circle
square-square
Little Circle
circle-circle
Outline Circle
Debug Panel