banner docs

Banner

A content container that delivers important messages to the user.

Twig Usage
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.'
} 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 banner.

object
content

The main banner content.

any
status

Sets the status that the banner is trying to convey.

string information
  • information, error, warning, success
align

Sets the text alignment of the content.

string center
  • start, center, end
dismiss

Accepts a button to be used for dismissal.

any
Install Install
npm install @bolt/components-banner
Dependencies @bolt/core

banner

Basic Banner A slim container used to call attention to a short message. Demo
This is a banner component.
Twig
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.'
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner status

Banner Status Use this to change the color of the banner based on the priority of your message.
Important Notes: The default status value is information. Use the t-bolt- theme classes found in the Theming System. Note that you will have to set a status as well to avoid the blue line given by the information default.
Demo
Light
This is a banner component.
This is a banner component.
This is a banner component.
This is a banner component.
Dark
This is a banner component.
This is a banner component.
This is a banner component.
This is a banner component.
Twig
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.',
  status: 'error'
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner align

Banner Align A simple text alignment property.
Important Notes: The align prop uses start and end values to support RTL languages.
Demo
This is a banner component.
This is a banner component.
This is a banner component.
Twig
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.'
  align: 'start'
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner dismiss

Banner Dismiss A button passed here will be placed in the top right of the banner.
Important Notes: The functionality of the button should be provided by the user. The button in the demo is the recommended style, any deviation may not be fully supported.
Demo
This is a banner component.
Twig
{% set icon_close %}
  {% include '@bolt-elements-icon/icon.twig' with {
    name: 'close',
  } only %}
{% endset %}

{% set dismiss_button %}
  {% include '@bolt-elements-button/button.twig' with {
    content: 'Download',
    icon_only: icon_close,
    size: 'xsmall',
    border_radius: 'full',
    hierarchy: 'transparent',
    attributes: {
      type: 'button',
    }
  } only %}
{% endset %}

{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is a banner component.',
  dismiss: dismiss_button,
} only %}
HTML
Not available in plain HTML. Please use Twig.

banner use case notes

Banner with Important Notes A banner showing Important Notes, seen all over our documentation. Demo
Important Notes: Lorem Ipsum Lorem Ipsum
Twig
{% set notes_content %}
  <bolt-text headline tag="h3" font-size="medium">Important Notes:</bolt-text>
  <bolt-ol>
    <bolt-li>Lorem Ipsum</bolt-li>
    <bolt-li>Lorem Ipsum</bolt-li>
  </bolt-ol>
{% endset %}

{% include '@bolt-components-banner/banner.twig' with {
  content: notes_content,
  align: 'start',
} only %}
HTML
Not available in plain HTML. Please use Twig.