Banner

A content container that delivers important messages to the user.

Published Last updated: 2.25.1 Change log Github NPM
Twig Usage 
  {% include "@bolt-components-banner/banner.twig" with {
  content: "This is the banner content."
} 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 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
  • error , warning , success , information
align

Sets the text alignment of the content.

 string center
  • start , center , end
full

Sets the width of the banner to take up 100% of the screen width.

 boolean false
  • —
Install Install 
  npm install @bolt/components-banner
Dependencies @bolt/core-v3.x @bolt/lazy-queue