2.20.0

Banner

A content container that delivers important messages to the user.

Published

History
View changes
Install
yarn add @bolt/components-banner
Source code
View on Github
Dependencies
@bolt/core-v3.x

Overview

Banner component. Part of the Bolt “Components” CSS framework that powers the Bolt Design System.

Install via NPM
npm install @bolt/components-banner
Overview Usage Schema Edit this page

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
  • —
Debug Panel