This is a band.
2.20.0Band
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 , array , object |
— |
|
| pinned_content | Pinned content of the band. |
object
| — |
|
| tag | Controls the semantic HTML tag to use for the band's content. |
string
|
div
|
|
| valign | Controls the internal vertical alignment of the band's content. |
string
|
middle
|
|
| size | Controls the vertical spacing of the band. |
string
|
medium
|
|
| full_bleed | If set to true, the band will take the full width of the page. |
boolean
|
true
|
|
| theme | Controls the theme of the band. |
any
|
dark
|
|
| row_gutter | Please use |
| — |
|
| content_row_start | Please use |
| — |
|
| items | Please use |
| — |
|
| fullBleed | This prop has been renamed. Please use |
| — |
|
| contentTag | This prop is no longer needed. |
| — |
|
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.
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.
This is a band with theme set to xxdark.
Setting the container's HTML tag to: div
This is a band.
Setting the container's HTML tag to: article
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
Setting the container's HTML tag to: nav
Setting the container's HTML tag to: figure
This is a band.
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.
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 %}
This Is an Eyebrow
This Is a Headline
This Is a Subheadline
This is a paragraph.
