@patternfly/patternfly 4.176.2 → 4.176.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/docs/demos/Alert/examples/Alert.md +52 -359
- package/docs/demos/BackToTop/examples/BackToTop.md +5 -505
- package/docs/demos/Card/examples/Card.md +42 -14
- package/docs/demos/ContextSelector/examples/ContextSelector.md +46 -1051
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +80 -1225
- package/docs/demos/Masthead/examples/Masthead.md +2 -2
- package/docs/demos/Nav/examples/Nav.md +9 -301
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +162 -3084
- package/docs/demos/Table/examples/Table.md +183 -18031
- package/docs/demos/Tabs/examples/Tabs.md +686 -7387
- package/docs/demos/Toolbar/examples/Toolbar.md +44 -1027
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/package.json +1 -1
- package/patternfly-no-reset.css +10 -9
- package/patternfly.css +10 -9
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -4,3115 +4,193 @@ section: components
|
|
|
4
4
|
wrapperTag: div
|
|
5
5
|
---## Demos
|
|
6
6
|
|
|
7
|
-
###
|
|
8
|
-
|
|
9
|
-
```html isFullscreen
|
|
10
|
-
<div class="pf-c-page" id="page-demo-masthead-component">
|
|
11
|
-
<header class="pf-c-page__header">
|
|
12
|
-
<a
|
|
13
|
-
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
14
|
-
href="#main-content-page-demo-masthead-component"
|
|
15
|
-
>Skip to content</a>
|
|
16
|
-
<header class="pf-c-masthead" id="page-demo-masthead-component-masthead">
|
|
17
|
-
<span class="pf-c-masthead__toggle">
|
|
18
|
-
<button
|
|
19
|
-
class="pf-c-button pf-m-plain"
|
|
20
|
-
type="button"
|
|
21
|
-
aria-label="Global navigation"
|
|
22
|
-
>
|
|
23
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
24
|
-
</button>
|
|
25
|
-
</span>
|
|
26
|
-
<div class="pf-c-masthead__main">
|
|
27
|
-
<a class="pf-c-masthead__brand" href="#">
|
|
28
|
-
<img
|
|
29
|
-
class="pf-c-brand"
|
|
30
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
31
|
-
alt="PatternFly logo"
|
|
32
|
-
/>
|
|
33
|
-
</a>
|
|
34
|
-
</div>
|
|
35
|
-
<div class="pf-c-masthead__content">test</div>
|
|
36
|
-
</header>
|
|
37
|
-
</header>
|
|
38
|
-
<div class="pf-c-page__sidebar">
|
|
39
|
-
<div class="pf-c-page__sidebar-body">
|
|
40
|
-
<nav
|
|
41
|
-
class="pf-c-nav"
|
|
42
|
-
id="page-demo-masthead-component-primary-nav"
|
|
43
|
-
aria-label="Global"
|
|
44
|
-
>
|
|
45
|
-
<ul class="pf-c-nav__list">
|
|
46
|
-
<li class="pf-c-nav__item">
|
|
47
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
48
|
-
</li>
|
|
49
|
-
<li class="pf-c-nav__item">
|
|
50
|
-
<a
|
|
51
|
-
href="#"
|
|
52
|
-
class="pf-c-nav__link pf-m-current"
|
|
53
|
-
aria-current="page"
|
|
54
|
-
>Policy</a>
|
|
55
|
-
</li>
|
|
56
|
-
<li class="pf-c-nav__item">
|
|
57
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
58
|
-
</li>
|
|
59
|
-
<li class="pf-c-nav__item">
|
|
60
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
61
|
-
</li>
|
|
62
|
-
<li class="pf-c-nav__item">
|
|
63
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
64
|
-
</li>
|
|
65
|
-
</ul>
|
|
66
|
-
</nav>
|
|
67
|
-
</div>
|
|
68
|
-
</div>
|
|
69
|
-
<main
|
|
70
|
-
class="pf-c-page__main"
|
|
71
|
-
tabindex="-1"
|
|
72
|
-
id="main-content-page-demo-masthead-component"
|
|
73
|
-
>
|
|
74
|
-
<section
|
|
75
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
|
|
76
|
-
>
|
|
77
|
-
<div class="pf-c-page__main-body">
|
|
78
|
-
<div class="pf-c-content">
|
|
79
|
-
<h1>Main title</h1>
|
|
80
|
-
<p>This is a demo of the page component.</p>
|
|
81
|
-
</div>
|
|
82
|
-
</div>
|
|
83
|
-
</section>
|
|
84
|
-
<section
|
|
85
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
|
|
86
|
-
>
|
|
87
|
-
<div class="pf-c-page__main-body">
|
|
88
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
89
|
-
<div class="pf-l-gallery__item">
|
|
90
|
-
<div class="pf-c-card">
|
|
91
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
92
|
-
</div>
|
|
93
|
-
</div>
|
|
94
|
-
<div class="pf-l-gallery__item">
|
|
95
|
-
<div class="pf-c-card">
|
|
96
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
97
|
-
</div>
|
|
98
|
-
</div>
|
|
99
|
-
<div class="pf-l-gallery__item">
|
|
100
|
-
<div class="pf-c-card">
|
|
101
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
102
|
-
</div>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="pf-l-gallery__item">
|
|
105
|
-
<div class="pf-c-card">
|
|
106
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
107
|
-
</div>
|
|
108
|
-
</div>
|
|
109
|
-
<div class="pf-l-gallery__item">
|
|
110
|
-
<div class="pf-c-card">
|
|
111
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
112
|
-
</div>
|
|
113
|
-
</div>
|
|
114
|
-
<div class="pf-l-gallery__item">
|
|
115
|
-
<div class="pf-c-card">
|
|
116
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
<div class="pf-l-gallery__item">
|
|
120
|
-
<div class="pf-c-card">
|
|
121
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
122
|
-
</div>
|
|
123
|
-
</div>
|
|
124
|
-
<div class="pf-l-gallery__item">
|
|
125
|
-
<div class="pf-c-card">
|
|
126
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
127
|
-
</div>
|
|
128
|
-
</div>
|
|
129
|
-
<div class="pf-l-gallery__item">
|
|
130
|
-
<div class="pf-c-card">
|
|
131
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
134
|
-
<div class="pf-l-gallery__item">
|
|
135
|
-
<div class="pf-c-card">
|
|
136
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
137
|
-
</div>
|
|
138
|
-
</div>
|
|
139
|
-
</div>
|
|
140
|
-
</div>
|
|
141
|
-
</section>
|
|
142
|
-
<section
|
|
143
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
|
|
144
|
-
>
|
|
145
|
-
<div class="pf-c-page__main-body">
|
|
146
|
-
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
147
|
-
</div>
|
|
148
|
-
</section>
|
|
149
|
-
</main>
|
|
150
|
-
</div>
|
|
7
|
+
### Basic
|
|
151
8
|
|
|
9
|
+
```hbs isFullscreen
|
|
10
|
+
{{> page-template page-template--id="page-demo-basic"}}
|
|
152
11
|
```
|
|
153
12
|
|
|
154
13
|
### Sticky horizontal subnav
|
|
155
14
|
|
|
156
|
-
```
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
<div class="pf-c-page__header-brand">
|
|
164
|
-
<div class="pf-c-page__header-brand-toggle">
|
|
165
|
-
<button
|
|
166
|
-
class="pf-c-button pf-m-plain"
|
|
167
|
-
type="button"
|
|
168
|
-
id="page-demo-sticky-top-horizontal-subnav-nav-toggle"
|
|
169
|
-
aria-label="Global navigation"
|
|
170
|
-
aria-expanded="true"
|
|
171
|
-
aria-controls="page-demo-sticky-top-horizontal-subnav-primary-nav"
|
|
172
|
-
>
|
|
173
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
174
|
-
</button>
|
|
175
|
-
</div>
|
|
176
|
-
<a href="#" class="pf-c-page__header-brand-link">
|
|
177
|
-
<img
|
|
178
|
-
class="pf-c-brand"
|
|
179
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
180
|
-
alt="PatternFly logo"
|
|
181
|
-
/>
|
|
182
|
-
</a>
|
|
183
|
-
</div>
|
|
184
|
-
|
|
185
|
-
<div class="pf-c-page__header-tools">
|
|
186
|
-
<div class="pf-c-page__header-tools-group">
|
|
187
|
-
<div
|
|
188
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
189
|
-
>
|
|
190
|
-
<button
|
|
191
|
-
class="pf-c-button pf-m-plain"
|
|
192
|
-
type="button"
|
|
193
|
-
aria-label="Settings"
|
|
194
|
-
>
|
|
195
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
196
|
-
</button>
|
|
197
|
-
</div>
|
|
198
|
-
<div
|
|
199
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
200
|
-
>
|
|
201
|
-
<button
|
|
202
|
-
class="pf-c-button pf-m-plain"
|
|
203
|
-
type="button"
|
|
204
|
-
aria-label="Help"
|
|
205
|
-
>
|
|
206
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
207
|
-
</button>
|
|
208
|
-
</div>
|
|
209
|
-
</div>
|
|
210
|
-
<div class="pf-c-page__header-tools-group">
|
|
211
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
212
|
-
<div class="pf-c-dropdown">
|
|
213
|
-
<button
|
|
214
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
215
|
-
id="page-demo-sticky-top-horizontal-subnav-dropdown-kebab-1-button"
|
|
216
|
-
aria-expanded="false"
|
|
217
|
-
type="button"
|
|
218
|
-
aria-label="Actions"
|
|
219
|
-
>
|
|
220
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
221
|
-
</button>
|
|
222
|
-
<ul
|
|
223
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
224
|
-
aria-labelledby="page-demo-sticky-top-horizontal-subnav-dropdown-kebab-1-button"
|
|
225
|
-
hidden
|
|
226
|
-
>
|
|
227
|
-
<li>
|
|
228
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
229
|
-
</li>
|
|
230
|
-
<li>
|
|
231
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
232
|
-
</li>
|
|
233
|
-
<li>
|
|
234
|
-
<a
|
|
235
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
236
|
-
href="#"
|
|
237
|
-
aria-disabled="true"
|
|
238
|
-
tabindex="-1"
|
|
239
|
-
>Disabled link</a>
|
|
240
|
-
</li>
|
|
241
|
-
<li>
|
|
242
|
-
<button
|
|
243
|
-
class="pf-c-dropdown__menu-item"
|
|
244
|
-
type="button"
|
|
245
|
-
disabled
|
|
246
|
-
>Disabled action</button>
|
|
247
|
-
</li>
|
|
248
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
249
|
-
<li>
|
|
250
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
251
|
-
</li>
|
|
252
|
-
</ul>
|
|
253
|
-
</div>
|
|
254
|
-
</div>
|
|
255
|
-
<div
|
|
256
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
257
|
-
>
|
|
258
|
-
<div class="pf-c-dropdown">
|
|
259
|
-
<button
|
|
260
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
261
|
-
id="page-demo-sticky-top-horizontal-subnav-dropdown-kebab-2-button"
|
|
262
|
-
aria-expanded="false"
|
|
263
|
-
type="button"
|
|
264
|
-
>
|
|
265
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
266
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
267
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
268
|
-
</span>
|
|
269
|
-
</button>
|
|
270
|
-
<ul
|
|
271
|
-
class="pf-c-dropdown__menu"
|
|
272
|
-
aria-labelledby="page-demo-sticky-top-horizontal-subnav-dropdown-kebab-2-button"
|
|
273
|
-
hidden
|
|
274
|
-
>
|
|
275
|
-
<li>
|
|
276
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
277
|
-
</li>
|
|
278
|
-
<li>
|
|
279
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
280
|
-
</li>
|
|
281
|
-
<li>
|
|
282
|
-
<a
|
|
283
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
284
|
-
href="#"
|
|
285
|
-
aria-disabled="true"
|
|
286
|
-
tabindex="-1"
|
|
287
|
-
>Disabled link</a>
|
|
288
|
-
</li>
|
|
289
|
-
<li>
|
|
290
|
-
<button
|
|
291
|
-
class="pf-c-dropdown__menu-item"
|
|
292
|
-
type="button"
|
|
293
|
-
disabled
|
|
294
|
-
>Disabled action</button>
|
|
295
|
-
</li>
|
|
296
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
297
|
-
<li>
|
|
298
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
299
|
-
</li>
|
|
300
|
-
</ul>
|
|
301
|
-
</div>
|
|
302
|
-
</div>
|
|
303
|
-
</div>
|
|
304
|
-
<img
|
|
305
|
-
class="pf-c-avatar"
|
|
306
|
-
src="/assets/images/img_avatar.svg"
|
|
307
|
-
alt="Avatar image"
|
|
308
|
-
/>
|
|
309
|
-
</div>
|
|
310
|
-
</header>
|
|
311
|
-
<div class="pf-c-page__sidebar">
|
|
312
|
-
<div class="pf-c-page__sidebar-body">
|
|
313
|
-
<nav
|
|
314
|
-
class="pf-c-nav"
|
|
315
|
-
id="page-demo-sticky-top-horizontal-subnav-primary-nav"
|
|
316
|
-
aria-label="Global"
|
|
317
|
-
>
|
|
318
|
-
<ul class="pf-c-nav__list">
|
|
319
|
-
<li class="pf-c-nav__item">
|
|
320
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
321
|
-
</li>
|
|
322
|
-
<li class="pf-c-nav__item">
|
|
323
|
-
<a
|
|
324
|
-
href="#"
|
|
325
|
-
class="pf-c-nav__link pf-m-current"
|
|
326
|
-
aria-current="page"
|
|
327
|
-
>Policy</a>
|
|
328
|
-
</li>
|
|
329
|
-
<li class="pf-c-nav__item">
|
|
330
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
331
|
-
</li>
|
|
332
|
-
<li class="pf-c-nav__item">
|
|
333
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
334
|
-
</li>
|
|
335
|
-
<li class="pf-c-nav__item">
|
|
336
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
337
|
-
</li>
|
|
338
|
-
</ul>
|
|
339
|
-
</nav>
|
|
340
|
-
</div>
|
|
341
|
-
</div>
|
|
342
|
-
<main
|
|
343
|
-
class="pf-c-page__main"
|
|
344
|
-
tabindex="-1"
|
|
345
|
-
id="main-content-page-demo-sticky-top-horizontal-subnav"
|
|
346
|
-
>
|
|
347
|
-
<section class="pf-c-page__main-subnav pf-m-limit-width pf-m-sticky-top">
|
|
348
|
-
<div class="pf-c-page__main-body">
|
|
349
|
-
<nav
|
|
350
|
-
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
351
|
-
aria-label="Local"
|
|
352
|
-
>
|
|
353
|
-
<button
|
|
354
|
-
class="pf-c-nav__scroll-button"
|
|
355
|
-
disabled
|
|
356
|
-
aria-label="Scroll left"
|
|
357
|
-
>
|
|
358
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
359
|
-
</button>
|
|
360
|
-
<ul class="pf-c-nav__list">
|
|
361
|
-
<li class="pf-c-nav__item">
|
|
362
|
-
<a
|
|
363
|
-
href="#"
|
|
364
|
-
class="pf-c-nav__link pf-m-current"
|
|
365
|
-
aria-current="page"
|
|
366
|
-
>Horizontal subnav item 1</a>
|
|
367
|
-
</li>
|
|
368
|
-
<li class="pf-c-nav__item">
|
|
369
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
370
|
-
</li>
|
|
371
|
-
<li class="pf-c-nav__item">
|
|
372
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
373
|
-
</li>
|
|
374
|
-
<li class="pf-c-nav__item">
|
|
375
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
376
|
-
</li>
|
|
377
|
-
<li class="pf-c-nav__item">
|
|
378
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
379
|
-
</li>
|
|
380
|
-
</ul>
|
|
381
|
-
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
382
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
383
|
-
</button>
|
|
384
|
-
</nav>
|
|
385
|
-
</div>
|
|
386
|
-
</section>
|
|
387
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
388
|
-
<div class="pf-c-page__main-body">
|
|
389
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
390
|
-
<ol class="pf-c-breadcrumb__list">
|
|
391
|
-
<li class="pf-c-breadcrumb__item">
|
|
392
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
393
|
-
</li>
|
|
394
|
-
<li class="pf-c-breadcrumb__item">
|
|
395
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
396
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
397
|
-
</span>
|
|
398
|
-
|
|
399
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
400
|
-
</li>
|
|
401
|
-
<li class="pf-c-breadcrumb__item">
|
|
402
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
403
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
404
|
-
</span>
|
|
405
|
-
|
|
406
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
407
|
-
</li>
|
|
408
|
-
<li class="pf-c-breadcrumb__item">
|
|
409
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
410
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
411
|
-
</span>
|
|
412
|
-
|
|
413
|
-
<a
|
|
414
|
-
href="#"
|
|
415
|
-
class="pf-c-breadcrumb__link pf-m-current"
|
|
416
|
-
aria-current="page"
|
|
417
|
-
>Section landing</a>
|
|
418
|
-
</li>
|
|
419
|
-
</ol>
|
|
420
|
-
</nav>
|
|
421
|
-
</div>
|
|
422
|
-
</section>
|
|
423
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
424
|
-
<div class="pf-c-page__main-body">
|
|
425
|
-
<div class="pf-c-content">
|
|
426
|
-
<h1>Main title</h1>
|
|
427
|
-
<p>This is a demo of the page component.</p>
|
|
428
|
-
</div>
|
|
429
|
-
</div>
|
|
430
|
-
</section>
|
|
431
|
-
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
432
|
-
<div class="pf-c-page__main-body">
|
|
433
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
434
|
-
<div class="pf-l-gallery__item">
|
|
435
|
-
<div class="pf-c-card">
|
|
436
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
437
|
-
</div>
|
|
438
|
-
</div>
|
|
439
|
-
<div class="pf-l-gallery__item">
|
|
440
|
-
<div class="pf-c-card">
|
|
441
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
442
|
-
</div>
|
|
443
|
-
</div>
|
|
444
|
-
<div class="pf-l-gallery__item">
|
|
445
|
-
<div class="pf-c-card">
|
|
446
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
447
|
-
</div>
|
|
448
|
-
</div>
|
|
449
|
-
<div class="pf-l-gallery__item">
|
|
450
|
-
<div class="pf-c-card">
|
|
451
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
452
|
-
</div>
|
|
453
|
-
</div>
|
|
454
|
-
<div class="pf-l-gallery__item">
|
|
455
|
-
<div class="pf-c-card">
|
|
456
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
457
|
-
</div>
|
|
458
|
-
</div>
|
|
459
|
-
<div class="pf-l-gallery__item">
|
|
460
|
-
<div class="pf-c-card">
|
|
461
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
462
|
-
</div>
|
|
463
|
-
</div>
|
|
464
|
-
<div class="pf-l-gallery__item">
|
|
465
|
-
<div class="pf-c-card">
|
|
466
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
467
|
-
</div>
|
|
468
|
-
</div>
|
|
469
|
-
<div class="pf-l-gallery__item">
|
|
470
|
-
<div class="pf-c-card">
|
|
471
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
472
|
-
</div>
|
|
473
|
-
</div>
|
|
474
|
-
<div class="pf-l-gallery__item">
|
|
475
|
-
<div class="pf-c-card">
|
|
476
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
477
|
-
</div>
|
|
478
|
-
</div>
|
|
479
|
-
<div class="pf-l-gallery__item">
|
|
480
|
-
<div class="pf-c-card">
|
|
481
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
482
|
-
</div>
|
|
483
|
-
</div>
|
|
484
|
-
<div class="pf-l-gallery__item">
|
|
485
|
-
<div class="pf-c-card">
|
|
486
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
487
|
-
</div>
|
|
488
|
-
</div>
|
|
489
|
-
<div class="pf-l-gallery__item">
|
|
490
|
-
<div class="pf-c-card">
|
|
491
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
492
|
-
</div>
|
|
493
|
-
</div>
|
|
494
|
-
<div class="pf-l-gallery__item">
|
|
495
|
-
<div class="pf-c-card">
|
|
496
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
497
|
-
</div>
|
|
498
|
-
</div>
|
|
499
|
-
<div class="pf-l-gallery__item">
|
|
500
|
-
<div class="pf-c-card">
|
|
501
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
502
|
-
</div>
|
|
503
|
-
</div>
|
|
504
|
-
<div class="pf-l-gallery__item">
|
|
505
|
-
<div class="pf-c-card">
|
|
506
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
507
|
-
</div>
|
|
508
|
-
</div>
|
|
509
|
-
<div class="pf-l-gallery__item">
|
|
510
|
-
<div class="pf-c-card">
|
|
511
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
512
|
-
</div>
|
|
513
|
-
</div>
|
|
514
|
-
<div class="pf-l-gallery__item">
|
|
515
|
-
<div class="pf-c-card">
|
|
516
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
517
|
-
</div>
|
|
518
|
-
</div>
|
|
519
|
-
<div class="pf-l-gallery__item">
|
|
520
|
-
<div class="pf-c-card">
|
|
521
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
522
|
-
</div>
|
|
523
|
-
</div>
|
|
524
|
-
<div class="pf-l-gallery__item">
|
|
525
|
-
<div class="pf-c-card">
|
|
526
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
527
|
-
</div>
|
|
528
|
-
</div>
|
|
529
|
-
<div class="pf-l-gallery__item">
|
|
530
|
-
<div class="pf-c-card">
|
|
531
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
532
|
-
</div>
|
|
533
|
-
</div>
|
|
534
|
-
<div class="pf-l-gallery__item">
|
|
535
|
-
<div class="pf-c-card">
|
|
536
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
537
|
-
</div>
|
|
538
|
-
</div>
|
|
539
|
-
<div class="pf-l-gallery__item">
|
|
540
|
-
<div class="pf-c-card">
|
|
541
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
542
|
-
</div>
|
|
543
|
-
</div>
|
|
544
|
-
<div class="pf-l-gallery__item">
|
|
545
|
-
<div class="pf-c-card">
|
|
546
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
547
|
-
</div>
|
|
548
|
-
</div>
|
|
549
|
-
<div class="pf-l-gallery__item">
|
|
550
|
-
<div class="pf-c-card">
|
|
551
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
552
|
-
</div>
|
|
553
|
-
</div>
|
|
554
|
-
<div class="pf-l-gallery__item">
|
|
555
|
-
<div class="pf-c-card">
|
|
556
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
557
|
-
</div>
|
|
558
|
-
</div>
|
|
559
|
-
<div class="pf-l-gallery__item">
|
|
560
|
-
<div class="pf-c-card">
|
|
561
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
562
|
-
</div>
|
|
563
|
-
</div>
|
|
564
|
-
<div class="pf-l-gallery__item">
|
|
565
|
-
<div class="pf-c-card">
|
|
566
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
567
|
-
</div>
|
|
568
|
-
</div>
|
|
569
|
-
<div class="pf-l-gallery__item">
|
|
570
|
-
<div class="pf-c-card">
|
|
571
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
572
|
-
</div>
|
|
573
|
-
</div>
|
|
574
|
-
<div class="pf-l-gallery__item">
|
|
575
|
-
<div class="pf-c-card">
|
|
576
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
577
|
-
</div>
|
|
578
|
-
</div>
|
|
579
|
-
<div class="pf-l-gallery__item">
|
|
580
|
-
<div class="pf-c-card">
|
|
581
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
582
|
-
</div>
|
|
583
|
-
</div>
|
|
584
|
-
<div class="pf-l-gallery__item">
|
|
585
|
-
<div class="pf-c-card">
|
|
586
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
587
|
-
</div>
|
|
588
|
-
</div>
|
|
589
|
-
<div class="pf-l-gallery__item">
|
|
590
|
-
<div class="pf-c-card">
|
|
591
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
592
|
-
</div>
|
|
593
|
-
</div>
|
|
594
|
-
<div class="pf-l-gallery__item">
|
|
595
|
-
<div class="pf-c-card">
|
|
596
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
597
|
-
</div>
|
|
598
|
-
</div>
|
|
599
|
-
<div class="pf-l-gallery__item">
|
|
600
|
-
<div class="pf-c-card">
|
|
601
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
602
|
-
</div>
|
|
603
|
-
</div>
|
|
604
|
-
<div class="pf-l-gallery__item">
|
|
605
|
-
<div class="pf-c-card">
|
|
606
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
607
|
-
</div>
|
|
608
|
-
</div>
|
|
609
|
-
<div class="pf-l-gallery__item">
|
|
610
|
-
<div class="pf-c-card">
|
|
611
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
612
|
-
</div>
|
|
613
|
-
</div>
|
|
614
|
-
<div class="pf-l-gallery__item">
|
|
615
|
-
<div class="pf-c-card">
|
|
616
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
617
|
-
</div>
|
|
618
|
-
</div>
|
|
619
|
-
<div class="pf-l-gallery__item">
|
|
620
|
-
<div class="pf-c-card">
|
|
621
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
622
|
-
</div>
|
|
623
|
-
</div>
|
|
624
|
-
<div class="pf-l-gallery__item">
|
|
625
|
-
<div class="pf-c-card">
|
|
626
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
627
|
-
</div>
|
|
628
|
-
</div>
|
|
629
|
-
<div class="pf-l-gallery__item">
|
|
630
|
-
<div class="pf-c-card">
|
|
631
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
632
|
-
</div>
|
|
633
|
-
</div>
|
|
634
|
-
<div class="pf-l-gallery__item">
|
|
635
|
-
<div class="pf-c-card">
|
|
636
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
637
|
-
</div>
|
|
638
|
-
</div>
|
|
639
|
-
<div class="pf-l-gallery__item">
|
|
640
|
-
<div class="pf-c-card">
|
|
641
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
642
|
-
</div>
|
|
643
|
-
</div>
|
|
644
|
-
<div class="pf-l-gallery__item">
|
|
645
|
-
<div class="pf-c-card">
|
|
646
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
647
|
-
</div>
|
|
648
|
-
</div>
|
|
649
|
-
<div class="pf-l-gallery__item">
|
|
650
|
-
<div class="pf-c-card">
|
|
651
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
652
|
-
</div>
|
|
653
|
-
</div>
|
|
654
|
-
<div class="pf-l-gallery__item">
|
|
655
|
-
<div class="pf-c-card">
|
|
656
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
657
|
-
</div>
|
|
658
|
-
</div>
|
|
659
|
-
<div class="pf-l-gallery__item">
|
|
660
|
-
<div class="pf-c-card">
|
|
661
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
662
|
-
</div>
|
|
663
|
-
</div>
|
|
664
|
-
<div class="pf-l-gallery__item">
|
|
665
|
-
<div class="pf-c-card">
|
|
666
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
667
|
-
</div>
|
|
668
|
-
</div>
|
|
669
|
-
<div class="pf-l-gallery__item">
|
|
670
|
-
<div class="pf-c-card">
|
|
671
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
672
|
-
</div>
|
|
673
|
-
</div>
|
|
674
|
-
<div class="pf-l-gallery__item">
|
|
675
|
-
<div class="pf-c-card">
|
|
676
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
677
|
-
</div>
|
|
678
|
-
</div>
|
|
679
|
-
<div class="pf-l-gallery__item">
|
|
680
|
-
<div class="pf-c-card">
|
|
681
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
682
|
-
</div>
|
|
683
|
-
</div>
|
|
684
|
-
</div>
|
|
685
|
-
</div>
|
|
686
|
-
</section>
|
|
687
|
-
</main>
|
|
688
|
-
</div>
|
|
689
|
-
|
|
15
|
+
```hbs isFullscreen
|
|
16
|
+
{{> page-template
|
|
17
|
+
page-template--id="page-demo-sticky-top-horizontal-subnav"
|
|
18
|
+
page-template-gallery--IsLongGallery="true"
|
|
19
|
+
page-template--HasHorizontalSubnav="true"
|
|
20
|
+
page-template-horizontal-subnav--modifier="pf-m-sticky-top"
|
|
21
|
+
}}
|
|
690
22
|
```
|
|
691
23
|
|
|
692
24
|
### Sticky breadcrumb
|
|
693
25
|
|
|
694
|
-
```
|
|
695
|
-
|
|
696
|
-
|
|
697
|
-
|
|
698
|
-
|
|
699
|
-
|
|
700
|
-
<header class="pf-c-page__header">
|
|
701
|
-
<div class="pf-c-page__header-brand">
|
|
702
|
-
<div class="pf-c-page__header-brand-toggle">
|
|
703
|
-
<button
|
|
704
|
-
class="pf-c-button pf-m-plain"
|
|
705
|
-
type="button"
|
|
706
|
-
id="page-demo-sticky-top-breadcrumb-nav-toggle"
|
|
707
|
-
aria-label="Global navigation"
|
|
708
|
-
aria-expanded="true"
|
|
709
|
-
aria-controls="page-demo-sticky-top-breadcrumb-primary-nav"
|
|
710
|
-
>
|
|
711
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
712
|
-
</button>
|
|
713
|
-
</div>
|
|
714
|
-
<a href="#" class="pf-c-page__header-brand-link">
|
|
715
|
-
<img
|
|
716
|
-
class="pf-c-brand"
|
|
717
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
718
|
-
alt="PatternFly logo"
|
|
719
|
-
/>
|
|
720
|
-
</a>
|
|
721
|
-
</div>
|
|
722
|
-
|
|
723
|
-
<div class="pf-c-page__header-tools">
|
|
724
|
-
<div class="pf-c-page__header-tools-group">
|
|
725
|
-
<div
|
|
726
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
727
|
-
>
|
|
728
|
-
<button
|
|
729
|
-
class="pf-c-button pf-m-plain"
|
|
730
|
-
type="button"
|
|
731
|
-
aria-label="Settings"
|
|
732
|
-
>
|
|
733
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
734
|
-
</button>
|
|
735
|
-
</div>
|
|
736
|
-
<div
|
|
737
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
738
|
-
>
|
|
739
|
-
<button
|
|
740
|
-
class="pf-c-button pf-m-plain"
|
|
741
|
-
type="button"
|
|
742
|
-
aria-label="Help"
|
|
743
|
-
>
|
|
744
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
745
|
-
</button>
|
|
746
|
-
</div>
|
|
747
|
-
</div>
|
|
748
|
-
<div class="pf-c-page__header-tools-group">
|
|
749
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
750
|
-
<div class="pf-c-dropdown">
|
|
751
|
-
<button
|
|
752
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
753
|
-
id="page-demo-sticky-top-breadcrumb-dropdown-kebab-1-button"
|
|
754
|
-
aria-expanded="false"
|
|
755
|
-
type="button"
|
|
756
|
-
aria-label="Actions"
|
|
757
|
-
>
|
|
758
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
759
|
-
</button>
|
|
760
|
-
<ul
|
|
761
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
762
|
-
aria-labelledby="page-demo-sticky-top-breadcrumb-dropdown-kebab-1-button"
|
|
763
|
-
hidden
|
|
764
|
-
>
|
|
765
|
-
<li>
|
|
766
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
767
|
-
</li>
|
|
768
|
-
<li>
|
|
769
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
770
|
-
</li>
|
|
771
|
-
<li>
|
|
772
|
-
<a
|
|
773
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
774
|
-
href="#"
|
|
775
|
-
aria-disabled="true"
|
|
776
|
-
tabindex="-1"
|
|
777
|
-
>Disabled link</a>
|
|
778
|
-
</li>
|
|
779
|
-
<li>
|
|
780
|
-
<button
|
|
781
|
-
class="pf-c-dropdown__menu-item"
|
|
782
|
-
type="button"
|
|
783
|
-
disabled
|
|
784
|
-
>Disabled action</button>
|
|
785
|
-
</li>
|
|
786
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
787
|
-
<li>
|
|
788
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
789
|
-
</li>
|
|
790
|
-
</ul>
|
|
791
|
-
</div>
|
|
792
|
-
</div>
|
|
793
|
-
<div
|
|
794
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
795
|
-
>
|
|
796
|
-
<div class="pf-c-dropdown">
|
|
797
|
-
<button
|
|
798
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
799
|
-
id="page-demo-sticky-top-breadcrumb-dropdown-kebab-2-button"
|
|
800
|
-
aria-expanded="false"
|
|
801
|
-
type="button"
|
|
802
|
-
>
|
|
803
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
804
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
805
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
806
|
-
</span>
|
|
807
|
-
</button>
|
|
808
|
-
<ul
|
|
809
|
-
class="pf-c-dropdown__menu"
|
|
810
|
-
aria-labelledby="page-demo-sticky-top-breadcrumb-dropdown-kebab-2-button"
|
|
811
|
-
hidden
|
|
812
|
-
>
|
|
813
|
-
<li>
|
|
814
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
815
|
-
</li>
|
|
816
|
-
<li>
|
|
817
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
818
|
-
</li>
|
|
819
|
-
<li>
|
|
820
|
-
<a
|
|
821
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
822
|
-
href="#"
|
|
823
|
-
aria-disabled="true"
|
|
824
|
-
tabindex="-1"
|
|
825
|
-
>Disabled link</a>
|
|
826
|
-
</li>
|
|
827
|
-
<li>
|
|
828
|
-
<button
|
|
829
|
-
class="pf-c-dropdown__menu-item"
|
|
830
|
-
type="button"
|
|
831
|
-
disabled
|
|
832
|
-
>Disabled action</button>
|
|
833
|
-
</li>
|
|
834
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
835
|
-
<li>
|
|
836
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
837
|
-
</li>
|
|
838
|
-
</ul>
|
|
839
|
-
</div>
|
|
840
|
-
</div>
|
|
841
|
-
</div>
|
|
842
|
-
<img
|
|
843
|
-
class="pf-c-avatar"
|
|
844
|
-
src="/assets/images/img_avatar.svg"
|
|
845
|
-
alt="Avatar image"
|
|
846
|
-
/>
|
|
847
|
-
</div>
|
|
848
|
-
</header>
|
|
849
|
-
<div class="pf-c-page__sidebar">
|
|
850
|
-
<div class="pf-c-page__sidebar-body">
|
|
851
|
-
<nav
|
|
852
|
-
class="pf-c-nav"
|
|
853
|
-
id="page-demo-sticky-top-breadcrumb-primary-nav"
|
|
854
|
-
aria-label="Global"
|
|
855
|
-
>
|
|
856
|
-
<ul class="pf-c-nav__list">
|
|
857
|
-
<li class="pf-c-nav__item">
|
|
858
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
859
|
-
</li>
|
|
860
|
-
<li class="pf-c-nav__item">
|
|
861
|
-
<a
|
|
862
|
-
href="#"
|
|
863
|
-
class="pf-c-nav__link pf-m-current"
|
|
864
|
-
aria-current="page"
|
|
865
|
-
>Policy</a>
|
|
866
|
-
</li>
|
|
867
|
-
<li class="pf-c-nav__item">
|
|
868
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
869
|
-
</li>
|
|
870
|
-
<li class="pf-c-nav__item">
|
|
871
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
872
|
-
</li>
|
|
873
|
-
<li class="pf-c-nav__item">
|
|
874
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
875
|
-
</li>
|
|
876
|
-
</ul>
|
|
877
|
-
</nav>
|
|
878
|
-
</div>
|
|
879
|
-
</div>
|
|
880
|
-
<main
|
|
881
|
-
class="pf-c-page__main"
|
|
882
|
-
tabindex="-1"
|
|
883
|
-
id="main-content-page-demo-sticky-top-breadcrumb"
|
|
884
|
-
>
|
|
885
|
-
<section
|
|
886
|
-
class="pf-c-page__main-breadcrumb pf-m-limit-width pf-m-sticky-top"
|
|
887
|
-
>
|
|
888
|
-
<div class="pf-c-page__main-body">
|
|
889
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
890
|
-
<ol class="pf-c-breadcrumb__list">
|
|
891
|
-
<li class="pf-c-breadcrumb__item">
|
|
892
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
893
|
-
</li>
|
|
894
|
-
<li class="pf-c-breadcrumb__item">
|
|
895
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
896
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
897
|
-
</span>
|
|
898
|
-
|
|
899
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
900
|
-
</li>
|
|
901
|
-
<li class="pf-c-breadcrumb__item">
|
|
902
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
903
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
904
|
-
</span>
|
|
905
|
-
|
|
906
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
907
|
-
</li>
|
|
908
|
-
<li class="pf-c-breadcrumb__item">
|
|
909
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
910
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
911
|
-
</span>
|
|
912
|
-
|
|
913
|
-
<a
|
|
914
|
-
href="#"
|
|
915
|
-
class="pf-c-breadcrumb__link pf-m-current"
|
|
916
|
-
aria-current="page"
|
|
917
|
-
>Section landing</a>
|
|
918
|
-
</li>
|
|
919
|
-
</ol>
|
|
920
|
-
</nav>
|
|
921
|
-
</div>
|
|
922
|
-
</section>
|
|
923
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
924
|
-
<div class="pf-c-page__main-body">
|
|
925
|
-
<div class="pf-c-content">
|
|
926
|
-
<h1>Main title</h1>
|
|
927
|
-
<p>This is a demo of the page component.</p>
|
|
928
|
-
</div>
|
|
929
|
-
</div>
|
|
930
|
-
</section>
|
|
931
|
-
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
932
|
-
<div class="pf-c-page__main-body">
|
|
933
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
934
|
-
<div class="pf-l-gallery__item">
|
|
935
|
-
<div class="pf-c-card">
|
|
936
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
937
|
-
</div>
|
|
938
|
-
</div>
|
|
939
|
-
<div class="pf-l-gallery__item">
|
|
940
|
-
<div class="pf-c-card">
|
|
941
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
942
|
-
</div>
|
|
943
|
-
</div>
|
|
944
|
-
<div class="pf-l-gallery__item">
|
|
945
|
-
<div class="pf-c-card">
|
|
946
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
947
|
-
</div>
|
|
948
|
-
</div>
|
|
949
|
-
<div class="pf-l-gallery__item">
|
|
950
|
-
<div class="pf-c-card">
|
|
951
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
952
|
-
</div>
|
|
953
|
-
</div>
|
|
954
|
-
<div class="pf-l-gallery__item">
|
|
955
|
-
<div class="pf-c-card">
|
|
956
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
957
|
-
</div>
|
|
958
|
-
</div>
|
|
959
|
-
<div class="pf-l-gallery__item">
|
|
960
|
-
<div class="pf-c-card">
|
|
961
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
962
|
-
</div>
|
|
963
|
-
</div>
|
|
964
|
-
<div class="pf-l-gallery__item">
|
|
965
|
-
<div class="pf-c-card">
|
|
966
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
967
|
-
</div>
|
|
968
|
-
</div>
|
|
969
|
-
<div class="pf-l-gallery__item">
|
|
970
|
-
<div class="pf-c-card">
|
|
971
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
972
|
-
</div>
|
|
973
|
-
</div>
|
|
974
|
-
<div class="pf-l-gallery__item">
|
|
975
|
-
<div class="pf-c-card">
|
|
976
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
977
|
-
</div>
|
|
978
|
-
</div>
|
|
979
|
-
<div class="pf-l-gallery__item">
|
|
980
|
-
<div class="pf-c-card">
|
|
981
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
982
|
-
</div>
|
|
983
|
-
</div>
|
|
984
|
-
<div class="pf-l-gallery__item">
|
|
985
|
-
<div class="pf-c-card">
|
|
986
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
987
|
-
</div>
|
|
988
|
-
</div>
|
|
989
|
-
<div class="pf-l-gallery__item">
|
|
990
|
-
<div class="pf-c-card">
|
|
991
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
992
|
-
</div>
|
|
993
|
-
</div>
|
|
994
|
-
<div class="pf-l-gallery__item">
|
|
995
|
-
<div class="pf-c-card">
|
|
996
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
997
|
-
</div>
|
|
998
|
-
</div>
|
|
999
|
-
<div class="pf-l-gallery__item">
|
|
1000
|
-
<div class="pf-c-card">
|
|
1001
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1002
|
-
</div>
|
|
1003
|
-
</div>
|
|
1004
|
-
<div class="pf-l-gallery__item">
|
|
1005
|
-
<div class="pf-c-card">
|
|
1006
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1007
|
-
</div>
|
|
1008
|
-
</div>
|
|
1009
|
-
<div class="pf-l-gallery__item">
|
|
1010
|
-
<div class="pf-c-card">
|
|
1011
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1012
|
-
</div>
|
|
1013
|
-
</div>
|
|
1014
|
-
<div class="pf-l-gallery__item">
|
|
1015
|
-
<div class="pf-c-card">
|
|
1016
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1017
|
-
</div>
|
|
1018
|
-
</div>
|
|
1019
|
-
<div class="pf-l-gallery__item">
|
|
1020
|
-
<div class="pf-c-card">
|
|
1021
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1022
|
-
</div>
|
|
1023
|
-
</div>
|
|
1024
|
-
<div class="pf-l-gallery__item">
|
|
1025
|
-
<div class="pf-c-card">
|
|
1026
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1027
|
-
</div>
|
|
1028
|
-
</div>
|
|
1029
|
-
<div class="pf-l-gallery__item">
|
|
1030
|
-
<div class="pf-c-card">
|
|
1031
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1032
|
-
</div>
|
|
1033
|
-
</div>
|
|
1034
|
-
<div class="pf-l-gallery__item">
|
|
1035
|
-
<div class="pf-c-card">
|
|
1036
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1037
|
-
</div>
|
|
1038
|
-
</div>
|
|
1039
|
-
<div class="pf-l-gallery__item">
|
|
1040
|
-
<div class="pf-c-card">
|
|
1041
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1042
|
-
</div>
|
|
1043
|
-
</div>
|
|
1044
|
-
<div class="pf-l-gallery__item">
|
|
1045
|
-
<div class="pf-c-card">
|
|
1046
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1047
|
-
</div>
|
|
1048
|
-
</div>
|
|
1049
|
-
<div class="pf-l-gallery__item">
|
|
1050
|
-
<div class="pf-c-card">
|
|
1051
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1052
|
-
</div>
|
|
1053
|
-
</div>
|
|
1054
|
-
<div class="pf-l-gallery__item">
|
|
1055
|
-
<div class="pf-c-card">
|
|
1056
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1057
|
-
</div>
|
|
1058
|
-
</div>
|
|
1059
|
-
<div class="pf-l-gallery__item">
|
|
1060
|
-
<div class="pf-c-card">
|
|
1061
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1062
|
-
</div>
|
|
1063
|
-
</div>
|
|
1064
|
-
<div class="pf-l-gallery__item">
|
|
1065
|
-
<div class="pf-c-card">
|
|
1066
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1067
|
-
</div>
|
|
1068
|
-
</div>
|
|
1069
|
-
<div class="pf-l-gallery__item">
|
|
1070
|
-
<div class="pf-c-card">
|
|
1071
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1072
|
-
</div>
|
|
1073
|
-
</div>
|
|
1074
|
-
<div class="pf-l-gallery__item">
|
|
1075
|
-
<div class="pf-c-card">
|
|
1076
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1077
|
-
</div>
|
|
1078
|
-
</div>
|
|
1079
|
-
<div class="pf-l-gallery__item">
|
|
1080
|
-
<div class="pf-c-card">
|
|
1081
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1082
|
-
</div>
|
|
1083
|
-
</div>
|
|
1084
|
-
<div class="pf-l-gallery__item">
|
|
1085
|
-
<div class="pf-c-card">
|
|
1086
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1087
|
-
</div>
|
|
1088
|
-
</div>
|
|
1089
|
-
<div class="pf-l-gallery__item">
|
|
1090
|
-
<div class="pf-c-card">
|
|
1091
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1092
|
-
</div>
|
|
1093
|
-
</div>
|
|
1094
|
-
<div class="pf-l-gallery__item">
|
|
1095
|
-
<div class="pf-c-card">
|
|
1096
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1097
|
-
</div>
|
|
1098
|
-
</div>
|
|
1099
|
-
<div class="pf-l-gallery__item">
|
|
1100
|
-
<div class="pf-c-card">
|
|
1101
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1102
|
-
</div>
|
|
1103
|
-
</div>
|
|
1104
|
-
<div class="pf-l-gallery__item">
|
|
1105
|
-
<div class="pf-c-card">
|
|
1106
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1107
|
-
</div>
|
|
1108
|
-
</div>
|
|
1109
|
-
<div class="pf-l-gallery__item">
|
|
1110
|
-
<div class="pf-c-card">
|
|
1111
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1112
|
-
</div>
|
|
1113
|
-
</div>
|
|
1114
|
-
<div class="pf-l-gallery__item">
|
|
1115
|
-
<div class="pf-c-card">
|
|
1116
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1117
|
-
</div>
|
|
1118
|
-
</div>
|
|
1119
|
-
<div class="pf-l-gallery__item">
|
|
1120
|
-
<div class="pf-c-card">
|
|
1121
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1122
|
-
</div>
|
|
1123
|
-
</div>
|
|
1124
|
-
<div class="pf-l-gallery__item">
|
|
1125
|
-
<div class="pf-c-card">
|
|
1126
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1127
|
-
</div>
|
|
1128
|
-
</div>
|
|
1129
|
-
<div class="pf-l-gallery__item">
|
|
1130
|
-
<div class="pf-c-card">
|
|
1131
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1132
|
-
</div>
|
|
1133
|
-
</div>
|
|
1134
|
-
<div class="pf-l-gallery__item">
|
|
1135
|
-
<div class="pf-c-card">
|
|
1136
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1137
|
-
</div>
|
|
1138
|
-
</div>
|
|
1139
|
-
<div class="pf-l-gallery__item">
|
|
1140
|
-
<div class="pf-c-card">
|
|
1141
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1142
|
-
</div>
|
|
1143
|
-
</div>
|
|
1144
|
-
<div class="pf-l-gallery__item">
|
|
1145
|
-
<div class="pf-c-card">
|
|
1146
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1147
|
-
</div>
|
|
1148
|
-
</div>
|
|
1149
|
-
<div class="pf-l-gallery__item">
|
|
1150
|
-
<div class="pf-c-card">
|
|
1151
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1152
|
-
</div>
|
|
1153
|
-
</div>
|
|
1154
|
-
<div class="pf-l-gallery__item">
|
|
1155
|
-
<div class="pf-c-card">
|
|
1156
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1157
|
-
</div>
|
|
1158
|
-
</div>
|
|
1159
|
-
<div class="pf-l-gallery__item">
|
|
1160
|
-
<div class="pf-c-card">
|
|
1161
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1162
|
-
</div>
|
|
1163
|
-
</div>
|
|
1164
|
-
<div class="pf-l-gallery__item">
|
|
1165
|
-
<div class="pf-c-card">
|
|
1166
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1167
|
-
</div>
|
|
1168
|
-
</div>
|
|
1169
|
-
<div class="pf-l-gallery__item">
|
|
1170
|
-
<div class="pf-c-card">
|
|
1171
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1172
|
-
</div>
|
|
1173
|
-
</div>
|
|
1174
|
-
<div class="pf-l-gallery__item">
|
|
1175
|
-
<div class="pf-c-card">
|
|
1176
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1177
|
-
</div>
|
|
1178
|
-
</div>
|
|
1179
|
-
<div class="pf-l-gallery__item">
|
|
1180
|
-
<div class="pf-c-card">
|
|
1181
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1182
|
-
</div>
|
|
1183
|
-
</div>
|
|
1184
|
-
</div>
|
|
1185
|
-
</div>
|
|
1186
|
-
</section>
|
|
1187
|
-
</main>
|
|
1188
|
-
</div>
|
|
1189
|
-
|
|
26
|
+
```hbs isFullscreen
|
|
27
|
+
{{> page-template
|
|
28
|
+
page-template--id="page-demo-sticky-top-breadcrumb"
|
|
29
|
+
page-template-gallery--IsLongGallery="true"
|
|
30
|
+
page-template-breadcrumb--modifier="pf-m-sticky-top"
|
|
31
|
+
}}
|
|
1190
32
|
```
|
|
1191
33
|
|
|
1192
34
|
### Sticky section group
|
|
1193
35
|
|
|
1194
|
-
```
|
|
1195
|
-
|
|
1196
|
-
|
|
1197
|
-
|
|
1198
|
-
|
|
1199
|
-
|
|
1200
|
-
|
|
1201
|
-
|
|
1202
|
-
|
|
1203
|
-
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
1207
|
-
|
|
1208
|
-
|
|
1209
|
-
aria-controls="page-demo-sticky-top-section-group-primary-nav"
|
|
1210
|
-
>
|
|
1211
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1212
|
-
</button>
|
|
1213
|
-
</div>
|
|
1214
|
-
<a href="#" class="pf-c-page__header-brand-link">
|
|
1215
|
-
<img
|
|
1216
|
-
class="pf-c-brand"
|
|
1217
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
1218
|
-
alt="PatternFly logo"
|
|
1219
|
-
/>
|
|
1220
|
-
</a>
|
|
1221
|
-
</div>
|
|
1222
|
-
|
|
1223
|
-
<div class="pf-c-page__header-tools">
|
|
1224
|
-
<div class="pf-c-page__header-tools-group">
|
|
1225
|
-
<div
|
|
1226
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
1227
|
-
>
|
|
1228
|
-
<button
|
|
1229
|
-
class="pf-c-button pf-m-plain"
|
|
1230
|
-
type="button"
|
|
1231
|
-
aria-label="Settings"
|
|
1232
|
-
>
|
|
1233
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1234
|
-
</button>
|
|
1235
|
-
</div>
|
|
1236
|
-
<div
|
|
1237
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
1238
|
-
>
|
|
1239
|
-
<button
|
|
1240
|
-
class="pf-c-button pf-m-plain"
|
|
1241
|
-
type="button"
|
|
1242
|
-
aria-label="Help"
|
|
1243
|
-
>
|
|
1244
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
1245
|
-
</button>
|
|
1246
|
-
</div>
|
|
1247
|
-
</div>
|
|
1248
|
-
<div class="pf-c-page__header-tools-group">
|
|
1249
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
1250
|
-
<div class="pf-c-dropdown">
|
|
1251
|
-
<button
|
|
1252
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1253
|
-
id="page-demo-sticky-top-section-group-dropdown-kebab-1-button"
|
|
1254
|
-
aria-expanded="false"
|
|
1255
|
-
type="button"
|
|
1256
|
-
aria-label="Actions"
|
|
1257
|
-
>
|
|
1258
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1259
|
-
</button>
|
|
1260
|
-
<ul
|
|
1261
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1262
|
-
aria-labelledby="page-demo-sticky-top-section-group-dropdown-kebab-1-button"
|
|
1263
|
-
hidden
|
|
1264
|
-
>
|
|
1265
|
-
<li>
|
|
1266
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1267
|
-
</li>
|
|
1268
|
-
<li>
|
|
1269
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1270
|
-
</li>
|
|
1271
|
-
<li>
|
|
1272
|
-
<a
|
|
1273
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1274
|
-
href="#"
|
|
1275
|
-
aria-disabled="true"
|
|
1276
|
-
tabindex="-1"
|
|
1277
|
-
>Disabled link</a>
|
|
1278
|
-
</li>
|
|
1279
|
-
<li>
|
|
1280
|
-
<button
|
|
1281
|
-
class="pf-c-dropdown__menu-item"
|
|
1282
|
-
type="button"
|
|
1283
|
-
disabled
|
|
1284
|
-
>Disabled action</button>
|
|
1285
|
-
</li>
|
|
1286
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1287
|
-
<li>
|
|
1288
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1289
|
-
</li>
|
|
1290
|
-
</ul>
|
|
1291
|
-
</div>
|
|
1292
|
-
</div>
|
|
1293
|
-
<div
|
|
1294
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
1295
|
-
>
|
|
1296
|
-
<div class="pf-c-dropdown">
|
|
1297
|
-
<button
|
|
1298
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1299
|
-
id="page-demo-sticky-top-section-group-dropdown-kebab-2-button"
|
|
1300
|
-
aria-expanded="false"
|
|
1301
|
-
type="button"
|
|
1302
|
-
>
|
|
1303
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
1304
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
1305
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1306
|
-
</span>
|
|
1307
|
-
</button>
|
|
1308
|
-
<ul
|
|
1309
|
-
class="pf-c-dropdown__menu"
|
|
1310
|
-
aria-labelledby="page-demo-sticky-top-section-group-dropdown-kebab-2-button"
|
|
1311
|
-
hidden
|
|
1312
|
-
>
|
|
1313
|
-
<li>
|
|
1314
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1315
|
-
</li>
|
|
1316
|
-
<li>
|
|
1317
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1318
|
-
</li>
|
|
1319
|
-
<li>
|
|
1320
|
-
<a
|
|
1321
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1322
|
-
href="#"
|
|
1323
|
-
aria-disabled="true"
|
|
1324
|
-
tabindex="-1"
|
|
1325
|
-
>Disabled link</a>
|
|
1326
|
-
</li>
|
|
1327
|
-
<li>
|
|
1328
|
-
<button
|
|
1329
|
-
class="pf-c-dropdown__menu-item"
|
|
1330
|
-
type="button"
|
|
1331
|
-
disabled
|
|
1332
|
-
>Disabled action</button>
|
|
1333
|
-
</li>
|
|
1334
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1335
|
-
<li>
|
|
1336
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1337
|
-
</li>
|
|
1338
|
-
</ul>
|
|
1339
|
-
</div>
|
|
1340
|
-
</div>
|
|
1341
|
-
</div>
|
|
1342
|
-
<img
|
|
1343
|
-
class="pf-c-avatar"
|
|
1344
|
-
src="/assets/images/img_avatar.svg"
|
|
1345
|
-
alt="Avatar image"
|
|
1346
|
-
/>
|
|
1347
|
-
</div>
|
|
1348
|
-
</header>
|
|
1349
|
-
<div class="pf-c-page__sidebar">
|
|
1350
|
-
<div class="pf-c-page__sidebar-body">
|
|
1351
|
-
<nav
|
|
1352
|
-
class="pf-c-nav"
|
|
1353
|
-
id="page-demo-sticky-top-section-group-primary-nav"
|
|
1354
|
-
aria-label="Global"
|
|
1355
|
-
>
|
|
1356
|
-
<ul class="pf-c-nav__list">
|
|
1357
|
-
<li class="pf-c-nav__item">
|
|
1358
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1359
|
-
</li>
|
|
1360
|
-
<li class="pf-c-nav__item">
|
|
1361
|
-
<a
|
|
1362
|
-
href="#"
|
|
1363
|
-
class="pf-c-nav__link pf-m-current"
|
|
1364
|
-
aria-current="page"
|
|
1365
|
-
>Policy</a>
|
|
1366
|
-
</li>
|
|
1367
|
-
<li class="pf-c-nav__item">
|
|
1368
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1369
|
-
</li>
|
|
1370
|
-
<li class="pf-c-nav__item">
|
|
1371
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1372
|
-
</li>
|
|
1373
|
-
<li class="pf-c-nav__item">
|
|
1374
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1375
|
-
</li>
|
|
1376
|
-
</ul>
|
|
1377
|
-
</nav>
|
|
1378
|
-
</div>
|
|
1379
|
-
</div>
|
|
1380
|
-
<main
|
|
1381
|
-
class="pf-c-page__main"
|
|
1382
|
-
tabindex="-1"
|
|
1383
|
-
id="main-content-page-demo-sticky-top-section-group"
|
|
1384
|
-
>
|
|
1385
|
-
<div class="pf-c-page__main-group pf-m-sticky-top">
|
|
1386
|
-
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
1387
|
-
<div class="pf-c-page__main-body">
|
|
1388
|
-
<nav
|
|
1389
|
-
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
1390
|
-
aria-label="Local"
|
|
1391
|
-
>
|
|
1392
|
-
<button
|
|
1393
|
-
class="pf-c-nav__scroll-button"
|
|
1394
|
-
disabled
|
|
1395
|
-
aria-label="Scroll left"
|
|
1396
|
-
>
|
|
1397
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1398
|
-
</button>
|
|
1399
|
-
<ul class="pf-c-nav__list">
|
|
1400
|
-
<li class="pf-c-nav__item">
|
|
1401
|
-
<a
|
|
1402
|
-
href="#"
|
|
1403
|
-
class="pf-c-nav__link pf-m-current"
|
|
1404
|
-
aria-current="page"
|
|
1405
|
-
>Horizontal subnav item 1</a>
|
|
1406
|
-
</li>
|
|
1407
|
-
<li class="pf-c-nav__item">
|
|
1408
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
1409
|
-
</li>
|
|
1410
|
-
<li class="pf-c-nav__item">
|
|
1411
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
1412
|
-
</li>
|
|
1413
|
-
<li class="pf-c-nav__item">
|
|
1414
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
1415
|
-
</li>
|
|
1416
|
-
<li class="pf-c-nav__item">
|
|
1417
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
1418
|
-
</li>
|
|
1419
|
-
</ul>
|
|
1420
|
-
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
1421
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1422
|
-
</button>
|
|
1423
|
-
</nav>
|
|
1424
|
-
</div>
|
|
1425
|
-
</section>
|
|
1426
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1427
|
-
<div class="pf-c-page__main-body">
|
|
1428
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1429
|
-
<ol class="pf-c-breadcrumb__list">
|
|
1430
|
-
<li class="pf-c-breadcrumb__item">
|
|
1431
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1432
|
-
</li>
|
|
1433
|
-
<li class="pf-c-breadcrumb__item">
|
|
1434
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
1435
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1436
|
-
</span>
|
|
1437
|
-
|
|
1438
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1439
|
-
</li>
|
|
1440
|
-
<li class="pf-c-breadcrumb__item">
|
|
1441
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
1442
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1443
|
-
</span>
|
|
1444
|
-
|
|
1445
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1446
|
-
</li>
|
|
1447
|
-
<li class="pf-c-breadcrumb__item">
|
|
1448
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
1449
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1450
|
-
</span>
|
|
1451
|
-
|
|
1452
|
-
<a
|
|
1453
|
-
href="#"
|
|
1454
|
-
class="pf-c-breadcrumb__link pf-m-current"
|
|
1455
|
-
aria-current="page"
|
|
1456
|
-
>Section landing</a>
|
|
1457
|
-
</li>
|
|
1458
|
-
</ol>
|
|
1459
|
-
</nav>
|
|
1460
|
-
</div>
|
|
1461
|
-
</section>
|
|
1462
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1463
|
-
<div class="pf-c-page__main-body">
|
|
1464
|
-
<div class="pf-c-content">
|
|
1465
|
-
<h1>Main title</h1>
|
|
1466
|
-
<p>This is a demo of the page component.</p>
|
|
1467
|
-
</div>
|
|
1468
|
-
</div>
|
|
1469
|
-
</section>
|
|
1470
|
-
</div>
|
|
1471
|
-
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1472
|
-
<div class="pf-c-page__main-body">
|
|
1473
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
1474
|
-
<div class="pf-l-gallery__item">
|
|
1475
|
-
<div class="pf-c-card">
|
|
1476
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1477
|
-
</div>
|
|
1478
|
-
</div>
|
|
1479
|
-
<div class="pf-l-gallery__item">
|
|
1480
|
-
<div class="pf-c-card">
|
|
1481
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1482
|
-
</div>
|
|
1483
|
-
</div>
|
|
1484
|
-
<div class="pf-l-gallery__item">
|
|
1485
|
-
<div class="pf-c-card">
|
|
1486
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1487
|
-
</div>
|
|
1488
|
-
</div>
|
|
1489
|
-
<div class="pf-l-gallery__item">
|
|
1490
|
-
<div class="pf-c-card">
|
|
1491
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1492
|
-
</div>
|
|
1493
|
-
</div>
|
|
1494
|
-
<div class="pf-l-gallery__item">
|
|
1495
|
-
<div class="pf-c-card">
|
|
1496
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1497
|
-
</div>
|
|
1498
|
-
</div>
|
|
1499
|
-
<div class="pf-l-gallery__item">
|
|
1500
|
-
<div class="pf-c-card">
|
|
1501
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1502
|
-
</div>
|
|
1503
|
-
</div>
|
|
1504
|
-
<div class="pf-l-gallery__item">
|
|
1505
|
-
<div class="pf-c-card">
|
|
1506
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1507
|
-
</div>
|
|
1508
|
-
</div>
|
|
1509
|
-
<div class="pf-l-gallery__item">
|
|
1510
|
-
<div class="pf-c-card">
|
|
1511
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1512
|
-
</div>
|
|
1513
|
-
</div>
|
|
1514
|
-
<div class="pf-l-gallery__item">
|
|
1515
|
-
<div class="pf-c-card">
|
|
1516
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1517
|
-
</div>
|
|
1518
|
-
</div>
|
|
1519
|
-
<div class="pf-l-gallery__item">
|
|
1520
|
-
<div class="pf-c-card">
|
|
1521
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1522
|
-
</div>
|
|
1523
|
-
</div>
|
|
1524
|
-
<div class="pf-l-gallery__item">
|
|
1525
|
-
<div class="pf-c-card">
|
|
1526
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1527
|
-
</div>
|
|
1528
|
-
</div>
|
|
1529
|
-
<div class="pf-l-gallery__item">
|
|
1530
|
-
<div class="pf-c-card">
|
|
1531
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1532
|
-
</div>
|
|
1533
|
-
</div>
|
|
1534
|
-
<div class="pf-l-gallery__item">
|
|
1535
|
-
<div class="pf-c-card">
|
|
1536
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1537
|
-
</div>
|
|
1538
|
-
</div>
|
|
1539
|
-
<div class="pf-l-gallery__item">
|
|
1540
|
-
<div class="pf-c-card">
|
|
1541
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1542
|
-
</div>
|
|
1543
|
-
</div>
|
|
1544
|
-
<div class="pf-l-gallery__item">
|
|
1545
|
-
<div class="pf-c-card">
|
|
1546
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1547
|
-
</div>
|
|
1548
|
-
</div>
|
|
1549
|
-
<div class="pf-l-gallery__item">
|
|
1550
|
-
<div class="pf-c-card">
|
|
1551
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1552
|
-
</div>
|
|
1553
|
-
</div>
|
|
1554
|
-
<div class="pf-l-gallery__item">
|
|
1555
|
-
<div class="pf-c-card">
|
|
1556
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1557
|
-
</div>
|
|
1558
|
-
</div>
|
|
1559
|
-
<div class="pf-l-gallery__item">
|
|
1560
|
-
<div class="pf-c-card">
|
|
1561
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1562
|
-
</div>
|
|
1563
|
-
</div>
|
|
1564
|
-
<div class="pf-l-gallery__item">
|
|
1565
|
-
<div class="pf-c-card">
|
|
1566
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1567
|
-
</div>
|
|
1568
|
-
</div>
|
|
1569
|
-
<div class="pf-l-gallery__item">
|
|
1570
|
-
<div class="pf-c-card">
|
|
1571
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1572
|
-
</div>
|
|
1573
|
-
</div>
|
|
1574
|
-
<div class="pf-l-gallery__item">
|
|
1575
|
-
<div class="pf-c-card">
|
|
1576
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1577
|
-
</div>
|
|
1578
|
-
</div>
|
|
1579
|
-
<div class="pf-l-gallery__item">
|
|
1580
|
-
<div class="pf-c-card">
|
|
1581
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1582
|
-
</div>
|
|
1583
|
-
</div>
|
|
1584
|
-
<div class="pf-l-gallery__item">
|
|
1585
|
-
<div class="pf-c-card">
|
|
1586
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1587
|
-
</div>
|
|
1588
|
-
</div>
|
|
1589
|
-
<div class="pf-l-gallery__item">
|
|
1590
|
-
<div class="pf-c-card">
|
|
1591
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1592
|
-
</div>
|
|
1593
|
-
</div>
|
|
1594
|
-
<div class="pf-l-gallery__item">
|
|
1595
|
-
<div class="pf-c-card">
|
|
1596
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1597
|
-
</div>
|
|
1598
|
-
</div>
|
|
1599
|
-
<div class="pf-l-gallery__item">
|
|
1600
|
-
<div class="pf-c-card">
|
|
1601
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1602
|
-
</div>
|
|
1603
|
-
</div>
|
|
1604
|
-
<div class="pf-l-gallery__item">
|
|
1605
|
-
<div class="pf-c-card">
|
|
1606
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1607
|
-
</div>
|
|
1608
|
-
</div>
|
|
1609
|
-
<div class="pf-l-gallery__item">
|
|
1610
|
-
<div class="pf-c-card">
|
|
1611
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1612
|
-
</div>
|
|
1613
|
-
</div>
|
|
1614
|
-
<div class="pf-l-gallery__item">
|
|
1615
|
-
<div class="pf-c-card">
|
|
1616
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1617
|
-
</div>
|
|
1618
|
-
</div>
|
|
1619
|
-
<div class="pf-l-gallery__item">
|
|
1620
|
-
<div class="pf-c-card">
|
|
1621
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1622
|
-
</div>
|
|
1623
|
-
</div>
|
|
1624
|
-
<div class="pf-l-gallery__item">
|
|
1625
|
-
<div class="pf-c-card">
|
|
1626
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1627
|
-
</div>
|
|
1628
|
-
</div>
|
|
1629
|
-
<div class="pf-l-gallery__item">
|
|
1630
|
-
<div class="pf-c-card">
|
|
1631
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1632
|
-
</div>
|
|
1633
|
-
</div>
|
|
1634
|
-
<div class="pf-l-gallery__item">
|
|
1635
|
-
<div class="pf-c-card">
|
|
1636
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1637
|
-
</div>
|
|
1638
|
-
</div>
|
|
1639
|
-
<div class="pf-l-gallery__item">
|
|
1640
|
-
<div class="pf-c-card">
|
|
1641
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1642
|
-
</div>
|
|
1643
|
-
</div>
|
|
1644
|
-
<div class="pf-l-gallery__item">
|
|
1645
|
-
<div class="pf-c-card">
|
|
1646
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1647
|
-
</div>
|
|
1648
|
-
</div>
|
|
1649
|
-
<div class="pf-l-gallery__item">
|
|
1650
|
-
<div class="pf-c-card">
|
|
1651
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1652
|
-
</div>
|
|
1653
|
-
</div>
|
|
1654
|
-
<div class="pf-l-gallery__item">
|
|
1655
|
-
<div class="pf-c-card">
|
|
1656
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1657
|
-
</div>
|
|
1658
|
-
</div>
|
|
1659
|
-
<div class="pf-l-gallery__item">
|
|
1660
|
-
<div class="pf-c-card">
|
|
1661
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1662
|
-
</div>
|
|
1663
|
-
</div>
|
|
1664
|
-
<div class="pf-l-gallery__item">
|
|
1665
|
-
<div class="pf-c-card">
|
|
1666
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1667
|
-
</div>
|
|
1668
|
-
</div>
|
|
1669
|
-
<div class="pf-l-gallery__item">
|
|
1670
|
-
<div class="pf-c-card">
|
|
1671
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1672
|
-
</div>
|
|
1673
|
-
</div>
|
|
1674
|
-
<div class="pf-l-gallery__item">
|
|
1675
|
-
<div class="pf-c-card">
|
|
1676
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1677
|
-
</div>
|
|
1678
|
-
</div>
|
|
1679
|
-
<div class="pf-l-gallery__item">
|
|
1680
|
-
<div class="pf-c-card">
|
|
1681
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1682
|
-
</div>
|
|
1683
|
-
</div>
|
|
1684
|
-
<div class="pf-l-gallery__item">
|
|
1685
|
-
<div class="pf-c-card">
|
|
1686
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1687
|
-
</div>
|
|
1688
|
-
</div>
|
|
1689
|
-
<div class="pf-l-gallery__item">
|
|
1690
|
-
<div class="pf-c-card">
|
|
1691
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1692
|
-
</div>
|
|
1693
|
-
</div>
|
|
1694
|
-
<div class="pf-l-gallery__item">
|
|
1695
|
-
<div class="pf-c-card">
|
|
1696
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1697
|
-
</div>
|
|
1698
|
-
</div>
|
|
1699
|
-
<div class="pf-l-gallery__item">
|
|
1700
|
-
<div class="pf-c-card">
|
|
1701
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1702
|
-
</div>
|
|
1703
|
-
</div>
|
|
1704
|
-
<div class="pf-l-gallery__item">
|
|
1705
|
-
<div class="pf-c-card">
|
|
1706
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1707
|
-
</div>
|
|
1708
|
-
</div>
|
|
1709
|
-
<div class="pf-l-gallery__item">
|
|
1710
|
-
<div class="pf-c-card">
|
|
1711
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1712
|
-
</div>
|
|
1713
|
-
</div>
|
|
1714
|
-
<div class="pf-l-gallery__item">
|
|
1715
|
-
<div class="pf-c-card">
|
|
1716
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1717
|
-
</div>
|
|
1718
|
-
</div>
|
|
1719
|
-
<div class="pf-l-gallery__item">
|
|
1720
|
-
<div class="pf-c-card">
|
|
1721
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
1722
|
-
</div>
|
|
1723
|
-
</div>
|
|
1724
|
-
</div>
|
|
1725
|
-
</div>
|
|
1726
|
-
</section>
|
|
1727
|
-
</main>
|
|
1728
|
-
</div>
|
|
1729
|
-
|
|
36
|
+
```hbs isFullscreen
|
|
37
|
+
{{> page-template
|
|
38
|
+
page-template--id="page-demo-sticky-top-section-group"
|
|
39
|
+
page-template--HasNoBreadcrumb="true"
|
|
40
|
+
page-template--HasNoTitle="true"
|
|
41
|
+
page-template-gallery--IsLongGallery="true"
|
|
42
|
+
}}
|
|
43
|
+
|
|
44
|
+
{{#*inline "page-template-section"}}
|
|
45
|
+
{{#> page-main-group page-main-group--modifier="pf-m-sticky-top"}}
|
|
46
|
+
{{> page-template-breadcrumb}}
|
|
47
|
+
{{> page-template-title}}
|
|
48
|
+
{{/page-main-group}}
|
|
49
|
+
{{> page-template-gallery}}
|
|
50
|
+
{{/inline}}
|
|
1730
51
|
```
|
|
1731
52
|
|
|
1732
53
|
### Sticky section bottom
|
|
1733
54
|
|
|
1734
|
-
```
|
|
1735
|
-
|
|
1736
|
-
|
|
1737
|
-
|
|
1738
|
-
|
|
1739
|
-
|
|
1740
|
-
|
|
1741
|
-
<div class="pf-c-page__header-brand">
|
|
1742
|
-
<div class="pf-c-page__header-brand-toggle">
|
|
1743
|
-
<button
|
|
1744
|
-
class="pf-c-button pf-m-plain"
|
|
1745
|
-
type="button"
|
|
1746
|
-
id="page-demo-sticky-section-bottom-nav-toggle"
|
|
1747
|
-
aria-label="Global navigation"
|
|
1748
|
-
aria-expanded="true"
|
|
1749
|
-
aria-controls="page-demo-sticky-section-bottom-primary-nav"
|
|
1750
|
-
>
|
|
1751
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
1752
|
-
</button>
|
|
1753
|
-
</div>
|
|
1754
|
-
<a href="#" class="pf-c-page__header-brand-link">
|
|
1755
|
-
<img
|
|
1756
|
-
class="pf-c-brand"
|
|
1757
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
1758
|
-
alt="PatternFly logo"
|
|
1759
|
-
/>
|
|
1760
|
-
</a>
|
|
1761
|
-
</div>
|
|
1762
|
-
|
|
1763
|
-
<div class="pf-c-page__header-tools">
|
|
1764
|
-
<div class="pf-c-page__header-tools-group">
|
|
1765
|
-
<div
|
|
1766
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
1767
|
-
>
|
|
1768
|
-
<button
|
|
1769
|
-
class="pf-c-button pf-m-plain"
|
|
1770
|
-
type="button"
|
|
1771
|
-
aria-label="Settings"
|
|
1772
|
-
>
|
|
1773
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1774
|
-
</button>
|
|
1775
|
-
</div>
|
|
1776
|
-
<div
|
|
1777
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
1778
|
-
>
|
|
1779
|
-
<button
|
|
1780
|
-
class="pf-c-button pf-m-plain"
|
|
1781
|
-
type="button"
|
|
1782
|
-
aria-label="Help"
|
|
1783
|
-
>
|
|
1784
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
1785
|
-
</button>
|
|
1786
|
-
</div>
|
|
1787
|
-
</div>
|
|
1788
|
-
<div class="pf-c-page__header-tools-group">
|
|
1789
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
1790
|
-
<div class="pf-c-dropdown">
|
|
1791
|
-
<button
|
|
1792
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1793
|
-
id="page-demo-sticky-section-bottom-dropdown-kebab-1-button"
|
|
1794
|
-
aria-expanded="false"
|
|
1795
|
-
type="button"
|
|
1796
|
-
aria-label="Actions"
|
|
1797
|
-
>
|
|
1798
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1799
|
-
</button>
|
|
1800
|
-
<ul
|
|
1801
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1802
|
-
aria-labelledby="page-demo-sticky-section-bottom-dropdown-kebab-1-button"
|
|
1803
|
-
hidden
|
|
1804
|
-
>
|
|
1805
|
-
<li>
|
|
1806
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1807
|
-
</li>
|
|
1808
|
-
<li>
|
|
1809
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1810
|
-
</li>
|
|
1811
|
-
<li>
|
|
1812
|
-
<a
|
|
1813
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1814
|
-
href="#"
|
|
1815
|
-
aria-disabled="true"
|
|
1816
|
-
tabindex="-1"
|
|
1817
|
-
>Disabled link</a>
|
|
1818
|
-
</li>
|
|
1819
|
-
<li>
|
|
1820
|
-
<button
|
|
1821
|
-
class="pf-c-dropdown__menu-item"
|
|
1822
|
-
type="button"
|
|
1823
|
-
disabled
|
|
1824
|
-
>Disabled action</button>
|
|
1825
|
-
</li>
|
|
1826
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1827
|
-
<li>
|
|
1828
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1829
|
-
</li>
|
|
1830
|
-
</ul>
|
|
1831
|
-
</div>
|
|
1832
|
-
</div>
|
|
1833
|
-
<div
|
|
1834
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
1835
|
-
>
|
|
1836
|
-
<div class="pf-c-dropdown">
|
|
1837
|
-
<button
|
|
1838
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1839
|
-
id="page-demo-sticky-section-bottom-dropdown-kebab-2-button"
|
|
1840
|
-
aria-expanded="false"
|
|
1841
|
-
type="button"
|
|
1842
|
-
>
|
|
1843
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
1844
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
1845
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1846
|
-
</span>
|
|
1847
|
-
</button>
|
|
1848
|
-
<ul
|
|
1849
|
-
class="pf-c-dropdown__menu"
|
|
1850
|
-
aria-labelledby="page-demo-sticky-section-bottom-dropdown-kebab-2-button"
|
|
1851
|
-
hidden
|
|
1852
|
-
>
|
|
1853
|
-
<li>
|
|
1854
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
1855
|
-
</li>
|
|
1856
|
-
<li>
|
|
1857
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
1858
|
-
</li>
|
|
1859
|
-
<li>
|
|
1860
|
-
<a
|
|
1861
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
1862
|
-
href="#"
|
|
1863
|
-
aria-disabled="true"
|
|
1864
|
-
tabindex="-1"
|
|
1865
|
-
>Disabled link</a>
|
|
1866
|
-
</li>
|
|
1867
|
-
<li>
|
|
1868
|
-
<button
|
|
1869
|
-
class="pf-c-dropdown__menu-item"
|
|
1870
|
-
type="button"
|
|
1871
|
-
disabled
|
|
1872
|
-
>Disabled action</button>
|
|
1873
|
-
</li>
|
|
1874
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
1875
|
-
<li>
|
|
1876
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
1877
|
-
</li>
|
|
1878
|
-
</ul>
|
|
1879
|
-
</div>
|
|
1880
|
-
</div>
|
|
1881
|
-
</div>
|
|
1882
|
-
<img
|
|
1883
|
-
class="pf-c-avatar"
|
|
1884
|
-
src="/assets/images/img_avatar.svg"
|
|
1885
|
-
alt="Avatar image"
|
|
1886
|
-
/>
|
|
1887
|
-
</div>
|
|
1888
|
-
</header>
|
|
1889
|
-
<div class="pf-c-page__sidebar">
|
|
1890
|
-
<div class="pf-c-page__sidebar-body">
|
|
1891
|
-
<nav
|
|
1892
|
-
class="pf-c-nav"
|
|
1893
|
-
id="page-demo-sticky-section-bottom-primary-nav"
|
|
1894
|
-
aria-label="Global"
|
|
1895
|
-
>
|
|
1896
|
-
<ul class="pf-c-nav__list">
|
|
1897
|
-
<li class="pf-c-nav__item">
|
|
1898
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1899
|
-
</li>
|
|
1900
|
-
<li class="pf-c-nav__item">
|
|
1901
|
-
<a
|
|
1902
|
-
href="#"
|
|
1903
|
-
class="pf-c-nav__link pf-m-current"
|
|
1904
|
-
aria-current="page"
|
|
1905
|
-
>Policy</a>
|
|
1906
|
-
</li>
|
|
1907
|
-
<li class="pf-c-nav__item">
|
|
1908
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1909
|
-
</li>
|
|
1910
|
-
<li class="pf-c-nav__item">
|
|
1911
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1912
|
-
</li>
|
|
1913
|
-
<li class="pf-c-nav__item">
|
|
1914
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1915
|
-
</li>
|
|
1916
|
-
</ul>
|
|
1917
|
-
</nav>
|
|
1918
|
-
</div>
|
|
1919
|
-
</div>
|
|
1920
|
-
<main
|
|
1921
|
-
class="pf-c-page__main"
|
|
1922
|
-
tabindex="-1"
|
|
1923
|
-
id="main-content-page-demo-sticky-section-bottom"
|
|
1924
|
-
>
|
|
1925
|
-
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
1926
|
-
<div class="pf-c-page__main-body">
|
|
1927
|
-
<nav
|
|
1928
|
-
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
1929
|
-
aria-label="Local"
|
|
1930
|
-
>
|
|
1931
|
-
<button
|
|
1932
|
-
class="pf-c-nav__scroll-button"
|
|
1933
|
-
disabled
|
|
1934
|
-
aria-label="Scroll left"
|
|
1935
|
-
>
|
|
1936
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
1937
|
-
</button>
|
|
1938
|
-
<ul class="pf-c-nav__list">
|
|
1939
|
-
<li class="pf-c-nav__item">
|
|
1940
|
-
<a
|
|
1941
|
-
href="#"
|
|
1942
|
-
class="pf-c-nav__link pf-m-current"
|
|
1943
|
-
aria-current="page"
|
|
1944
|
-
>Horizontal subnav item 1</a>
|
|
1945
|
-
</li>
|
|
1946
|
-
<li class="pf-c-nav__item">
|
|
1947
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
1948
|
-
</li>
|
|
1949
|
-
<li class="pf-c-nav__item">
|
|
1950
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
1951
|
-
</li>
|
|
1952
|
-
<li class="pf-c-nav__item">
|
|
1953
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
1954
|
-
</li>
|
|
1955
|
-
<li class="pf-c-nav__item">
|
|
1956
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
1957
|
-
</li>
|
|
1958
|
-
</ul>
|
|
1959
|
-
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
1960
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1961
|
-
</button>
|
|
1962
|
-
</nav>
|
|
1963
|
-
</div>
|
|
1964
|
-
</section>
|
|
1965
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1966
|
-
<div class="pf-c-page__main-body">
|
|
1967
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1968
|
-
<ol class="pf-c-breadcrumb__list">
|
|
1969
|
-
<li class="pf-c-breadcrumb__item">
|
|
1970
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1971
|
-
</li>
|
|
1972
|
-
<li class="pf-c-breadcrumb__item">
|
|
1973
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
1974
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1975
|
-
</span>
|
|
1976
|
-
|
|
1977
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1978
|
-
</li>
|
|
1979
|
-
<li class="pf-c-breadcrumb__item">
|
|
1980
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
1981
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1982
|
-
</span>
|
|
1983
|
-
|
|
1984
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1985
|
-
</li>
|
|
1986
|
-
<li class="pf-c-breadcrumb__item">
|
|
1987
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
1988
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1989
|
-
</span>
|
|
1990
|
-
|
|
1991
|
-
<a
|
|
1992
|
-
href="#"
|
|
1993
|
-
class="pf-c-breadcrumb__link pf-m-current"
|
|
1994
|
-
aria-current="page"
|
|
1995
|
-
>Section landing</a>
|
|
1996
|
-
</li>
|
|
1997
|
-
</ol>
|
|
1998
|
-
</nav>
|
|
1999
|
-
</div>
|
|
2000
|
-
</section>
|
|
2001
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
2002
|
-
<div class="pf-c-page__main-body">
|
|
2003
|
-
<div class="pf-c-content">
|
|
2004
|
-
<h1>Main title</h1>
|
|
2005
|
-
<p>This is a demo of the page component.</p>
|
|
2006
|
-
</div>
|
|
2007
|
-
</div>
|
|
2008
|
-
</section>
|
|
2009
|
-
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
2010
|
-
<div class="pf-c-page__main-body">
|
|
2011
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
2012
|
-
<div class="pf-l-gallery__item">
|
|
2013
|
-
<div class="pf-c-card">
|
|
2014
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2015
|
-
</div>
|
|
2016
|
-
</div>
|
|
2017
|
-
<div class="pf-l-gallery__item">
|
|
2018
|
-
<div class="pf-c-card">
|
|
2019
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2020
|
-
</div>
|
|
2021
|
-
</div>
|
|
2022
|
-
<div class="pf-l-gallery__item">
|
|
2023
|
-
<div class="pf-c-card">
|
|
2024
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2025
|
-
</div>
|
|
2026
|
-
</div>
|
|
2027
|
-
<div class="pf-l-gallery__item">
|
|
2028
|
-
<div class="pf-c-card">
|
|
2029
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2030
|
-
</div>
|
|
2031
|
-
</div>
|
|
2032
|
-
<div class="pf-l-gallery__item">
|
|
2033
|
-
<div class="pf-c-card">
|
|
2034
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2035
|
-
</div>
|
|
2036
|
-
</div>
|
|
2037
|
-
<div class="pf-l-gallery__item">
|
|
2038
|
-
<div class="pf-c-card">
|
|
2039
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2040
|
-
</div>
|
|
2041
|
-
</div>
|
|
2042
|
-
<div class="pf-l-gallery__item">
|
|
2043
|
-
<div class="pf-c-card">
|
|
2044
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2045
|
-
</div>
|
|
2046
|
-
</div>
|
|
2047
|
-
<div class="pf-l-gallery__item">
|
|
2048
|
-
<div class="pf-c-card">
|
|
2049
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2050
|
-
</div>
|
|
2051
|
-
</div>
|
|
2052
|
-
<div class="pf-l-gallery__item">
|
|
2053
|
-
<div class="pf-c-card">
|
|
2054
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2055
|
-
</div>
|
|
2056
|
-
</div>
|
|
2057
|
-
<div class="pf-l-gallery__item">
|
|
2058
|
-
<div class="pf-c-card">
|
|
2059
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2060
|
-
</div>
|
|
2061
|
-
</div>
|
|
2062
|
-
<div class="pf-l-gallery__item">
|
|
2063
|
-
<div class="pf-c-card">
|
|
2064
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2065
|
-
</div>
|
|
2066
|
-
</div>
|
|
2067
|
-
<div class="pf-l-gallery__item">
|
|
2068
|
-
<div class="pf-c-card">
|
|
2069
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2070
|
-
</div>
|
|
2071
|
-
</div>
|
|
2072
|
-
<div class="pf-l-gallery__item">
|
|
2073
|
-
<div class="pf-c-card">
|
|
2074
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2075
|
-
</div>
|
|
2076
|
-
</div>
|
|
2077
|
-
<div class="pf-l-gallery__item">
|
|
2078
|
-
<div class="pf-c-card">
|
|
2079
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2080
|
-
</div>
|
|
2081
|
-
</div>
|
|
2082
|
-
<div class="pf-l-gallery__item">
|
|
2083
|
-
<div class="pf-c-card">
|
|
2084
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2085
|
-
</div>
|
|
2086
|
-
</div>
|
|
2087
|
-
<div class="pf-l-gallery__item">
|
|
2088
|
-
<div class="pf-c-card">
|
|
2089
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2090
|
-
</div>
|
|
2091
|
-
</div>
|
|
2092
|
-
<div class="pf-l-gallery__item">
|
|
2093
|
-
<div class="pf-c-card">
|
|
2094
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2095
|
-
</div>
|
|
2096
|
-
</div>
|
|
2097
|
-
<div class="pf-l-gallery__item">
|
|
2098
|
-
<div class="pf-c-card">
|
|
2099
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2100
|
-
</div>
|
|
2101
|
-
</div>
|
|
2102
|
-
<div class="pf-l-gallery__item">
|
|
2103
|
-
<div class="pf-c-card">
|
|
2104
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2105
|
-
</div>
|
|
2106
|
-
</div>
|
|
2107
|
-
<div class="pf-l-gallery__item">
|
|
2108
|
-
<div class="pf-c-card">
|
|
2109
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2110
|
-
</div>
|
|
2111
|
-
</div>
|
|
2112
|
-
<div class="pf-l-gallery__item">
|
|
2113
|
-
<div class="pf-c-card">
|
|
2114
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2115
|
-
</div>
|
|
2116
|
-
</div>
|
|
2117
|
-
<div class="pf-l-gallery__item">
|
|
2118
|
-
<div class="pf-c-card">
|
|
2119
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2120
|
-
</div>
|
|
2121
|
-
</div>
|
|
2122
|
-
<div class="pf-l-gallery__item">
|
|
2123
|
-
<div class="pf-c-card">
|
|
2124
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2125
|
-
</div>
|
|
2126
|
-
</div>
|
|
2127
|
-
<div class="pf-l-gallery__item">
|
|
2128
|
-
<div class="pf-c-card">
|
|
2129
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2130
|
-
</div>
|
|
2131
|
-
</div>
|
|
2132
|
-
<div class="pf-l-gallery__item">
|
|
2133
|
-
<div class="pf-c-card">
|
|
2134
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2135
|
-
</div>
|
|
2136
|
-
</div>
|
|
2137
|
-
<div class="pf-l-gallery__item">
|
|
2138
|
-
<div class="pf-c-card">
|
|
2139
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2140
|
-
</div>
|
|
2141
|
-
</div>
|
|
2142
|
-
<div class="pf-l-gallery__item">
|
|
2143
|
-
<div class="pf-c-card">
|
|
2144
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2145
|
-
</div>
|
|
2146
|
-
</div>
|
|
2147
|
-
<div class="pf-l-gallery__item">
|
|
2148
|
-
<div class="pf-c-card">
|
|
2149
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2150
|
-
</div>
|
|
2151
|
-
</div>
|
|
2152
|
-
<div class="pf-l-gallery__item">
|
|
2153
|
-
<div class="pf-c-card">
|
|
2154
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2155
|
-
</div>
|
|
2156
|
-
</div>
|
|
2157
|
-
<div class="pf-l-gallery__item">
|
|
2158
|
-
<div class="pf-c-card">
|
|
2159
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2160
|
-
</div>
|
|
2161
|
-
</div>
|
|
2162
|
-
<div class="pf-l-gallery__item">
|
|
2163
|
-
<div class="pf-c-card">
|
|
2164
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2165
|
-
</div>
|
|
2166
|
-
</div>
|
|
2167
|
-
<div class="pf-l-gallery__item">
|
|
2168
|
-
<div class="pf-c-card">
|
|
2169
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2170
|
-
</div>
|
|
2171
|
-
</div>
|
|
2172
|
-
<div class="pf-l-gallery__item">
|
|
2173
|
-
<div class="pf-c-card">
|
|
2174
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2175
|
-
</div>
|
|
2176
|
-
</div>
|
|
2177
|
-
<div class="pf-l-gallery__item">
|
|
2178
|
-
<div class="pf-c-card">
|
|
2179
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2180
|
-
</div>
|
|
2181
|
-
</div>
|
|
2182
|
-
<div class="pf-l-gallery__item">
|
|
2183
|
-
<div class="pf-c-card">
|
|
2184
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2185
|
-
</div>
|
|
2186
|
-
</div>
|
|
2187
|
-
<div class="pf-l-gallery__item">
|
|
2188
|
-
<div class="pf-c-card">
|
|
2189
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2190
|
-
</div>
|
|
2191
|
-
</div>
|
|
2192
|
-
<div class="pf-l-gallery__item">
|
|
2193
|
-
<div class="pf-c-card">
|
|
2194
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2195
|
-
</div>
|
|
2196
|
-
</div>
|
|
2197
|
-
<div class="pf-l-gallery__item">
|
|
2198
|
-
<div class="pf-c-card">
|
|
2199
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2200
|
-
</div>
|
|
2201
|
-
</div>
|
|
2202
|
-
<div class="pf-l-gallery__item">
|
|
2203
|
-
<div class="pf-c-card">
|
|
2204
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2205
|
-
</div>
|
|
2206
|
-
</div>
|
|
2207
|
-
<div class="pf-l-gallery__item">
|
|
2208
|
-
<div class="pf-c-card">
|
|
2209
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2210
|
-
</div>
|
|
2211
|
-
</div>
|
|
2212
|
-
<div class="pf-l-gallery__item">
|
|
2213
|
-
<div class="pf-c-card">
|
|
2214
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2215
|
-
</div>
|
|
2216
|
-
</div>
|
|
2217
|
-
<div class="pf-l-gallery__item">
|
|
2218
|
-
<div class="pf-c-card">
|
|
2219
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2220
|
-
</div>
|
|
2221
|
-
</div>
|
|
2222
|
-
<div class="pf-l-gallery__item">
|
|
2223
|
-
<div class="pf-c-card">
|
|
2224
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2225
|
-
</div>
|
|
2226
|
-
</div>
|
|
2227
|
-
<div class="pf-l-gallery__item">
|
|
2228
|
-
<div class="pf-c-card">
|
|
2229
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2230
|
-
</div>
|
|
2231
|
-
</div>
|
|
2232
|
-
<div class="pf-l-gallery__item">
|
|
2233
|
-
<div class="pf-c-card">
|
|
2234
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2235
|
-
</div>
|
|
2236
|
-
</div>
|
|
2237
|
-
<div class="pf-l-gallery__item">
|
|
2238
|
-
<div class="pf-c-card">
|
|
2239
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2240
|
-
</div>
|
|
2241
|
-
</div>
|
|
2242
|
-
<div class="pf-l-gallery__item">
|
|
2243
|
-
<div class="pf-c-card">
|
|
2244
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2245
|
-
</div>
|
|
2246
|
-
</div>
|
|
2247
|
-
<div class="pf-l-gallery__item">
|
|
2248
|
-
<div class="pf-c-card">
|
|
2249
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2250
|
-
</div>
|
|
2251
|
-
</div>
|
|
2252
|
-
<div class="pf-l-gallery__item">
|
|
2253
|
-
<div class="pf-c-card">
|
|
2254
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2255
|
-
</div>
|
|
2256
|
-
</div>
|
|
2257
|
-
<div class="pf-l-gallery__item">
|
|
2258
|
-
<div class="pf-c-card">
|
|
2259
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2260
|
-
</div>
|
|
2261
|
-
</div>
|
|
2262
|
-
</div>
|
|
2263
|
-
</div>
|
|
2264
|
-
</section>
|
|
2265
|
-
<section
|
|
2266
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-sticky-bottom"
|
|
2267
|
-
>
|
|
2268
|
-
<div class="pf-c-page__main-body">
|
|
2269
|
-
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
2270
|
-
</div>
|
|
2271
|
-
</section>
|
|
2272
|
-
</main>
|
|
2273
|
-
</div>
|
|
2274
|
-
|
|
55
|
+
```hbs isFullscreen
|
|
56
|
+
{{> page-template
|
|
57
|
+
page-template--id="page-demo-sticky-section-bottom"
|
|
58
|
+
page-template--HasFooter="true"
|
|
59
|
+
page-template-gallery--IsLongGallery="true"
|
|
60
|
+
page-template-footer--modifier="pf-m-sticky-bottom"
|
|
61
|
+
}}
|
|
2275
62
|
```
|
|
2276
63
|
|
|
2277
64
|
### Overflow scroll
|
|
2278
65
|
|
|
2279
|
-
```
|
|
2280
|
-
|
|
2281
|
-
|
|
2282
|
-
|
|
2283
|
-
|
|
2284
|
-
|
|
2285
|
-
|
|
2286
|
-
|
|
2287
|
-
|
|
2288
|
-
<button
|
|
2289
|
-
class="pf-c-button pf-m-plain"
|
|
2290
|
-
type="button"
|
|
2291
|
-
id="page-demo-overflow-scroll-nav-toggle"
|
|
2292
|
-
aria-label="Global navigation"
|
|
2293
|
-
aria-expanded="true"
|
|
2294
|
-
aria-controls="page-demo-overflow-scroll-primary-nav"
|
|
2295
|
-
>
|
|
2296
|
-
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
2297
|
-
</button>
|
|
2298
|
-
</div>
|
|
2299
|
-
<a href="#" class="pf-c-page__header-brand-link">
|
|
2300
|
-
<img
|
|
2301
|
-
class="pf-c-brand"
|
|
2302
|
-
src="/assets/images/PF-Masthead-Logo.svg"
|
|
2303
|
-
alt="PatternFly logo"
|
|
2304
|
-
/>
|
|
2305
|
-
</a>
|
|
2306
|
-
</div>
|
|
2307
|
-
|
|
2308
|
-
<div class="pf-c-page__header-tools">
|
|
2309
|
-
<div class="pf-c-page__header-tools-group">
|
|
2310
|
-
<div
|
|
2311
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
2312
|
-
>
|
|
2313
|
-
<button
|
|
2314
|
-
class="pf-c-button pf-m-plain"
|
|
2315
|
-
type="button"
|
|
2316
|
-
aria-label="Settings"
|
|
2317
|
-
>
|
|
2318
|
-
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
2319
|
-
</button>
|
|
2320
|
-
</div>
|
|
2321
|
-
<div
|
|
2322
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"
|
|
2323
|
-
>
|
|
2324
|
-
<button
|
|
2325
|
-
class="pf-c-button pf-m-plain"
|
|
2326
|
-
type="button"
|
|
2327
|
-
aria-label="Help"
|
|
2328
|
-
>
|
|
2329
|
-
<i class="pf-icon pf-icon-help" aria-hidden="true"></i>
|
|
2330
|
-
</button>
|
|
2331
|
-
</div>
|
|
2332
|
-
</div>
|
|
2333
|
-
<div class="pf-c-page__header-tools-group">
|
|
2334
|
-
<div class="pf-c-page__header-tools-item pf-m-hidden-on-lg">
|
|
2335
|
-
<div class="pf-c-dropdown">
|
|
2336
|
-
<button
|
|
2337
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2338
|
-
id="page-demo-overflow-scroll-dropdown-kebab-1-button"
|
|
2339
|
-
aria-expanded="false"
|
|
2340
|
-
type="button"
|
|
2341
|
-
aria-label="Actions"
|
|
2342
|
-
>
|
|
2343
|
-
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
2344
|
-
</button>
|
|
2345
|
-
<ul
|
|
2346
|
-
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2347
|
-
aria-labelledby="page-demo-overflow-scroll-dropdown-kebab-1-button"
|
|
2348
|
-
hidden
|
|
2349
|
-
>
|
|
2350
|
-
<li>
|
|
2351
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2352
|
-
</li>
|
|
2353
|
-
<li>
|
|
2354
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
2355
|
-
</li>
|
|
2356
|
-
<li>
|
|
2357
|
-
<a
|
|
2358
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2359
|
-
href="#"
|
|
2360
|
-
aria-disabled="true"
|
|
2361
|
-
tabindex="-1"
|
|
2362
|
-
>Disabled link</a>
|
|
2363
|
-
</li>
|
|
2364
|
-
<li>
|
|
2365
|
-
<button
|
|
2366
|
-
class="pf-c-dropdown__menu-item"
|
|
2367
|
-
type="button"
|
|
2368
|
-
disabled
|
|
2369
|
-
>Disabled action</button>
|
|
2370
|
-
</li>
|
|
2371
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
2372
|
-
<li>
|
|
2373
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
2374
|
-
</li>
|
|
2375
|
-
</ul>
|
|
2376
|
-
</div>
|
|
2377
|
-
</div>
|
|
2378
|
-
<div
|
|
2379
|
-
class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"
|
|
2380
|
-
>
|
|
2381
|
-
<div class="pf-c-dropdown">
|
|
2382
|
-
<button
|
|
2383
|
-
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2384
|
-
id="page-demo-overflow-scroll-dropdown-kebab-2-button"
|
|
2385
|
-
aria-expanded="false"
|
|
2386
|
-
type="button"
|
|
2387
|
-
>
|
|
2388
|
-
<span class="pf-c-dropdown__toggle-text">John Smith</span>
|
|
2389
|
-
<span class="pf-c-dropdown__toggle-icon">
|
|
2390
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
2391
|
-
</span>
|
|
2392
|
-
</button>
|
|
2393
|
-
<ul
|
|
2394
|
-
class="pf-c-dropdown__menu"
|
|
2395
|
-
aria-labelledby="page-demo-overflow-scroll-dropdown-kebab-2-button"
|
|
2396
|
-
hidden
|
|
2397
|
-
>
|
|
2398
|
-
<li>
|
|
2399
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2400
|
-
</li>
|
|
2401
|
-
<li>
|
|
2402
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
2403
|
-
</li>
|
|
2404
|
-
<li>
|
|
2405
|
-
<a
|
|
2406
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2407
|
-
href="#"
|
|
2408
|
-
aria-disabled="true"
|
|
2409
|
-
tabindex="-1"
|
|
2410
|
-
>Disabled link</a>
|
|
2411
|
-
</li>
|
|
2412
|
-
<li>
|
|
2413
|
-
<button
|
|
2414
|
-
class="pf-c-dropdown__menu-item"
|
|
2415
|
-
type="button"
|
|
2416
|
-
disabled
|
|
2417
|
-
>Disabled action</button>
|
|
2418
|
-
</li>
|
|
2419
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
2420
|
-
<li>
|
|
2421
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
2422
|
-
</li>
|
|
2423
|
-
</ul>
|
|
2424
|
-
</div>
|
|
2425
|
-
</div>
|
|
2426
|
-
</div>
|
|
2427
|
-
<img
|
|
2428
|
-
class="pf-c-avatar"
|
|
2429
|
-
src="/assets/images/img_avatar.svg"
|
|
2430
|
-
alt="Avatar image"
|
|
2431
|
-
/>
|
|
2432
|
-
</div>
|
|
2433
|
-
</header>
|
|
2434
|
-
<div class="pf-c-page__sidebar">
|
|
2435
|
-
<div class="pf-c-page__sidebar-body">
|
|
2436
|
-
<nav
|
|
2437
|
-
class="pf-c-nav"
|
|
2438
|
-
id="page-demo-overflow-scroll-primary-nav"
|
|
2439
|
-
aria-label="Global"
|
|
2440
|
-
>
|
|
2441
|
-
<ul class="pf-c-nav__list">
|
|
2442
|
-
<li class="pf-c-nav__item">
|
|
2443
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
2444
|
-
</li>
|
|
2445
|
-
<li class="pf-c-nav__item">
|
|
2446
|
-
<a
|
|
2447
|
-
href="#"
|
|
2448
|
-
class="pf-c-nav__link pf-m-current"
|
|
2449
|
-
aria-current="page"
|
|
2450
|
-
>Policy</a>
|
|
2451
|
-
</li>
|
|
2452
|
-
<li class="pf-c-nav__item">
|
|
2453
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
2454
|
-
</li>
|
|
2455
|
-
<li class="pf-c-nav__item">
|
|
2456
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
2457
|
-
</li>
|
|
2458
|
-
<li class="pf-c-nav__item">
|
|
2459
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
2460
|
-
</li>
|
|
2461
|
-
</ul>
|
|
2462
|
-
</nav>
|
|
2463
|
-
</div>
|
|
2464
|
-
</div>
|
|
2465
|
-
<main
|
|
2466
|
-
class="pf-c-page__main"
|
|
2467
|
-
tabindex="-1"
|
|
2468
|
-
id="main-content-page-demo-overflow-scroll"
|
|
2469
|
-
>
|
|
2470
|
-
<section class="pf-c-page__main-subnav pf-m-limit-width">
|
|
2471
|
-
<div class="pf-c-page__main-body">
|
|
2472
|
-
<nav
|
|
2473
|
-
class="pf-c-nav pf-m-horizontal-subnav pf-m-scrollable"
|
|
2474
|
-
aria-label="Local"
|
|
2475
|
-
>
|
|
2476
|
-
<button
|
|
2477
|
-
class="pf-c-nav__scroll-button"
|
|
2478
|
-
disabled
|
|
2479
|
-
aria-label="Scroll left"
|
|
2480
|
-
>
|
|
2481
|
-
<i class="fas fa-angle-left" aria-hidden="true"></i>
|
|
2482
|
-
</button>
|
|
2483
|
-
<ul class="pf-c-nav__list">
|
|
2484
|
-
<li class="pf-c-nav__item">
|
|
2485
|
-
<a
|
|
2486
|
-
href="#"
|
|
2487
|
-
class="pf-c-nav__link pf-m-current"
|
|
2488
|
-
aria-current="page"
|
|
2489
|
-
>Horizontal subnav item 1</a>
|
|
2490
|
-
</li>
|
|
2491
|
-
<li class="pf-c-nav__item">
|
|
2492
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 2</a>
|
|
2493
|
-
</li>
|
|
2494
|
-
<li class="pf-c-nav__item">
|
|
2495
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 3</a>
|
|
2496
|
-
</li>
|
|
2497
|
-
<li class="pf-c-nav__item">
|
|
2498
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 4</a>
|
|
2499
|
-
</li>
|
|
2500
|
-
<li class="pf-c-nav__item">
|
|
2501
|
-
<a href="#" class="pf-c-nav__link">Horizontal subnav item 5</a>
|
|
2502
|
-
</li>
|
|
2503
|
-
</ul>
|
|
2504
|
-
<button class="pf-c-nav__scroll-button" aria-label="Scroll right">
|
|
2505
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2506
|
-
</button>
|
|
2507
|
-
</nav>
|
|
2508
|
-
</div>
|
|
2509
|
-
</section>
|
|
2510
|
-
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
2511
|
-
<div class="pf-c-page__main-body">
|
|
2512
|
-
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
2513
|
-
<ol class="pf-c-breadcrumb__list">
|
|
2514
|
-
<li class="pf-c-breadcrumb__item">
|
|
2515
|
-
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
2516
|
-
</li>
|
|
2517
|
-
<li class="pf-c-breadcrumb__item">
|
|
2518
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
2519
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2520
|
-
</span>
|
|
2521
|
-
|
|
2522
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2523
|
-
</li>
|
|
2524
|
-
<li class="pf-c-breadcrumb__item">
|
|
2525
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
2526
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2527
|
-
</span>
|
|
2528
|
-
|
|
2529
|
-
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
2530
|
-
</li>
|
|
2531
|
-
<li class="pf-c-breadcrumb__item">
|
|
2532
|
-
<span class="pf-c-breadcrumb__item-divider">
|
|
2533
|
-
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
2534
|
-
</span>
|
|
2535
|
-
|
|
2536
|
-
<a
|
|
2537
|
-
href="#"
|
|
2538
|
-
class="pf-c-breadcrumb__link pf-m-current"
|
|
2539
|
-
aria-current="page"
|
|
2540
|
-
>Section landing</a>
|
|
2541
|
-
</li>
|
|
2542
|
-
</ol>
|
|
2543
|
-
</nav>
|
|
2544
|
-
</div>
|
|
2545
|
-
</section>
|
|
2546
|
-
<section
|
|
2547
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-light pf-m-shadow-bottom"
|
|
2548
|
-
>
|
|
2549
|
-
<div class="pf-c-page__main-body">
|
|
2550
|
-
<div class="pf-c-content">
|
|
2551
|
-
<h1>Main title</h1>
|
|
2552
|
-
<p>This is a demo of the page component.</p>
|
|
2553
|
-
</div>
|
|
2554
|
-
</div>
|
|
2555
|
-
</section>
|
|
2556
|
-
<section
|
|
2557
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-overflow-scroll"
|
|
2558
|
-
>
|
|
2559
|
-
<div class="pf-c-page__main-body">
|
|
2560
|
-
<div class="pf-l-gallery pf-m-gutter">
|
|
2561
|
-
<div class="pf-l-gallery__item">
|
|
2562
|
-
<div class="pf-c-card">
|
|
2563
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2564
|
-
</div>
|
|
2565
|
-
</div>
|
|
2566
|
-
<div class="pf-l-gallery__item">
|
|
2567
|
-
<div class="pf-c-card">
|
|
2568
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2569
|
-
</div>
|
|
2570
|
-
</div>
|
|
2571
|
-
<div class="pf-l-gallery__item">
|
|
2572
|
-
<div class="pf-c-card">
|
|
2573
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2574
|
-
</div>
|
|
2575
|
-
</div>
|
|
2576
|
-
<div class="pf-l-gallery__item">
|
|
2577
|
-
<div class="pf-c-card">
|
|
2578
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2579
|
-
</div>
|
|
2580
|
-
</div>
|
|
2581
|
-
<div class="pf-l-gallery__item">
|
|
2582
|
-
<div class="pf-c-card">
|
|
2583
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2584
|
-
</div>
|
|
2585
|
-
</div>
|
|
2586
|
-
<div class="pf-l-gallery__item">
|
|
2587
|
-
<div class="pf-c-card">
|
|
2588
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2589
|
-
</div>
|
|
2590
|
-
</div>
|
|
2591
|
-
<div class="pf-l-gallery__item">
|
|
2592
|
-
<div class="pf-c-card">
|
|
2593
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2594
|
-
</div>
|
|
2595
|
-
</div>
|
|
2596
|
-
<div class="pf-l-gallery__item">
|
|
2597
|
-
<div class="pf-c-card">
|
|
2598
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2599
|
-
</div>
|
|
2600
|
-
</div>
|
|
2601
|
-
<div class="pf-l-gallery__item">
|
|
2602
|
-
<div class="pf-c-card">
|
|
2603
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2604
|
-
</div>
|
|
2605
|
-
</div>
|
|
2606
|
-
<div class="pf-l-gallery__item">
|
|
2607
|
-
<div class="pf-c-card">
|
|
2608
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2609
|
-
</div>
|
|
2610
|
-
</div>
|
|
2611
|
-
<div class="pf-l-gallery__item">
|
|
2612
|
-
<div class="pf-c-card">
|
|
2613
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2614
|
-
</div>
|
|
2615
|
-
</div>
|
|
2616
|
-
<div class="pf-l-gallery__item">
|
|
2617
|
-
<div class="pf-c-card">
|
|
2618
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2619
|
-
</div>
|
|
2620
|
-
</div>
|
|
2621
|
-
<div class="pf-l-gallery__item">
|
|
2622
|
-
<div class="pf-c-card">
|
|
2623
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2624
|
-
</div>
|
|
2625
|
-
</div>
|
|
2626
|
-
<div class="pf-l-gallery__item">
|
|
2627
|
-
<div class="pf-c-card">
|
|
2628
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2629
|
-
</div>
|
|
2630
|
-
</div>
|
|
2631
|
-
<div class="pf-l-gallery__item">
|
|
2632
|
-
<div class="pf-c-card">
|
|
2633
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2634
|
-
</div>
|
|
2635
|
-
</div>
|
|
2636
|
-
<div class="pf-l-gallery__item">
|
|
2637
|
-
<div class="pf-c-card">
|
|
2638
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2639
|
-
</div>
|
|
2640
|
-
</div>
|
|
2641
|
-
<div class="pf-l-gallery__item">
|
|
2642
|
-
<div class="pf-c-card">
|
|
2643
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2644
|
-
</div>
|
|
2645
|
-
</div>
|
|
2646
|
-
<div class="pf-l-gallery__item">
|
|
2647
|
-
<div class="pf-c-card">
|
|
2648
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2649
|
-
</div>
|
|
2650
|
-
</div>
|
|
2651
|
-
<div class="pf-l-gallery__item">
|
|
2652
|
-
<div class="pf-c-card">
|
|
2653
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2654
|
-
</div>
|
|
2655
|
-
</div>
|
|
2656
|
-
<div class="pf-l-gallery__item">
|
|
2657
|
-
<div class="pf-c-card">
|
|
2658
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2659
|
-
</div>
|
|
2660
|
-
</div>
|
|
2661
|
-
<div class="pf-l-gallery__item">
|
|
2662
|
-
<div class="pf-c-card">
|
|
2663
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2664
|
-
</div>
|
|
2665
|
-
</div>
|
|
2666
|
-
<div class="pf-l-gallery__item">
|
|
2667
|
-
<div class="pf-c-card">
|
|
2668
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2669
|
-
</div>
|
|
2670
|
-
</div>
|
|
2671
|
-
<div class="pf-l-gallery__item">
|
|
2672
|
-
<div class="pf-c-card">
|
|
2673
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2674
|
-
</div>
|
|
2675
|
-
</div>
|
|
2676
|
-
<div class="pf-l-gallery__item">
|
|
2677
|
-
<div class="pf-c-card">
|
|
2678
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2679
|
-
</div>
|
|
2680
|
-
</div>
|
|
2681
|
-
<div class="pf-l-gallery__item">
|
|
2682
|
-
<div class="pf-c-card">
|
|
2683
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2684
|
-
</div>
|
|
2685
|
-
</div>
|
|
2686
|
-
<div class="pf-l-gallery__item">
|
|
2687
|
-
<div class="pf-c-card">
|
|
2688
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2689
|
-
</div>
|
|
2690
|
-
</div>
|
|
2691
|
-
<div class="pf-l-gallery__item">
|
|
2692
|
-
<div class="pf-c-card">
|
|
2693
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2694
|
-
</div>
|
|
2695
|
-
</div>
|
|
2696
|
-
<div class="pf-l-gallery__item">
|
|
2697
|
-
<div class="pf-c-card">
|
|
2698
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2699
|
-
</div>
|
|
2700
|
-
</div>
|
|
2701
|
-
<div class="pf-l-gallery__item">
|
|
2702
|
-
<div class="pf-c-card">
|
|
2703
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2704
|
-
</div>
|
|
2705
|
-
</div>
|
|
2706
|
-
<div class="pf-l-gallery__item">
|
|
2707
|
-
<div class="pf-c-card">
|
|
2708
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2709
|
-
</div>
|
|
2710
|
-
</div>
|
|
2711
|
-
<div class="pf-l-gallery__item">
|
|
2712
|
-
<div class="pf-c-card">
|
|
2713
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2714
|
-
</div>
|
|
2715
|
-
</div>
|
|
2716
|
-
<div class="pf-l-gallery__item">
|
|
2717
|
-
<div class="pf-c-card">
|
|
2718
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2719
|
-
</div>
|
|
2720
|
-
</div>
|
|
2721
|
-
<div class="pf-l-gallery__item">
|
|
2722
|
-
<div class="pf-c-card">
|
|
2723
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2724
|
-
</div>
|
|
2725
|
-
</div>
|
|
2726
|
-
<div class="pf-l-gallery__item">
|
|
2727
|
-
<div class="pf-c-card">
|
|
2728
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2729
|
-
</div>
|
|
2730
|
-
</div>
|
|
2731
|
-
<div class="pf-l-gallery__item">
|
|
2732
|
-
<div class="pf-c-card">
|
|
2733
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2734
|
-
</div>
|
|
2735
|
-
</div>
|
|
2736
|
-
<div class="pf-l-gallery__item">
|
|
2737
|
-
<div class="pf-c-card">
|
|
2738
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2739
|
-
</div>
|
|
2740
|
-
</div>
|
|
2741
|
-
<div class="pf-l-gallery__item">
|
|
2742
|
-
<div class="pf-c-card">
|
|
2743
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2744
|
-
</div>
|
|
2745
|
-
</div>
|
|
2746
|
-
<div class="pf-l-gallery__item">
|
|
2747
|
-
<div class="pf-c-card">
|
|
2748
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2749
|
-
</div>
|
|
2750
|
-
</div>
|
|
2751
|
-
<div class="pf-l-gallery__item">
|
|
2752
|
-
<div class="pf-c-card">
|
|
2753
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2754
|
-
</div>
|
|
2755
|
-
</div>
|
|
2756
|
-
<div class="pf-l-gallery__item">
|
|
2757
|
-
<div class="pf-c-card">
|
|
2758
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2759
|
-
</div>
|
|
2760
|
-
</div>
|
|
2761
|
-
<div class="pf-l-gallery__item">
|
|
2762
|
-
<div class="pf-c-card">
|
|
2763
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2764
|
-
</div>
|
|
2765
|
-
</div>
|
|
2766
|
-
<div class="pf-l-gallery__item">
|
|
2767
|
-
<div class="pf-c-card">
|
|
2768
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2769
|
-
</div>
|
|
2770
|
-
</div>
|
|
2771
|
-
<div class="pf-l-gallery__item">
|
|
2772
|
-
<div class="pf-c-card">
|
|
2773
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2774
|
-
</div>
|
|
2775
|
-
</div>
|
|
2776
|
-
<div class="pf-l-gallery__item">
|
|
2777
|
-
<div class="pf-c-card">
|
|
2778
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2779
|
-
</div>
|
|
2780
|
-
</div>
|
|
2781
|
-
<div class="pf-l-gallery__item">
|
|
2782
|
-
<div class="pf-c-card">
|
|
2783
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2784
|
-
</div>
|
|
2785
|
-
</div>
|
|
2786
|
-
<div class="pf-l-gallery__item">
|
|
2787
|
-
<div class="pf-c-card">
|
|
2788
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2789
|
-
</div>
|
|
2790
|
-
</div>
|
|
2791
|
-
<div class="pf-l-gallery__item">
|
|
2792
|
-
<div class="pf-c-card">
|
|
2793
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2794
|
-
</div>
|
|
2795
|
-
</div>
|
|
2796
|
-
<div class="pf-l-gallery__item">
|
|
2797
|
-
<div class="pf-c-card">
|
|
2798
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2799
|
-
</div>
|
|
2800
|
-
</div>
|
|
2801
|
-
<div class="pf-l-gallery__item">
|
|
2802
|
-
<div class="pf-c-card">
|
|
2803
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2804
|
-
</div>
|
|
2805
|
-
</div>
|
|
2806
|
-
<div class="pf-l-gallery__item">
|
|
2807
|
-
<div class="pf-c-card">
|
|
2808
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
2809
|
-
</div>
|
|
2810
|
-
</div>
|
|
2811
|
-
</div>
|
|
2812
|
-
</div>
|
|
2813
|
-
</section>
|
|
2814
|
-
<section
|
|
2815
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-no-fill pf-m-light pf-m-shadow-top"
|
|
2816
|
-
>
|
|
2817
|
-
<div class="pf-c-page__main-body">
|
|
2818
|
-
<p>PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p>
|
|
2819
|
-
</div>
|
|
2820
|
-
</section>
|
|
2821
|
-
</main>
|
|
2822
|
-
</div>
|
|
2823
|
-
|
|
66
|
+
```hbs isFullscreen
|
|
67
|
+
{{> page-template
|
|
68
|
+
page-template--id="page-demo-overflow-scroll"
|
|
69
|
+
page-template--HasFooter="true"
|
|
70
|
+
page-template-gallery--IsLongGallery="true"
|
|
71
|
+
page-template-gallery--modifier="pf-m-overflow-scroll"
|
|
72
|
+
page-template-title--modifier="pf-m-shadow-bottom"
|
|
73
|
+
page-template-footer--modifier="pf-m-shadow-top"
|
|
74
|
+
}}
|
|
2824
75
|
```
|
|
2825
76
|
|
|
2826
77
|
### Centered content
|
|
2827
78
|
|
|
2828
|
-
```
|
|
2829
|
-
|
|
2830
|
-
|
|
2831
|
-
|
|
2832
|
-
|
|
2833
|
-
|
|
2834
|
-
|
|
2835
|
-
|
|
2836
|
-
|
|
2837
|
-
<
|
|
2838
|
-
|
|
2839
|
-
|
|
2840
|
-
|
|
2841
|
-
|
|
2842
|
-
|
|
2843
|
-
|
|
2844
|
-
|
|
2845
|
-
|
|
2846
|
-
</
|
|
2847
|
-
|
|
2848
|
-
|
|
2849
|
-
|
|
2850
|
-
|
|
2851
|
-
|
|
2852
|
-
|
|
2853
|
-
|
|
2854
|
-
|
|
2855
|
-
|
|
2856
|
-
|
|
2857
|
-
|
|
2858
|
-
|
|
2859
|
-
|
|
2860
|
-
|
|
2861
|
-
|
|
2862
|
-
|
|
2863
|
-
|
|
2864
|
-
|
|
2865
|
-
|
|
2866
|
-
|
|
2867
|
-
|
|
2868
|
-
|
|
2869
|
-
|
|
2870
|
-
|
|
2871
|
-
|
|
2872
|
-
|
|
2873
|
-
|
|
2874
|
-
|
|
2875
|
-
|
|
2876
|
-
|
|
2877
|
-
|
|
2878
|
-
|
|
2879
|
-
|
|
2880
|
-
|
|
2881
|
-
|
|
2882
|
-
|
|
2883
|
-
|
|
2884
|
-
|
|
2885
|
-
|
|
2886
|
-
|
|
2887
|
-
|
|
2888
|
-
|
|
2889
|
-
|
|
2890
|
-
|
|
2891
|
-
|
|
2892
|
-
|
|
2893
|
-
|
|
2894
|
-
|
|
2895
|
-
|
|
2896
|
-
|
|
2897
|
-
|
|
2898
|
-
|
|
2899
|
-
|
|
2900
|
-
|
|
2901
|
-
|
|
2902
|
-
|
|
2903
|
-
|
|
2904
|
-
|
|
2905
|
-
|
|
2906
|
-
|
|
2907
|
-
|
|
2908
|
-
|
|
2909
|
-
|
|
2910
|
-
|
|
2911
|
-
|
|
2912
|
-
|
|
2913
|
-
|
|
2914
|
-
|
|
2915
|
-
|
|
2916
|
-
|
|
2917
|
-
|
|
2918
|
-
|
|
2919
|
-
|
|
2920
|
-
|
|
2921
|
-
|
|
2922
|
-
|
|
2923
|
-
|
|
2924
|
-
|
|
2925
|
-
|
|
2926
|
-
|
|
2927
|
-
|
|
2928
|
-
|
|
2929
|
-
|
|
2930
|
-
|
|
2931
|
-
|
|
2932
|
-
|
|
2933
|
-
|
|
2934
|
-
|
|
2935
|
-
|
|
2936
|
-
|
|
2937
|
-
|
|
2938
|
-
|
|
2939
|
-
|
|
2940
|
-
|
|
2941
|
-
|
|
2942
|
-
|
|
2943
|
-
class="pf-c-dropdown__menu"
|
|
2944
|
-
aria-labelledby="page-demo-centered-content-dropdown-kebab-2-button"
|
|
2945
|
-
hidden
|
|
2946
|
-
>
|
|
2947
|
-
<li>
|
|
2948
|
-
<a class="pf-c-dropdown__menu-item" href="#">Link</a>
|
|
2949
|
-
</li>
|
|
2950
|
-
<li>
|
|
2951
|
-
<button class="pf-c-dropdown__menu-item" type="button">Action</button>
|
|
2952
|
-
</li>
|
|
2953
|
-
<li>
|
|
2954
|
-
<a
|
|
2955
|
-
class="pf-c-dropdown__menu-item pf-m-disabled"
|
|
2956
|
-
href="#"
|
|
2957
|
-
aria-disabled="true"
|
|
2958
|
-
tabindex="-1"
|
|
2959
|
-
>Disabled link</a>
|
|
2960
|
-
</li>
|
|
2961
|
-
<li>
|
|
2962
|
-
<button
|
|
2963
|
-
class="pf-c-dropdown__menu-item"
|
|
2964
|
-
type="button"
|
|
2965
|
-
disabled
|
|
2966
|
-
>Disabled action</button>
|
|
2967
|
-
</li>
|
|
2968
|
-
<li class="pf-c-divider" role="separator"></li>
|
|
2969
|
-
<li>
|
|
2970
|
-
<a class="pf-c-dropdown__menu-item" href="#">Separated link</a>
|
|
2971
|
-
</li>
|
|
2972
|
-
</ul>
|
|
2973
|
-
</div>
|
|
2974
|
-
</div>
|
|
2975
|
-
</div>
|
|
2976
|
-
<img
|
|
2977
|
-
class="pf-c-avatar"
|
|
2978
|
-
src="/assets/images/img_avatar.svg"
|
|
2979
|
-
alt="Avatar image"
|
|
2980
|
-
/>
|
|
2981
|
-
</div>
|
|
2982
|
-
</header>
|
|
2983
|
-
<div class="pf-c-page__sidebar">
|
|
2984
|
-
<div class="pf-c-page__sidebar-body">
|
|
2985
|
-
<nav
|
|
2986
|
-
class="pf-c-nav"
|
|
2987
|
-
id="page-demo-centered-content-primary-nav"
|
|
2988
|
-
aria-label="Global"
|
|
2989
|
-
>
|
|
2990
|
-
<ul class="pf-c-nav__list">
|
|
2991
|
-
<li class="pf-c-nav__item">
|
|
2992
|
-
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
2993
|
-
</li>
|
|
2994
|
-
<li class="pf-c-nav__item">
|
|
2995
|
-
<a
|
|
2996
|
-
href="#"
|
|
2997
|
-
class="pf-c-nav__link pf-m-current"
|
|
2998
|
-
aria-current="page"
|
|
2999
|
-
>Policy</a>
|
|
3000
|
-
</li>
|
|
3001
|
-
<li class="pf-c-nav__item">
|
|
3002
|
-
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
3003
|
-
</li>
|
|
3004
|
-
<li class="pf-c-nav__item">
|
|
3005
|
-
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
3006
|
-
</li>
|
|
3007
|
-
<li class="pf-c-nav__item">
|
|
3008
|
-
<a href="#" class="pf-c-nav__link">Server</a>
|
|
3009
|
-
</li>
|
|
3010
|
-
</ul>
|
|
3011
|
-
</nav>
|
|
3012
|
-
</div>
|
|
3013
|
-
</div>
|
|
3014
|
-
<main
|
|
3015
|
-
class="pf-c-page__main"
|
|
3016
|
-
tabindex="-1"
|
|
3017
|
-
id="main-content-page-demo-centered-content"
|
|
3018
|
-
>
|
|
3019
|
-
<section
|
|
3020
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-align-center pf-m-fill"
|
|
3021
|
-
>
|
|
3022
|
-
<div class="pf-c-page__main-body">
|
|
3023
|
-
<div class="pf-l-bullseye">
|
|
3024
|
-
<div class="pf-c-content pf-u-text-align-center">
|
|
3025
|
-
<h1>Centered title (content centered)</h1>
|
|
3026
|
-
<p>Page section filled, width limited, centered.</p>
|
|
3027
|
-
</div>
|
|
3028
|
-
</div>
|
|
3029
|
-
</div>
|
|
3030
|
-
</section>
|
|
3031
|
-
<hr class="pf-c-divider" />
|
|
3032
|
-
<section
|
|
3033
|
-
class="pf-c-page__main-section pf-m-limit-width pf-m-align-center pf-m-light"
|
|
3034
|
-
>
|
|
3035
|
-
<div class="pf-c-page__main-body">
|
|
3036
|
-
<div class="pf-l-bullseye">
|
|
3037
|
-
<div class="pf-c-content pf-u-text-align-center">
|
|
3038
|
-
<h2>Centered page section (content centered)</h2>
|
|
3039
|
-
<p>Page section light, width limited, centered.</p>
|
|
3040
|
-
</div>
|
|
3041
|
-
</div>
|
|
3042
|
-
</div>
|
|
3043
|
-
</section>
|
|
3044
|
-
<hr class="pf-c-divider" />
|
|
3045
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
|
|
3046
|
-
<div class="pf-c-page__main-body">
|
|
3047
|
-
<div class="pf-c-card">
|
|
3048
|
-
<div class="pf-c-card__title">
|
|
3049
|
-
<h2>Card title</h2>
|
|
3050
|
-
</div>
|
|
3051
|
-
<div class="pf-c-card__body">
|
|
3052
|
-
<p>Page section width limited, centered. Full width card.</p>
|
|
3053
|
-
</div>
|
|
3054
|
-
</div>
|
|
3055
|
-
</div>
|
|
3056
|
-
</section>
|
|
3057
|
-
<hr class="pf-c-divider" />
|
|
3058
|
-
<section class="pf-c-page__main-section">
|
|
3059
|
-
<div
|
|
3060
|
-
class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-md pf-m-all-3-col-on-xl"
|
|
3061
|
-
>
|
|
3062
|
-
<div class="pf-l-grid__item pf-m-12-col">
|
|
3063
|
-
<h2 class="pf-u-text-align-center">(Default page section)</h2>
|
|
3064
|
-
</div>
|
|
3065
|
-
<div class="pf-c-card">
|
|
3066
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3067
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3068
|
-
</div>
|
|
3069
|
-
<div class="pf-c-card">
|
|
3070
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3071
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3072
|
-
</div>
|
|
3073
|
-
<div class="pf-c-card">
|
|
3074
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3075
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3076
|
-
</div>
|
|
3077
|
-
<div class="pf-c-card">
|
|
3078
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3079
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3080
|
-
</div>
|
|
3081
|
-
</div>
|
|
3082
|
-
</section>
|
|
3083
|
-
<hr class="pf-c-divider" />
|
|
3084
|
-
<section class="pf-c-page__main-section pf-m-limit-width pf-m-align-center">
|
|
3085
|
-
<div class="pf-c-page__main-body">
|
|
3086
|
-
<div
|
|
3087
|
-
class="pf-l-grid pf-m-gutter pf-m-all-6-col-on-md pf-m-all-3-col-on-xl"
|
|
3088
|
-
>
|
|
3089
|
-
<div class="pf-l-grid__item pf-m-12-col">
|
|
3090
|
-
<h2
|
|
3091
|
-
class="pf-u-text-align-center"
|
|
3092
|
-
>(Page section width limited, centered.)</h2>
|
|
3093
|
-
</div>
|
|
3094
|
-
<div class="pf-c-card">
|
|
3095
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3096
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3097
|
-
</div>
|
|
3098
|
-
<div class="pf-c-card">
|
|
3099
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3100
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3101
|
-
</div>
|
|
3102
|
-
<div class="pf-c-card">
|
|
3103
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3104
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3105
|
-
</div>
|
|
3106
|
-
<div class="pf-c-card">
|
|
3107
|
-
<div class="pf-c-card__header">Card header</div>
|
|
3108
|
-
<div class="pf-c-card__body">Card body</div>
|
|
3109
|
-
</div>
|
|
3110
|
-
</div>
|
|
3111
|
-
</div>
|
|
3112
|
-
</section>
|
|
3113
|
-
</main>
|
|
3114
|
-
</div>
|
|
3115
|
-
|
|
79
|
+
```hbs isFullscreen
|
|
80
|
+
{{> page-template
|
|
81
|
+
page-template--id="page-demo-centered-contentt"
|
|
82
|
+
}}
|
|
83
|
+
|
|
84
|
+
{{#*inline "page-template-main-content"}}
|
|
85
|
+
{{#> page-main-section page-main-section--IsLimitWidth="true" page-main-section--modifier="pf-m-align-center pf-m-fill"}}
|
|
86
|
+
{{#> bullseye}}
|
|
87
|
+
{{#> content content--modifier="pf-u-text-align-center"}}
|
|
88
|
+
<h1>Centered title (content centered)</h1>
|
|
89
|
+
<p>Page section filled, width limited, centered.</p>
|
|
90
|
+
{{/content}}
|
|
91
|
+
{{/bullseye}}
|
|
92
|
+
{{/page-main-section}}
|
|
93
|
+
{{> divider}}
|
|
94
|
+
{{#> page-main-section page-main-section--IsLimitWidth="true" page-main-section--modifier="pf-m-align-center pf-m-light"}}
|
|
95
|
+
{{#> bullseye}}
|
|
96
|
+
{{#> content content--modifier="pf-u-text-align-center"}}
|
|
97
|
+
<h2>Centered page section (content centered)</h2>
|
|
98
|
+
<p>Page section light, width limited, centered.</p>
|
|
99
|
+
{{/content}}
|
|
100
|
+
{{/bullseye}}
|
|
101
|
+
{{/page-main-section}}
|
|
102
|
+
{{> divider}}
|
|
103
|
+
{{#> page-main-section page-main-section--IsLimitWidth="true" page-main-section--modifier="pf-m-align-center"}}
|
|
104
|
+
{{#> card}}
|
|
105
|
+
{{#> card-title}}
|
|
106
|
+
<h2>Card title</h2>
|
|
107
|
+
{{/card-title}}
|
|
108
|
+
{{#> card-body}}
|
|
109
|
+
<p>Page section width limited, centered. Full width card.</p>
|
|
110
|
+
{{/card-body}}
|
|
111
|
+
{{/card}}
|
|
112
|
+
{{/page-main-section}}
|
|
113
|
+
{{> divider}}
|
|
114
|
+
{{#> page-main-section}}
|
|
115
|
+
{{#> grid grid--modifier="pf-m-gutter pf-m-all-6-col-on-md pf-m-all-3-col-on-xl"}}
|
|
116
|
+
{{#> grid-item grid-item--modifier="pf-m-12-col"}}
|
|
117
|
+
<h2 class="pf-u-text-align-center">(Default page section)</h2>
|
|
118
|
+
{{/grid-item}}
|
|
119
|
+
{{#> card}}
|
|
120
|
+
{{#> card-header}}
|
|
121
|
+
Card header
|
|
122
|
+
{{/card-header}}
|
|
123
|
+
{{#> card-body}}
|
|
124
|
+
Card body
|
|
125
|
+
{{/card-body}}
|
|
126
|
+
{{/card}}
|
|
127
|
+
{{#> card}}
|
|
128
|
+
{{#> card-header}}
|
|
129
|
+
Card header
|
|
130
|
+
{{/card-header}}
|
|
131
|
+
{{#> card-body}}
|
|
132
|
+
Card body
|
|
133
|
+
{{/card-body}}
|
|
134
|
+
{{/card}}
|
|
135
|
+
{{#> card}}
|
|
136
|
+
{{#> card-header}}
|
|
137
|
+
Card header
|
|
138
|
+
{{/card-header}}
|
|
139
|
+
{{#> card-body}}
|
|
140
|
+
Card body
|
|
141
|
+
{{/card-body}}
|
|
142
|
+
{{/card}}
|
|
143
|
+
{{#> card}}
|
|
144
|
+
{{#> card-header}}
|
|
145
|
+
Card header
|
|
146
|
+
{{/card-header}}
|
|
147
|
+
{{#> card-body}}
|
|
148
|
+
Card body
|
|
149
|
+
{{/card-body}}
|
|
150
|
+
{{/card}}
|
|
151
|
+
{{/grid}}
|
|
152
|
+
{{/page-main-section}}
|
|
153
|
+
{{> divider}}
|
|
154
|
+
{{#> page-main-section page-main-section--IsLimitWidth="true" page-main-section--modifier="pf-m-align-center"}}
|
|
155
|
+
{{#> grid grid--modifier="pf-m-gutter pf-m-all-6-col-on-md pf-m-all-3-col-on-xl"}}
|
|
156
|
+
{{#> grid-item grid-item--modifier="pf-m-12-col"}}
|
|
157
|
+
<h2 class="pf-u-text-align-center">(Page section width limited, centered.)</h2>
|
|
158
|
+
{{/grid-item}}
|
|
159
|
+
{{#> card}}
|
|
160
|
+
{{#> card-header}}
|
|
161
|
+
Card header
|
|
162
|
+
{{/card-header}}
|
|
163
|
+
{{#> card-body}}
|
|
164
|
+
Card body
|
|
165
|
+
{{/card-body}}
|
|
166
|
+
{{/card}}
|
|
167
|
+
{{#> card}}
|
|
168
|
+
{{#> card-header}}
|
|
169
|
+
Card header
|
|
170
|
+
{{/card-header}}
|
|
171
|
+
{{#> card-body}}
|
|
172
|
+
Card body
|
|
173
|
+
{{/card-body}}
|
|
174
|
+
{{/card}}
|
|
175
|
+
{{#> card}}
|
|
176
|
+
{{#> card-header}}
|
|
177
|
+
Card header
|
|
178
|
+
{{/card-header}}
|
|
179
|
+
{{#> card-body}}
|
|
180
|
+
Card body
|
|
181
|
+
{{/card-body}}
|
|
182
|
+
{{/card}}
|
|
183
|
+
{{#> card}}
|
|
184
|
+
{{#> card-header}}
|
|
185
|
+
Card header
|
|
186
|
+
{{/card-header}}
|
|
187
|
+
{{#> card-body}}
|
|
188
|
+
Card body
|
|
189
|
+
{{/card-body}}
|
|
190
|
+
{{/card}}
|
|
191
|
+
{{/grid}}
|
|
192
|
+
{{/page-main-section}}
|
|
193
|
+
{{/inline}}
|
|
3116
194
|
```
|
|
3117
195
|
|
|
3118
196
|
## Documentation
|