Band

A general content container with spacing and background options.

Published Last updated: 2.25.0 Change log Github NPM
Twig 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 , 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 middle
  • 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
  • true or false
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 Install 
  npm install @bolt/components-band
Dependencies @bolt/components-background @bolt/components-grid @bolt/core-v3.x @bolt/element @bolt/lazy-queue