Bolt Design System

Twig Usage

  {% include "@bolt-components-band/band.twig" with {
  content: "This is a band.",
} 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`	—	—
content	Main content of the band.	`string` , `array` , `object`	—	—
pinned_content	Pinned content of the band.	`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`
tag	Controls the semantic HTML tag to use for the band's content.	`string`	`div`	`div`, `article`, `section`, `header`, `footer`, `nav`, `figure`
valign	Controls the internal vertical alignment of the band's content.	`string`	`center`	`start`, `center`, `end`
size	Controls the vertical spacing of the band.	`string`	`medium`	`none`, `xsmall`, `small`, `medium`, `large`
full_bleed	If set to true, the band will take the full width of the page.	`boolean`	`true`	—
theme	Controls the theme of the band.	`any`	`dark`	`none`, `xlight`, `light`, `dark`, `xdark`, `xxdark`
row_gutter (deprecated)	Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.	—	—	—
content_row_start (deprecated)	Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.	—	—	—
items (deprecated)	Please use `content` and `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.	—	—	—
fullBleed (deprecated)	This prop has been renamed. Please use `full_bleed`.	—	—	—
contentTag (deprecated)	This prop is no longer needed. `tag` takes care of the semantic markup automatically.	—	—	—

Install

  npm install @bolt/components-band

Dependencies

@bolt/components-background

@bolt/components-grid

@bolt/core-v3.x

@bolt/element

@bolt/lazy-queue

Band

A general content container with spacing and background options.