{% include '@bolt-components-banner/banner.twig' with {
content: 'This is a banner component.'
} only %}
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
|
|
align
|
Sets the text alignment of the content. |
string
|
center
|
|
dismiss
|
Accepts a button to be used for dismissal. |
any
| — |
|
npm install @bolt/components-banner
{% include '@bolt-components-banner/banner.twig' with {
content: 'This is a banner component.'
} only %}
status
value is information
.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.{% include '@bolt-components-banner/banner.twig' with {
content: 'This is a banner component.',
status: 'error'
} only %}
align
prop uses start
and end
values to support RTL languages.{% include '@bolt-components-banner/banner.twig' with {
content: 'This is a banner component.'
align: 'start'
} only %}
{% 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 %}
{% include '@bolt-components-banner/banner.twig' with {
content: 'You passed this challenge on <strong>May 21, 2020</strong>. ' ~ link,
} only %}
{% 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 %}