Bolt Band

Band is a panel with vertical spacing. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-band

Description

Bands are full width sections that go edge to edge of the display and typically denote a collective section of a page. Bands can contain many page elements and components.

Bands also define what theme the contents follow. For example, a dark theme with have an indigo background with a yellow primary button.

Bands are defined content areas where content hangs together.

Best Practices

  • Bands are full width divs and leverage the page wrapper to constrain content inside of it
  • Don't have partial width bands
  • Choose from different themes: xlight, light, dark, xdark
  • Optionally include a background image (see background)
  • Optionally can include a gradient
  • Has grid set inside of it
  • Can have many components inside of it like teaser on one side and card on the other with background shapes behind the card
  • Make sure the content inside a band hangs together
  • Introduce content in a band that doesn't hang with other content
  {% include "@bolt-components-band/band.twig" with {
  content: "Example Band Content",
} only %}
Name Type Value(s) Description Default
attributes object

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

N/A
fullBleed boolean

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

N/A
size string
  • xsmall, small, medium, large, none

Height of the band.

medium
contentTag string
  • div, article, section, header, footer, nav, figcaption

Html tag to use for the band's content.

N/A
theme string
  • xlight, light, dark, xdark, none

Bolt theme.

dark
row_gutter string
  • none, small, medium, large

Configures the amount of vertical whitespace in-between each <bolt-grid-item> in the nested <bolt-grid> component.. Defaults to small when there's more than than 1 item in the items array, otherwise defaults to none. Shares the same row_gutter config options as the grid component.

small / none
content_row_start string

Configures which row the Band Component's legacy content Twig block should be 'automatically' displayed on. Under the hood, this identical to the Grid Item's row_start config.

2
items array
    • content

      Content to render inside each <bolt-grid-item>

    • position

      Layout-specific config options for each internal <bolt-grid-item>

      • @bolt-components-grid/grid-item.schema.yml > Object details
        • attributes

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


          Type: object
        • align

          Horizontal alignment of the grid item itself


          Type: string
          • start, center, end
        • valign

          Vertical alignment of the grid item itself


          Type: string
          • start, center, end
        • column_start

          The general column the grid item should start on. For example, a with the attributes columns="3" start-column="2" would start on the 2nd column and extend for 3 columns so it would span the 2nd, 3rd and 4th column.


          Type: string
        • column_end

          The general column the grid item should stop on. For example, a with the attributes start-column="2" end-column="3" would start on the 2nd column and extend until the 3rd column.


          Type: string
        • column_span

          The number of columns the should span across


          Type: string
        • row_start

          Specifies a grid item’s start position within the grid row


          Type: string
        • row_end

          Specifies a grid item’s ending position within the grid row


          Type: string
        • row_span

          Specifies the number of rows a should span across


          Type: string

Array of content items to display inside the band component. Internally this uses the new <bolt-grid> component to handle layout.

N/A

band

Example Band Content

Example Headline

Example Subheadline

Size: xsmall

This band is size xsmall

Size: small

This band is size small

Size: medium

This band is size medium

Size: large

This band is size large

Size: none

This band is size none

Band: Flag with One Button

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Flag with Two Buttons

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Flag with Two Long Buttons

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: xlight

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: light

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: dark

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: xdark

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Theme: none

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Collection

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Pega 7 for Operations

Simplify and automate to reduce costs and improve agility.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Band: Card Collection

2017 Forrester Wave Report

Pega cited as a Leader in The Forrester Wave™: Digital Process Automation Software, Q3 2017.

Headline #2

Simplify and automate to reduce costs and improve agility.

Headline #3

Simplify and automate to reduce costs and improve agility.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

Who is Pega?

Pega is #1 in software for customer engagement and operational excellence.

What's Trending

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

^ via Twig embed, separate content field, uses band_content Twig block.

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

^ via Twig Include, items array separate from content field

Pega Events

Customer Engagement Summit Detroit

Hear insights. Make connections. Drive innovation.

^ via Twig Include, combined content into single items array, doesn't use content field