Examples
CSS variables
Expand or collapse column | Selector | Variable | Value | |
---|---|---|---|---|
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingBlockStart | 0.25rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingInlineEnd | 1rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--md--PaddingInlineEnd | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingBlockEnd | 0.25rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--PaddingInlineStart | 1rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--md--PaddingInlineStart | 1.5rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--FontSize | 0.875rem | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--TextDecoration | underline | ||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--hover--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--hover--FontWeight | 500 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--disabled--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--link--disabled--TextDecoration | none | ||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-sticky--ZIndex | 300 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-sticky--BoxShadow | 0px
4px
8px
0px
rgba(0, 0, 0, 0.1200) | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-danger--BackgroundColor | (In light theme) #b1380b | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-danger--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-success--BackgroundColor | (In light theme) #3d7317 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-success--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-warning--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-warning--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-info--BackgroundColor | (In light theme) #5e40be | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-info--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-custom--BackgroundColor | (In light theme) #147878 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-custom--Color | (In light theme) #ffffff | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-red--BackgroundColor | (In light theme) #fbc5c5 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-red--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orangered--BackgroundColor | (In light theme) #fbbea8 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orangered--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orange--BackgroundColor | (In light theme) #fccb8f | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-orange--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-yellow--BackgroundColor | (In light theme) #ffe072 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-yellow--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-green--BackgroundColor | (In light theme) #d1f1bb | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-green--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-teal--BackgroundColor | (In light theme) #b9e5e5 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-teal--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-blue--BackgroundColor | (In light theme) #b9dafc | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-blue--Color | (In light theme) #151515 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-purple--BackgroundColor | (In light theme) #d0c5f4 | ||
| ||||
:where(:root, .pf-v6-c-banner) | --pf-v6-c-banner--m-purple--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-danger | --pf-v6-c-banner--BackgroundColor | (In light theme) #b1380b | ||
| ||||
.pf-v6-c-banner.pf-m-danger | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-success | --pf-v6-c-banner--BackgroundColor | (In light theme) #3d7317 | ||
| ||||
.pf-v6-c-banner.pf-m-success | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-warning | --pf-v6-c-banner--BackgroundColor | (In light theme) #ffcc17 | ||
| ||||
.pf-v6-c-banner.pf-m-warning | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-info | --pf-v6-c-banner--BackgroundColor | (In light theme) #5e40be | ||
| ||||
.pf-v6-c-banner.pf-m-info | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-custom | --pf-v6-c-banner--BackgroundColor | (In light theme) #147878 | ||
| ||||
.pf-v6-c-banner.pf-m-custom | --pf-v6-c-banner--Color | (In light theme) #ffffff | ||
| ||||
.pf-v6-c-banner.pf-m-red | --pf-v6-c-banner--BackgroundColor | (In light theme) #fbc5c5 | ||
| ||||
.pf-v6-c-banner.pf-m-red | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-orangered | --pf-v6-c-banner--BackgroundColor | (In light theme) #fbbea8 | ||
| ||||
.pf-v6-c-banner.pf-m-orangered | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-orange | --pf-v6-c-banner--BackgroundColor | (In light theme) #fccb8f | ||
| ||||
.pf-v6-c-banner.pf-m-orange | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-yellow | --pf-v6-c-banner--BackgroundColor | (In light theme) #ffe072 | ||
| ||||
.pf-v6-c-banner.pf-m-yellow | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-green | --pf-v6-c-banner--BackgroundColor | (In light theme) #d1f1bb | ||
| ||||
.pf-v6-c-banner.pf-m-green | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-teal | --pf-v6-c-banner--BackgroundColor | (In light theme) #b9e5e5 | ||
| ||||
.pf-v6-c-banner.pf-m-teal | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-blue | --pf-v6-c-banner--BackgroundColor | (In light theme) #b9dafc | ||
| ||||
.pf-v6-c-banner.pf-m-blue | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner.pf-m-purple | --pf-v6-c-banner--BackgroundColor | (In light theme) #d0c5f4 | ||
| ||||
.pf-v6-c-banner.pf-m-purple | --pf-v6-c-banner--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner a:hover:not(.pf-m-disabled) | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner a.pf-m-disabled | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner a.pf-m-disabled | --pf-v6-c-banner--link--TextDecoration | none | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline | --pf-v6-c-button--m-link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline | --pf-v6-c-button--m-link--m-inline--hover--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline | --pf-v6-c-button--disabled--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:hover | --pf-v6-c-banner--link--Color | (In light theme) #151515 | ||
| ||||
.pf-v6-c-banner .pf-v6-c-button.pf-m-inline:disabled | --pf-v6-c-banner--link--TextDecoration | none | ||
|