UNPKG

@patternfly/patternfly

Version:

Assets, source, tooling, and content for PatternFly 4

github.com/patternfly/patternfly

patternfly/patternfly

39 lines (29 loc) • 1.08 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
--- id: Badge section: components cssPrefix: pf-c-badge --- ## Examples ### Read ```html <span class="pf-c-badge pf-m-read">7</span> <span class="pf-c-badge pf-m-read">24</span> <span class="pf-c-badge pf-m-read">240</span> <span class="pf-c-badge pf-m-read">999+</span> ``` ### Unread ```html <span class="pf-c-badge pf-m-unread">7</span> <span class="pf-c-badge pf-m-unread">24</span> <span class="pf-c-badge pf-m-unread">240</span> <span class="pf-c-badge pf-m-unread">999+</span> ``` ## 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. |