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 - Default
-
unknown
icon-
Shorthand for the
iconslot, the value is icon name- DOM Property
icon- Type
-
string - Default
-
unknown
Methods
None
Events
None
CSS Custom Properties
| CSS Property | Description | Default |
|---|---|---|
--pf-c-banner--link--Color |
Link color for banner (references banner color) |
var(--pf-c-banner--Color)
|
--pf-c-banner--link--TextDecoration |
Link text decoration for banner |
underline
|
--pf-c-banner--link--hover--Color |
Link hover color for banner (references banner color) |
var(--pf-c-banner--Color)
|
--pf-c-banner--link--hover--FontWeight |
Link hover font weight for banner |
var(--pf-global--FontWeight--semi-bold, 700)
|
--pf-global--FontWeight--semi-bold |
700
|
|
--pf-c-banner--link--disabled--Color |
Disabled link color for banner (references banner color) |
var(--pf-c-banner--Color)
|
--pf-c-banner--Color |
Text color for banner |
var(--pf-global--Color--100, #151515)
|
--pf-c-banner--link--disabled--TextDecoration |
Disabled link text decoration for banner |
none
|
--pf-c-banner--PaddingTop |
Top padding for banner |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-c-banner--PaddingRight |
Right padding for banner |
var(--pf-global--spacer--md, 1rem)
|
--pf-c-banner--PaddingBottom |
Bottom padding for banner |
var(--pf-global--spacer--xs, 0.25rem)
|
--pf-global--spacer--xs |
0.25rem
|
|
--pf-c-banner--PaddingLeft |
Left padding for banner |
var(--pf-global--spacer--md, 1rem)
|
--pf-global--spacer--md |
1rem
|
|
--pf-c-banner--FontSize |
Font size for banner |
var(--pf-global--FontSize--sm, 0.875rem)
|
--pf-global--FontSize--sm |
0.875rem
|
|
--pf-global--Color--light-100 |
#ffffff
|
|
--pf-c-banner--BackgroundColor |
Background color for banner |
var(--pf-global--BackgroundColor--dark-400, #4f5255)
|
--pf-global--BackgroundColor--dark-400 |
#4f5255
|
|
--pf-c-banner--m-info--BackgroundColor |
Background color for info banner |
var(--pf-global--palette--blue-200, #73bcf7)
|
--pf-global--palette--blue-200 |
#73bcf7
|
|
--pf-c-banner--m-danger--BackgroundColor |
Background color for danger banner |
var(--pf-global--danger-color--100, #c9190b)
|
--pf-global--danger-color--100 |
#c9190b
|
|
--pf-c-banner--m-success--BackgroundColor |
Background color for success banner |
var(--pf-global--success-color--100, #3e8635)
|
--pf-global--success-color--100 |
#3e8635
|
|
--pf-global--Color--100 |
var(--pf-global--Color--dark-100, #151515)
|
|
--pf-global--Color--dark-100 |
#151515
|
|
--pf-c-banner--m-warning--BackgroundColor |
Background color for warning banner |
var(--pf-global--warning-color--100, #f0ab00)
|
--pf-global--warning-color--100 |
#f0ab00
|
|
--pf-l-flex--Display |
flex
|
|
--pf-l-flex--FlexWrap |
wrap
|
|
--pf-l-flex--AlignItems |
baseline
|
|
--pf-l-flex--spacer |
var(--pf-l-flex--spacer--sm, var(--pf-global--spacer--sm, 0.5rem))
|
|
--pf-l-flex--spacer--sm |
var(--pf-global--spacer--sm, 0.5rem)
|
|
--pf-global--spacer--sm |
0.5rem
|
|
--pf-c-banner--m-sticky--ZIndex |
Z-index for sticky banner |
var(--pf-global--ZIndex--md, 300)
|
--pf-global--ZIndex--md |
300
|
|
--pf-c-banner--m-sticky--BoxShadow |
Box shadow for sticky banner |
var(--pf-global--BoxShadow--md-bottom, 0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18))
|
--pf-global--BoxShadow--md-bottom |
0 0.5rem 0.5rem -0.375rem rgba(3, 3, 3, 0.18)
|
|
--pf-c-banner--md--PaddingRight |
Right padding for banner on medium screens |
var(--pf-global--spacer--lg, 1.5rem)
|
--pf-c-banner--md--PaddingLeft |
Left padding for banner on medium screens |
var(--pf-global--spacer--lg, 1.5rem)
|
--pf-global--spacer--lg |
1.5rem
|
CSS Shadow Parts
container-
The container of the banner
icon-
Contains the labels's icon, e.g. web-icon-alert-success.
