banner docs

2.24.0

Banner

A content container that delivers important messages to the user.

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

Install via NPM
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
  • 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

banner

This is a banner
Status
This banner is trying to convey error
This banner is trying to convey warning
This banner is trying to convey success
This banner is trying to convey information
Text alignment
This banner's text is aligned to the start
This banner's text is aligned to the center
This banner's text is aligned to the end
Academy Challenge Status
You passed this challenge on May 21, 2020. View Details
You failed this challenge on May 21, 2020. View Details
Web Component Usage Bolt Banner is a web component, you can simply use <bolt-banner> in the markup to make it render.
This is a banner
<bolt-banner> This is a banner </bolt-banner>
Prop Usage Configure the banner with the properties specified in the schema.
You passed this challenge on May 21, 2020. View Details
<bolt-banner status="success" align="start"> You passed this challenge on <strong>May 21, 2020</strong>. <bolt-link url="https://pega.com">View Details</bolt-link> </bolt-banner>
Debug Panel