band docs

2.9.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

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 , 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
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, false
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.

 —
  • —
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.

 —
  • —
Overview Usage Schema Edit this page Testing Steps

band

This is a band.

band size variations

This is a band with size set to none.
This is a band with size set to xsmall.
This is a band with size set to small.
This is a band with size set to medium.
This is a band with size set to large.

band theme variations

This is a band with theme set to none.
This is a band with theme set to xlight.
This is a band with theme set to light.
This is a band with theme set to dark.
This is a band with theme set to xdark.

band tag variations

Setting the container's HTML tag to: div

This is a band.

Setting the container's HTML tag to: article

This is a band.

Setting the container's HTML tag to: section

This is a band.

Setting the container's HTML tag to: header

This is a band.

Setting the container's HTML tag to: footer

This is a band.

Setting the container's HTML tag to: nav

Setting the container's HTML tag to: figure

This is a band.

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.

This is a band.

Not full bleed

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

This is a band.

band with pinned content

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

upper pinned 1
upper pinned 2
upper pinned 3

This Is a Headline

This Is a Subheadline

This is a button
lower pinned 1
lower pinned 2
lower pinned 3
Share this page LinkedIn
Copied!

This Is a Headline

This Is a Subheadline

This is a button

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

Share this page LinkedIn
Copied!

This Is a Headline

This Is a Subheadline

This is a button

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

This Band Has a Backround Image

This is a button

band nested

This Band Has 2 Bands Nested Inside

Nested band 1
Nested band 2

band flag

This Is a Flag

With text on the left and CTAs on the right.

Primary action Secondary action

band feature

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

This is a paragraph.

This is a button
Block List Item 1 Block List Item 2 Block List Item 3

band collection

Collection 1

This is a button

Collection 2

This is a button

Collection 3

This is a button