2.20.0A content container that delivers important messages to the user.
Banner component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.
npm install @bolt/components-banner
{% include "@bolt-components-banner/banner.twig" with {
content: "This is the banner content."
} 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 attributes object. Applies extra HTML attributes to the outer <bolt-menu> tag. |
object
| — |
|
| content * | Renders the content of the banner. While any element can be passed, only text and links are recommended because banner messages are supposed to be concise. |
any
| — |
|
| status | Sets the status that the banner is trying to convey. |
string
|
information
|
|
| align | Sets the text alignment of the content. |
string
|
center
|
|
| full | Sets the width of the banner to take up 100% of the screen width. |
boolean
|
false
|
|