band docs

2.8.0-beta.1

Band

Band Component in Bolt

Published

History
View changes
Install
yarn add @bolt/components-band
Source code
View on Github
Dependencies

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 or array or 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 or 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.

 —
  • —
fullBleed

This prop has been renamed. Please use full_bleed.

 —
  • —
contentTag

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

 —
  • —

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

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