2.17.0

Band

Band Component in Bolt

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
  {% include "@bolt-components-band/band.twig" with {
  content: "This is a band.",
} only %}

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.

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.

Debug Panel