Bolt Band
Getting Started
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
Usage
{% include "@bolt-components-band/band.twig" with {
content: "Example Band Content",
} 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 |
| fullBleed | boolean
| |
If set to true, the band will take the full width of the page. |
N/A |
| size | string
|
|
Height of the band. |
medium
|
| contentTag | string
|
|
Html tag to use for the band's content. |
N/A |
| theme | string
|
|
Bolt theme. |
dark
|
| row_gutter | string
|
|
Configures the amount of vertical whitespace in-between each |
small / none
|
| content_row_start | string
| |
Configures which row the Band Component's legacy |
2
|
| items | array
|
|
Array of content items to display inside the band component. Internally this uses the new |
N/A |
