Band

Last Updated: 2.4.3

NPM Package:

Getting Started

Band is a general content container with spacing and background options. Part of the Bolt Design System.

Install via NPM

npm install @bolt/components-band

Usage

  {% include "@bolt-components-band/band.twig" with {
  content: "This is a band.",
} only %}

Schema

Name	Type	Value(s)	Description	Default
attributes	`object`		A Drupal-style attributes object with extra attributes to append to this component.	N/A
content	`string` OR `array` OR `object`		Main content of the band.	N/A
pinned_content	`object`	`upper` Pinned to the upper area of the band. `content` A pinned area can contain 1 or more items. `align` Horizontal alignment of a single item. `start`, `center`, `end` `lower` Pinned to the lower area of the band. `content` A pinned area can contain 1 or more items. `align` Horizontal alignment of a single item. `start`, `center`, `end`	Pinned content of the band.	N/A
tag	`string`	`div`, `article`, `section`, `header`, `footer`, `nav`, `figure`	Controls the semantic HTML tag to use for the band's content.	`div`
size	`string`	`none`, `xsmall`, `small`, `medium`, `large`	Controls the vertical spacing of the band.	`medium`
full_bleed	`boolean`		If set to true, the band will take the full width of the page.	`true`
theme	`string`	`none`, `xlight`, `light`, `dark`, `xdark`	Controls the theme of the band.	`dark`
row_gutter			DEPRECATED Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.	N/A
content_row_start			DEPRECATED Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.	N/A
items			DEPRECATED Please use `content` and `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.	N/A
fullBleed			DEPRECATED This prop has been renamed. Please use `full_bleed`.	N/A
contentTag			DEPRECATED This prop is no longer needed. `tag` takes care of the semantic markup automatically.	N/A