Banner
A banner is a 1-line, full color, full width container that can be used to communicate short snippets of information to users. Banners are un-intrusive and non-dismissible.
Overview
Installation
npm install @patternfly/elementsUsage
View HTML Source
<pf-banner>Default</pf-banner>
With a variant
Available variants are: default, info, danger, success, warning
View HTML Source
<pf-banner variant="default">Default</pf-banner>
<pf-banner variant="info">Info</pf-banner>
<pf-banner variant="danger">Danger</pf-banner>
<pf-banner variant="success">Success</pf-banner>
<pf-banner variant="warning">Warning</pf-banner>
Sticky
Banners can be set to stick to the top of their container by adding the sticky attribute.
View HTML Source
<pf-banner sticky>Sticky</pf-banner>
With an icon
You can add a icon by using the shorthand icon attribute
View HTML Source
<pf-banner icon="info">Info</pf-banner>
Or you can use the icon slot and slot in a svg or pf-icon element
View HTML Source
<pf-banner>
<pf-icon slot="icon" icon="info-circle"></pf-icon>
Info
</pf-banner>
Slots
-
icon -
Contains the labels's icon, e.g. web-icon-alert-success.
- Default Slot
-
Contains the text for the banner
Attributes
variant-
Changes the visual appearance of the banner.
- DOM Property
variant- Type
-
BannerVariant | undefined - Default
-
unknown
icon-
Shorthand for the
iconslot, the value is icon name- DOM Property
icon- Type
-
string | undefined - Default
-
unknown
sticky-
Shorthand for the
iconslot, the value is icon name- DOM Property
sticky- Type
-
boolean - Default
-
false
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-banner--PaddingTop |
0.25rem
|
|
--pf-c-banner--PaddingRight |
1rem
|
|
--pf-c-banner--PaddingBottom |
0.25rem
|
|
--pf-c-banner--PaddingLeft |
1rem
|
|
--pf-c-banner--md--PaddingRight |
1.5rem
|
|
--pf-c-banner--md--PaddingLeft |
1.5rem
|
|
--pf-c-banner--FontSize |
0.875rem
|
|
--pf-c-banner--BackgroundColor |
#4f5255
|
|
--pf-c-banner--m-info--BackgroundColor |
#73bcf7
|
|
--pf-c-banner--m-danger--BackgroundColor |
#c9190b
|
|
--pf-c-banner--m-success--BackgroundColor |
#3e8635
|
|
--pf-c-banner--m-warning--BackgroundColor |
#f0ab00
|
|
--pf-c-banner--m-sticky--ZIndex |
300
|
|
--pf-c-banner--m-sticky--BoxShadow |
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
|
CSS Shadow Parts
container-
The container of the banner
