band docs

Band

Getting Started

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

Name Type Value(s) Description Default
attributes object

A Drupal-style attributes object with extra attributes to append to this component.

 N/A
content string OR array OR object

Main content of the band.

 N/A
pinned_content 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

Pinned content of the band.

 N/A
tag string
  • div, article, section, header, footer, nav, figure

Controls the semantic HTML tag to use for the band's content.

 div
size string
  • none, xsmall, small, medium, large

Controls the vertical spacing of the band.

 medium
full_bleed boolean

If set to true, the band will take the full width of the page.

 true
theme string
  • none, xlight, light, dark, xdark

Controls the theme of the band.

 dark
row_gutter

DEPRECATED

Please use pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

 N/A
content_row_start

DEPRECATED

Please use pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

 N/A
items

DEPRECATED

Please use content and pinned_content. Instructions on how to use pinned_content is on the Band with Pinned Content demo page.

 N/A
fullBleed

DEPRECATED

This prop has been renamed. Please use full_bleed.

 N/A
contentTag

DEPRECATED

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

 N/A

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

band with background

This Band Has a Backround Image

This Band Has a Backround Video

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.

    •

band feature

This Is an Eyebrow

This Is a Headline

This Is a Subheadline

This is a paragraph.

band collection

Image descriptionImage description

Collection 1

This is a button
Image descriptionImage description

Collection 2

This is a button
Image descriptionImage description

Collection 3

This is a button