banner docs

Banner

A content container that delivers important messages to the user.

Published Last updated: 5.8.0 Change log Github NPM
Twig Usage
Twig 
{% 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
Install Install
Bash 
npm install @bolt/components-banner
Dependencies @bolt/core-v3.x @bolt/lazy-queue

banner

This is a banner

banner status variations

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

banner align variations

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

banner with web component

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
HTML 
<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
HTML 
<bolt-banner status="success" align="start">
  You passed this challenge on <strong>May 21, 2020</strong>. <a href="https://google.com" class="e-bolt-text-link">View Details</a>
</bolt-banner>