Examples
Documentation
Overview
Always add a modifier class to indicate read, unread, or attention state. Never use the class .pf-c-notification-badge on its own. This component is designed to be used within a dark component such as the masthead.
Accessibility
Be sure that the component associated with this indicator handles screen reader text indicating read or unread notifications.
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-notification-badge | <div> | Initiates a notification badge. Always use it with a modifier class. |
.pf-c-notification-badge__count | <span> | Initiates a notification badge count. |
.pf-m-read | .pf-c-notification-badge | Applies read notification badge styling. |
.pf-m-unread | .pf-c-notification-badge | Applies unread notification badge styling. |
.pf-m-attention | .pf-c-notification-badge | Applies attention notification badge styling. |
.pf-m-expanded | .pf-c-notification-badge | Applies expanded notification badge styling. |
CSS variables
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingTop | 0.375rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingRight | 1rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingBottom | 0.375rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--PaddingLeft | 1rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginTop | calc(-1 * 0.375rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginRight | calc(-1 * 1rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginBottom | calc(-1 * 0.375rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--MarginLeft | calc(-1 * 1rem) | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BorderColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BorderRadius | 3px | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BorderWidth | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Top | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Right | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Width | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--Height | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--BackgroundColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--TranslateX | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--after--TranslateY | 0 | ||
| .pf-c-notification-badge | --pf-c-notification-badge__i--Width | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge__i--Height | auto | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-read--after--BorderColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-read--after--BackgroundColor | transparent | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-read--m-expanded--after--BackgroundColor | #3c3f42 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-unread--Color | #fff | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-unread--after--BackgroundColor | #06c | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-unread--hover--after--BackgroundColor | #004080 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-unread--m-expanded--after--BackgroundColor | #004080 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-attention--Color | #fff | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-attention--after--BackgroundColor | #c9190b | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-attention--hover--after--BackgroundColor | #a30000 | ||
| .pf-c-notification-badge | --pf-c-notification-badge--m-attention--m-expanded--after--BackgroundColor | #a30000 | ||
| .pf-c-notification-badge | --pf-c-notification-badge__count--MarginLeft | 0.25rem | ||
| .pf-c-notification-badge | --pf-c-notification-badge--pf-icon-attention-bell--LineHeight | 1.3 | ||
| .pf-c-notification-badge.pf-m-read | --pf-c-notification-badge--after--BackgroundColor | transparent | ||
| .pf-c-notification-badge.pf-m-read | --pf-c-notification-badge--after--BorderColor | transparent | ||
| .pf-c-notification-badge.pf-m-unread | --pf-c-notification-badge--after--BackgroundColor | #06c | ||
| .pf-c-notification-badge.pf-m-unread:hover | --pf-c-notification-badge--after--BackgroundColor | #004080 | ||
| .pf-c-notification-badge.pf-m-attention | --pf-c-notification-badge--after--BackgroundColor | #c9190b | ||
| .pf-c-notification-badge.pf-m-attention:hover | --pf-c-notification-badge--m-attention--after--BackgroundColor | #a30000 | ||
| .pf-c-notification-badge.pf-m-expanded | --pf-c-notification-badge--m-read--Color | #fff | ||
| .pf-c-notification-badge.pf-m-expanded | --pf-c-notification-badge--m-read--after--BackgroundColor | #3c3f42 | ||
| .pf-c-notification-badge.pf-m-expanded | --pf-c-notification-badge--m-unread--after--BackgroundColor | #004080 | ||
| .pf-c-notification-badge.pf-m-expanded | --pf-c-notification-badge--m-attention--after--BackgroundColor | #a30000 | ||
View source on GitHub