Band

A general content container with spacing and background options.

Published

Last updated: 5.5.0

Github

NPM

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.	`string`	`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

This is a band.

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.

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.

This is a band with theme set to xxdark.

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

Setting the container's HTML tag to: nav

Setting the container's HTML tag to: figure

This is a band.

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.

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

lower pinned 1

lower pinned 2

lower pinned 3

This Is a Headline

This Is a Subheadline

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

This Is a Headline

This Is a Subheadline

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 %}

This Band Has a Backround Image

This Band Has 2 Bands Nested Inside

Nested band 1

Nested band 2

This Is a Flag

With text on the left and CTAs on the right.

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

This is a paragraph.

Block List Item 1

Block List Item 2

Block List Item 3

Collection 1

This is a button

Collection 2

This is a button

Collection 3

This is a button

band

band docs

Band

A general content container with spacing and background options.

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

Full bleed

Not full bleed

band with pinned content

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

This Is a Headline

This Is a Headline

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

This Is a Headline

Deprecated items prop usage

New pinned_content prop usage

band with background

This Band Has a Backround Image

band nested

This Band Has 2 Bands Nested Inside

band flag

With text on the left and CTAs on the right.

band feature

This Is a Headline

band collection

Collection 1

Collection 2

Collection 3

band

band docs Show Code Hide Code

Band

A general content container with spacing and background options.

band Show Code Hide Code

band size variations Show Code Hide Code

band theme variations Show Code Hide Code

band tag variations Show Code Hide Code

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 Show Code Hide Code

Full bleed

Not full bleed

band with pinned content Show Code Hide Code

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

This Is a Headline

This Is a Headline

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

This Is a Headline

Deprecated items prop usage

New pinned_content prop usage

band with background Show Code Hide Code

This Band Has a Backround Image

band nested Show Code Hide Code

This Band Has 2 Bands Nested Inside

band flag Show Code Hide Code

With text on the left and CTAs on the right.

band feature Show Code Hide Code

This Is a Headline

band collection Show Code Hide Code

Collection 1

Collection 2

Collection 3

band docs

band

band size variations

band theme variations

band tag variations

band full bleed variations

band with pinned content

band with background

band nested

band flag

band feature

band collection