Examples
Documentation
Overview
Always add a modifier class. Never use the class .pf-c-badge
on its own.
Usage
Class | Applied to | Outcome |
---|---|---|
.pf-c-badge | <span> | Initiates a badge. Always use with a modifier class. |
.pf-m-read | .pf-c-badge | Applies read badge styling. |
.pf-m-unread | .pf-c-badge | Applies unread badge styling. |
CSS variables
.pf-c-badge | --pf-c-badge--BorderRadius | 30em | |
.pf-c-badge | --pf-c-badge--FontSize | 0.75rem | |
.pf-c-badge | --pf-c-badge--FontWeight | 700 | |
.pf-c-badge | --pf-c-badge--PaddingRight | 0.5rem | |
.pf-c-badge | --pf-c-badge--PaddingLeft | 0.5rem | |
.pf-c-badge | --pf-c-badge--Color | #151515 | |
.pf-c-badge | --pf-c-badge--MinWidth | 2rem | |
.pf-c-badge | --pf-c-badge--m-read--BackgroundColor | #f0f0f0 | |
.pf-c-badge | --pf-c-badge--m-read--Color | #151515 | |
.pf-c-badge | --pf-c-badge--m-unread--BackgroundColor | #06c | |
.pf-c-badge | --pf-c-badge--m-unread--Color | #fff | |
.pf-c-badge.pf-m-read | --pf-c-badge--Color | #151515 | |
.pf-c-badge.pf-m-read | --pf-c-badge--BackgroundColor | #f0f0f0 | |
.pf-c-badge.pf-m-unread | --pf-c-badge--Color | #fff | |
.pf-c-badge.pf-m-unread | --pf-c-badge--BackgroundColor | #06c | |
View source on GitHub