band docs

2.15.2

Band

Band Component in Bolt

Published

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

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
Overview Usage Schema Edit this page Testing Steps

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

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.

 —
  • —
full_bleed

This prop has been renamed. Please use full_bleed.

 —
  • —
content_tag

This prop is no longer needed. tag takes care of the semantic markup automatically.

 —
  • —

band

band size variations

band theme variations

band tag variations

Setting the container's HTML tag to: div

Setting the container's HTML tag to: article

Setting the container's HTML tag to: section

Setting the container's HTML tag to: header

Setting the container's HTML tag to: footer

Setting the container's HTML tag to: nav

Setting the container's HTML tag to: figure

band full bleed variations

Note: turn off full bleed option if you don't want the band to span the full width of the page.

Full bleed

This band spans the full width of the page, it ignores the spacing of its parent container.

Not full bleed

This band only takes up the available space within its parent container, it accounts for the spacing of its parent container.

band with pinned content

Each pinned area (upper and lower) can have 1 or more items, spacing will be evenly distributed

When there is only 1 item, you can set the align prop to your liking (start, center, end)

Note: please convert the deprecated items prop to the new pinned_content prop.

Deprecated items prop usage

{% include "@bolt-components-band/band.twig" with { content: content, items: [ { position: { align: "end", valign: "center", row_start: 1, column_start: 1, column_end: 12, }, content: pinned_share, }, ] } only %}

New pinned_content prop usage

{% include "@bolt-components-band/band.twig" with { content: content, pinned_content: { upper: [ { content: pinned_share, align: "end", }, ], } } only %}

band with background

band nested

band flag

band feature

band collection

Debug Panel