2.5.5

Band

Band Component in Bolt

Published

History

View changes

Install

yarn add @bolt/components-band

Source code

View on Github

Dependencies

@bolt/components-grid

@bolt/core

Overview

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

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)
attributes	A Drupal-style attributes object with extra attributes to append to this component.	`object`	—	—
content	Main content of the band.	`string` or `array` or `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`
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.	`string`	`dark`	`none`, `xlight`, `light`, `dark`, `xdark`
row_gutter	Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.		—	—
content_row_start	Please use `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.		—	—
items	Please use `content` and `pinned_content`. Instructions on how to use `pinned_content` is on the Band with Pinned Content demo page.		—	—
fullBleed	This prop has been renamed. Please use `full_bleed`.		—	—
contentTag	This prop is no longer needed. `tag` takes care of the semantic markup automatically.		—	—