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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
|
---
id: 'Banner'
section: components
cssPrefix: pf-v6-c-banner
---## Examples
### Basic
Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
```html
<div class="pf-v6-c-banner">Default banner</div>
<br />
<div class="pf-v6-c-banner pf-m-red">Red banner</div>
<br />
<div class="pf-v6-c-banner pf-m-orangered">Orangered banner</div>
<br />
<div class="pf-v6-c-banner pf-m-orange">Orange banner</div>
<br />
<div class="pf-v6-c-banner pf-m-yellow">Yellow banner</div>
<br />
<div class="pf-v6-c-banner pf-m-green">Green banner</div>
<br />
<div class="pf-v6-c-banner pf-m-teal">Teal banner</div>
<br />
<div class="pf-v6-c-banner pf-m-blue">Blue banner</div>
<br />
<div class="pf-v6-c-banner pf-m-purple">Purple banner</div>
```
### Banner with links
```html
<div class="pf-v6-c-banner">
Default banner with a
<a
href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
>link</a>
</div>
<br />
<div class="pf-v6-c-banner">
Default banner with a
<a
class="pf-m-disabled"
role="link"
aria-disabled="true"
>disabled link</a>
</div>
<br />
<div class="pf-v6-c-banner pf-m-blue">
Blue banner with an
<button
class="pf-v6-c-button pf-m-inline pf-m-link"
type="button"
>
<span class="pf-v6-c-button__text">inline link button</span>
</button>
</div>
<br />
<div class="pf-v6-c-banner pf-m-yellow">
Yellow banner with an
<a
class="pf-v6-c-button pf-m-inline pf-m-link"
href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
>
<span class="pf-v6-c-button__text">inline link button (anchor)</span>
</a>
</div>
<br />
<div class="pf-v6-c-banner pf-m-red">
Red banner with a
<button
class="pf-v6-c-button pf-m-inline pf-m-link"
type="button"
disabled
>
<span class="pf-v6-c-button__text">disabled inline link button</span>
</button>
</div>
```
### Status
When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v6-screen-reader` or an equivalent.
```html
<div class="pf-v6-c-banner pf-m-success">
<div class="pf-v6-l-flex pf-m-space-items-sm">
<div class="pf-v6-l-flex__item">
<span class="pf-v6-screen-reader">Success banner:</span>
<i class="fas fa-check-circle" aria-hidden="true"></i>
</div>
<div class="pf-v6-l-flex__item">Success banner</div>
</div>
</div>
<br />
<div class="pf-v6-c-banner pf-m-warning">
<div class="pf-v6-l-flex pf-m-space-items-sm">
<div class="pf-v6-l-flex__item">
<span class="pf-v6-screen-reader">Warning banner:</span>
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
</div>
<div class="pf-v6-l-flex__item">Warning banner</div>
</div>
</div>
<br />
<div class="pf-v6-c-banner pf-m-danger">
<div class="pf-v6-l-flex pf-m-space-items-sm">
<div class="pf-v6-l-flex__item">
<span class="pf-v6-screen-reader">Danger banner:</span>
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
</div>
<div class="pf-v6-l-flex__item">Danger banner</div>
</div>
</div>
<br />
<div class="pf-v6-c-banner pf-m-info">
<div class="pf-v6-l-flex pf-m-space-items-sm">
<div class="pf-v6-l-flex__item">
<span class="pf-v6-screen-reader">Custom status banner:</span>
<i class="fas fa-info-circle" aria-hidden="true"></i>
</div>
<div class="pf-v6-l-flex__item">Info banner</div>
</div>
</div>
<br />
<div class="pf-v6-c-banner pf-m-custom">
<div class="pf-v6-l-flex pf-m-space-items-sm">
<div class="pf-v6-l-flex__item">
<span class="pf-v6-screen-reader">Custom status banner:</span>
<i class="fas fa-bell" aria-hidden="true"></i>
</div>
<div class="pf-v6-l-flex__item">Custom banner</div>
</div>
</div>
```
## Documentation
### Usage
| Class | Applied to | Outcome |
| -- | -- | -- |
| `.pf-v6-c-banner` | `<div>` | Initiates a banner. **Required** |
| `.pf-m-red` | `.pf-v6-c-banner` | Modifies banner for red styling. |
| `.pf-m-orangered` | `.pf-v6-c-banner` | Modifies banner for orangered styling. |
| `.pf-m-orange` | `.pf-v6-c-banner` | Modifies banner for orange styling. |
| `.pf-m-yellow` | `.pf-v6-c-banner` | Modifies banner for yellow styling. |
| `.pf-m-green` | `.pf-v6-c-banner` | Modifies banner for green styling. |
| `.pf-m-teal` | `.pf-v6-c-banner` | Modifies banner for teal styling. |
| `.pf-m-blue` | `.pf-v6-c-banner` | Modifies banner for blue styling. |
| `.pf-m-purple` | `.pf-v6-c-banner` | Modifies banner for purple styling. |
| `.pf-m-success` | `.pf-v6-c-banner` | Modifies banner for success status styling. |
| `.pf-m-warning` | `.pf-v6-c-banner` | Modifies banner for warning status styling. |
| `.pf-m-danger` | `.pf-v6-c-banner` | Modifies banner for danger status styling. |
| `.pf-m-info` | `.pf-v6-c-banner` | Modifies banner for info status styling. |
| `.pf-m-custom` | `.pf-v6-c-banner` | Modifies banner for custom status styling. |
| `.pf-m-sticky` | `.pf-v6-c-banner` | Modifies banner to be sticky to the top of its container. |
|
