@patternfly/patternfly 4.190.0 → 4.192.1
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/RELEASE-NOTES.md +26 -0
- package/components/Divider/divider.css +159 -13
- package/components/Divider/divider.scss +74 -28
- package/components/Page/page.css +4 -0
- package/components/Page/page.scss +5 -0
- package/components/TextInputGroup/text-input-group.css +5 -0
- package/components/TextInputGroup/text-input-group.scss +6 -0
- package/components/Wizard/wizard.css +1 -1
- package/components/Wizard/wizard.scss +1 -1
- package/docs/components/Divider/examples/Divider.css +11 -5
- package/docs/components/Divider/examples/Divider.md +14 -0
- package/docs/components/InputGroup/examples/InputGroup.md +5 -5
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.css +23 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +617 -1
- package/docs/components/Wizard/examples/Wizard.md +273 -0
- package/docs/demos/Dashboard/examples/Dashboard.md +2 -2
- package/docs/demos/Wizard/examples/Wizard.md +2626 -240
- package/package.json +1 -1
- package/patternfly-no-reset.css +169 -14
- package/patternfly.css +169 -14
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -2326,15 +2326,15 @@ wrapperTag: div
|
|
|
2326
2326
|
|
|
2327
2327
|
```
|
|
2328
2328
|
|
|
2329
|
-
###
|
|
2329
|
+
### With drawer
|
|
2330
2330
|
|
|
2331
2331
|
```html isFullscreen
|
|
2332
|
-
<div class="pf-c-page" id="wizard-
|
|
2332
|
+
<div class="pf-c-page" id="wizard-with-drawer-example">
|
|
2333
2333
|
<a
|
|
2334
2334
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
2335
|
-
href="#main-content-wizard-
|
|
2335
|
+
href="#main-content-wizard-with-drawer-example"
|
|
2336
2336
|
>Skip to content</a>
|
|
2337
|
-
<header class="pf-c-masthead" id="wizard-
|
|
2337
|
+
<header class="pf-c-masthead" id="wizard-with-drawer-example-masthead">
|
|
2338
2338
|
<span class="pf-c-masthead__toggle">
|
|
2339
2339
|
<button
|
|
2340
2340
|
class="pf-c-button pf-m-plain"
|
|
@@ -2365,7 +2365,7 @@ wrapperTag: div
|
|
|
2365
2365
|
<div class="pf-c-masthead__content">
|
|
2366
2366
|
<div
|
|
2367
2367
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
2368
|
-
id="wizard-
|
|
2368
|
+
id="wizard-with-drawer-example-masthead-toolbar"
|
|
2369
2369
|
>
|
|
2370
2370
|
<div class="pf-c-toolbar__content">
|
|
2371
2371
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -2390,12 +2390,12 @@ wrapperTag: div
|
|
|
2390
2390
|
<nav
|
|
2391
2391
|
class="pf-c-app-launcher"
|
|
2392
2392
|
aria-label="Application launcher"
|
|
2393
|
-
id="wizard-
|
|
2393
|
+
id="wizard-with-drawer-example-masthead-icon-group--app-launcher"
|
|
2394
2394
|
>
|
|
2395
2395
|
<button
|
|
2396
2396
|
class="pf-c-app-launcher__toggle"
|
|
2397
2397
|
type="button"
|
|
2398
|
-
id="wizard-
|
|
2398
|
+
id="wizard-with-drawer-example-masthead-icon-group--app-launcher-button"
|
|
2399
2399
|
aria-expanded="false"
|
|
2400
2400
|
aria-label="Application launcher"
|
|
2401
2401
|
>
|
|
@@ -2535,7 +2535,7 @@ wrapperTag: div
|
|
|
2535
2535
|
<div class="pf-c-dropdown">
|
|
2536
2536
|
<button
|
|
2537
2537
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2538
|
-
id="wizard-
|
|
2538
|
+
id="wizard-with-drawer-example-masthead-settings-button"
|
|
2539
2539
|
aria-expanded="false"
|
|
2540
2540
|
type="button"
|
|
2541
2541
|
aria-label="Settings"
|
|
@@ -2544,7 +2544,7 @@ wrapperTag: div
|
|
|
2544
2544
|
</button>
|
|
2545
2545
|
<ul
|
|
2546
2546
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2547
|
-
aria-labelledby="wizard-
|
|
2547
|
+
aria-labelledby="wizard-with-drawer-example-masthead-settings-button"
|
|
2548
2548
|
hidden
|
|
2549
2549
|
>
|
|
2550
2550
|
<li>
|
|
@@ -2566,7 +2566,7 @@ wrapperTag: div
|
|
|
2566
2566
|
<div class="pf-c-dropdown">
|
|
2567
2567
|
<button
|
|
2568
2568
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
2569
|
-
id="wizard-
|
|
2569
|
+
id="wizard-with-drawer-example-masthead-help-button"
|
|
2570
2570
|
aria-expanded="false"
|
|
2571
2571
|
type="button"
|
|
2572
2572
|
aria-label="Help"
|
|
@@ -2575,7 +2575,7 @@ wrapperTag: div
|
|
|
2575
2575
|
</button>
|
|
2576
2576
|
<ul
|
|
2577
2577
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
2578
|
-
aria-labelledby="wizard-
|
|
2578
|
+
aria-labelledby="wizard-with-drawer-example-masthead-help-button"
|
|
2579
2579
|
hidden
|
|
2580
2580
|
>
|
|
2581
2581
|
<li>
|
|
@@ -3075,7 +3075,7 @@ wrapperTag: div
|
|
|
3075
3075
|
>
|
|
3076
3076
|
<button
|
|
3077
3077
|
class="pf-c-dropdown__toggle"
|
|
3078
|
-
id="wizard-
|
|
3078
|
+
id="wizard-with-drawer-example-masthead-profile-button"
|
|
3079
3079
|
aria-expanded="false"
|
|
3080
3080
|
type="button"
|
|
3081
3081
|
>
|
|
@@ -3131,7 +3131,7 @@ wrapperTag: div
|
|
|
3131
3131
|
<div class="pf-c-page__sidebar-body">
|
|
3132
3132
|
<nav
|
|
3133
3133
|
class="pf-c-nav"
|
|
3134
|
-
id="wizard-
|
|
3134
|
+
id="wizard-with-drawer-example-primary-nav"
|
|
3135
3135
|
aria-label="Global"
|
|
3136
3136
|
>
|
|
3137
3137
|
<ul class="pf-c-nav__list">
|
|
@@ -3161,7 +3161,7 @@ wrapperTag: div
|
|
|
3161
3161
|
<main
|
|
3162
3162
|
class="pf-c-page__main"
|
|
3163
3163
|
tabindex="-1"
|
|
3164
|
-
id="main-content-wizard-
|
|
3164
|
+
id="main-content-wizard-with-drawer-example"
|
|
3165
3165
|
>
|
|
3166
3166
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
3167
3167
|
<div class="pf-c-page__main-body">
|
|
@@ -3207,240 +3207,338 @@ wrapperTag: div
|
|
|
3207
3207
|
</div>
|
|
3208
3208
|
</div>
|
|
3209
3209
|
</section>
|
|
3210
|
-
|
|
3211
|
-
<section class="pf-c-page__main-wizard pf-m-limit-width">
|
|
3210
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
3212
3211
|
<div class="pf-c-page__main-body">
|
|
3213
|
-
<div class="pf-
|
|
3212
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
3213
|
+
<div class="pf-c-card">
|
|
3214
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3215
|
+
</div>
|
|
3216
|
+
<div class="pf-c-card">
|
|
3217
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3218
|
+
</div>
|
|
3219
|
+
<div class="pf-c-card">
|
|
3220
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3221
|
+
</div>
|
|
3222
|
+
<div class="pf-c-card">
|
|
3223
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3224
|
+
</div>
|
|
3225
|
+
<div class="pf-c-card">
|
|
3226
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3227
|
+
</div>
|
|
3228
|
+
<div class="pf-c-card">
|
|
3229
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3230
|
+
</div>
|
|
3231
|
+
<div class="pf-c-card">
|
|
3232
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3233
|
+
</div>
|
|
3234
|
+
<div class="pf-c-card">
|
|
3235
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3236
|
+
</div>
|
|
3237
|
+
<div class="pf-c-card">
|
|
3238
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3239
|
+
</div>
|
|
3240
|
+
<div class="pf-c-card">
|
|
3241
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
3242
|
+
</div>
|
|
3243
|
+
</div>
|
|
3244
|
+
</div>
|
|
3245
|
+
</section>
|
|
3246
|
+
</main>
|
|
3247
|
+
</div>
|
|
3248
|
+
<div class="pf-c-backdrop">
|
|
3249
|
+
<div class="pf-l-bullseye">
|
|
3250
|
+
<div
|
|
3251
|
+
class="pf-c-modal-box pf-m-lg"
|
|
3252
|
+
aria-modal="true"
|
|
3253
|
+
aria-label="Basic wizard"
|
|
3254
|
+
>
|
|
3255
|
+
<div class="pf-c-wizard">
|
|
3256
|
+
<div class="pf-c-wizard__header">
|
|
3214
3257
|
<button
|
|
3215
|
-
|
|
3216
|
-
|
|
3217
|
-
aria-
|
|
3258
|
+
class="pf-c-button pf-m-plain pf-c-wizard__close"
|
|
3259
|
+
type="button"
|
|
3260
|
+
aria-label="Close"
|
|
3218
3261
|
>
|
|
3219
|
-
<
|
|
3220
|
-
<span class="pf-c-wizard__toggle-list-item">
|
|
3221
|
-
<span class="pf-c-wizard__toggle-num">2</span>
|
|
3222
|
-
Configuration
|
|
3223
|
-
<i
|
|
3224
|
-
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
3225
|
-
aria-hidden="true"
|
|
3226
|
-
></i>
|
|
3227
|
-
</span>
|
|
3228
|
-
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
3229
|
-
</span>
|
|
3230
|
-
<span class="pf-c-wizard__toggle-icon">
|
|
3231
|
-
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3232
|
-
</span>
|
|
3262
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3233
3263
|
</button>
|
|
3234
|
-
<
|
|
3235
|
-
|
|
3236
|
-
|
|
3237
|
-
|
|
3238
|
-
|
|
3239
|
-
|
|
3240
|
-
|
|
3241
|
-
|
|
3242
|
-
|
|
3243
|
-
|
|
3244
|
-
|
|
3245
|
-
|
|
3246
|
-
|
|
3247
|
-
|
|
3248
|
-
|
|
3249
|
-
|
|
3250
|
-
|
|
3251
|
-
|
|
3252
|
-
|
|
3253
|
-
|
|
3254
|
-
|
|
3255
|
-
|
|
3256
|
-
|
|
3257
|
-
|
|
3258
|
-
|
|
3259
|
-
|
|
3260
|
-
|
|
3261
|
-
|
|
3262
|
-
|
|
3263
|
-
|
|
3264
|
-
|
|
3265
|
-
|
|
3266
|
-
|
|
3267
|
-
|
|
3268
|
-
|
|
3269
|
-
|
|
3270
|
-
|
|
3271
|
-
|
|
3272
|
-
|
|
3273
|
-
|
|
3274
|
-
|
|
3275
|
-
|
|
3276
|
-
|
|
3277
|
-
|
|
3278
|
-
|
|
3279
|
-
|
|
3280
|
-
|
|
3281
|
-
|
|
3282
|
-
|
|
3283
|
-
|
|
3284
|
-
|
|
3285
|
-
|
|
3286
|
-
|
|
3287
|
-
|
|
3288
|
-
|
|
3289
|
-
|
|
3290
|
-
|
|
3291
|
-
|
|
3292
|
-
|
|
3293
|
-
|
|
3294
|
-
|
|
3295
|
-
|
|
3296
|
-
|
|
3297
|
-
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3264
|
+
<h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
|
|
3265
|
+
|
|
3266
|
+
<div
|
|
3267
|
+
class="pf-c-wizard__description"
|
|
3268
|
+
>Here is where the description goes</div>
|
|
3269
|
+
</div>
|
|
3270
|
+
<button
|
|
3271
|
+
aria-label="Wizard Header Toggle"
|
|
3272
|
+
class="pf-c-wizard__toggle"
|
|
3273
|
+
aria-expanded="false"
|
|
3274
|
+
>
|
|
3275
|
+
<span class="pf-c-wizard__toggle-list">
|
|
3276
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
3277
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
3278
|
+
Configuration
|
|
3279
|
+
<i
|
|
3280
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
3281
|
+
aria-hidden="true"
|
|
3282
|
+
></i>
|
|
3283
|
+
</span>
|
|
3284
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
3285
|
+
</span>
|
|
3286
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
3287
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3288
|
+
</span>
|
|
3289
|
+
</button>
|
|
3290
|
+
<div class="pf-c-drawer pf-m-expanded pf-m-inline">
|
|
3291
|
+
<div class="pf-c-drawer__main">
|
|
3292
|
+
<div class="pf-c-drawer__content">
|
|
3293
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
3294
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
3295
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
3296
|
+
<div class="pf-c-wizard__main-body">
|
|
3297
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
3298
|
+
<ol class="pf-c-wizard__nav-list">
|
|
3299
|
+
<li class="pf-c-wizard__nav-item">
|
|
3300
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
3301
|
+
</li>
|
|
3302
|
+
<li class="pf-c-wizard__nav-item">
|
|
3303
|
+
<button
|
|
3304
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
3305
|
+
>Configuration</button>
|
|
3306
|
+
<ol class="pf-c-wizard__nav-list">
|
|
3307
|
+
<li class="pf-c-wizard__nav-item">
|
|
3308
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
3309
|
+
</li>
|
|
3310
|
+
<li class="pf-c-wizard__nav-item">
|
|
3311
|
+
<button
|
|
3312
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
3313
|
+
aria-current="page"
|
|
3314
|
+
>Substep B</button>
|
|
3315
|
+
</li>
|
|
3316
|
+
<li class="pf-c-wizard__nav-item">
|
|
3317
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
3318
|
+
</li>
|
|
3319
|
+
</ol>
|
|
3320
|
+
</li>
|
|
3321
|
+
<li class="pf-c-wizard__nav-item">
|
|
3322
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
3323
|
+
</li>
|
|
3324
|
+
<li class="pf-c-wizard__nav-item">
|
|
3325
|
+
<button
|
|
3326
|
+
class="pf-c-wizard__nav-link"
|
|
3327
|
+
disabled
|
|
3328
|
+
>Review</button>
|
|
3329
|
+
</li>
|
|
3330
|
+
</ol>
|
|
3331
|
+
</nav>
|
|
3332
|
+
<form novalidate class="pf-c-form">
|
|
3333
|
+
<div class="pf-c-form__group">
|
|
3334
|
+
<div class="pf-c-form__group-label">
|
|
3335
|
+
<label class="pf-c-form__label" for="-form-field1">
|
|
3336
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
3337
|
+
<span
|
|
3338
|
+
class="pf-c-form__label-required"
|
|
3339
|
+
aria-hidden="true"
|
|
3340
|
+
>*</span>
|
|
3341
|
+
</label>
|
|
3342
|
+
</div>
|
|
3343
|
+
<div class="pf-c-form__group-control">
|
|
3344
|
+
<input
|
|
3345
|
+
class="pf-c-form-control"
|
|
3346
|
+
required
|
|
3347
|
+
type="text"
|
|
3348
|
+
id="-form-field1"
|
|
3349
|
+
name="-form-field1"
|
|
3350
|
+
/>
|
|
3351
|
+
</div>
|
|
3352
|
+
</div>
|
|
3353
|
+
<div class="pf-c-form__group">
|
|
3354
|
+
<div class="pf-c-form__group-label">
|
|
3355
|
+
<label class="pf-c-form__label" for="-form-field2">
|
|
3356
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
3357
|
+
<span
|
|
3358
|
+
class="pf-c-form__label-required"
|
|
3359
|
+
aria-hidden="true"
|
|
3360
|
+
>*</span>
|
|
3361
|
+
</label>
|
|
3362
|
+
</div>
|
|
3363
|
+
<div class="pf-c-form__group-control">
|
|
3364
|
+
<input
|
|
3365
|
+
class="pf-c-form-control"
|
|
3366
|
+
required
|
|
3367
|
+
type="text"
|
|
3368
|
+
id="-form-field2"
|
|
3369
|
+
name="-form-field2"
|
|
3370
|
+
/>
|
|
3371
|
+
</div>
|
|
3372
|
+
</div>
|
|
3373
|
+
<div class="pf-c-form__group">
|
|
3374
|
+
<div class="pf-c-form__group-label">
|
|
3375
|
+
<label class="pf-c-form__label" for="-form-field3">
|
|
3376
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
3377
|
+
<span
|
|
3378
|
+
class="pf-c-form__label-required"
|
|
3379
|
+
aria-hidden="true"
|
|
3380
|
+
>*</span>
|
|
3381
|
+
</label>
|
|
3382
|
+
</div>
|
|
3383
|
+
<div class="pf-c-form__group-control">
|
|
3384
|
+
<input
|
|
3385
|
+
class="pf-c-form-control"
|
|
3386
|
+
required
|
|
3387
|
+
type="text"
|
|
3388
|
+
id="-form-field3"
|
|
3389
|
+
name="-form-field3"
|
|
3390
|
+
/>
|
|
3391
|
+
</div>
|
|
3392
|
+
</div>
|
|
3393
|
+
<div class="pf-c-form__group">
|
|
3394
|
+
<div class="pf-c-form__group-label">
|
|
3395
|
+
<label class="pf-c-form__label" for="-form-field4">
|
|
3396
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
3397
|
+
<span
|
|
3398
|
+
class="pf-c-form__label-required"
|
|
3399
|
+
aria-hidden="true"
|
|
3400
|
+
>*</span>
|
|
3401
|
+
</label>
|
|
3402
|
+
</div>
|
|
3403
|
+
<div class="pf-c-form__group-control">
|
|
3404
|
+
<input
|
|
3405
|
+
class="pf-c-form-control"
|
|
3406
|
+
required
|
|
3407
|
+
type="text"
|
|
3408
|
+
id="-form-field4"
|
|
3409
|
+
name="-form-field4"
|
|
3410
|
+
/>
|
|
3411
|
+
</div>
|
|
3412
|
+
</div>
|
|
3413
|
+
<div class="pf-c-form__group">
|
|
3414
|
+
<div class="pf-c-form__group-label">
|
|
3415
|
+
<label class="pf-c-form__label" for="-form-field5">
|
|
3416
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
3417
|
+
<span
|
|
3418
|
+
class="pf-c-form__label-required"
|
|
3419
|
+
aria-hidden="true"
|
|
3420
|
+
>*</span>
|
|
3421
|
+
</label>
|
|
3422
|
+
</div>
|
|
3423
|
+
<div class="pf-c-form__group-control">
|
|
3424
|
+
<input
|
|
3425
|
+
class="pf-c-form-control"
|
|
3426
|
+
required
|
|
3427
|
+
type="text"
|
|
3428
|
+
id="-form-field5"
|
|
3429
|
+
name="-form-field5"
|
|
3430
|
+
/>
|
|
3431
|
+
</div>
|
|
3432
|
+
</div>
|
|
3433
|
+
<div class="pf-c-form__group">
|
|
3434
|
+
<div class="pf-c-form__group-label">
|
|
3435
|
+
<label class="pf-c-form__label" for="-form-field6">
|
|
3436
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
3437
|
+
<span
|
|
3438
|
+
class="pf-c-form__label-required"
|
|
3439
|
+
aria-hidden="true"
|
|
3440
|
+
>*</span>
|
|
3441
|
+
</label>
|
|
3442
|
+
</div>
|
|
3443
|
+
<div class="pf-c-form__group-control">
|
|
3444
|
+
<input
|
|
3445
|
+
class="pf-c-form-control"
|
|
3446
|
+
required
|
|
3447
|
+
type="text"
|
|
3448
|
+
id="-form-field6"
|
|
3449
|
+
name="-form-field6"
|
|
3450
|
+
/>
|
|
3451
|
+
</div>
|
|
3452
|
+
</div>
|
|
3453
|
+
<div class="pf-c-form__group">
|
|
3454
|
+
<div class="pf-c-form__group-label">
|
|
3455
|
+
<label class="pf-c-form__label" for="-form-field7">
|
|
3456
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
3457
|
+
<span
|
|
3458
|
+
class="pf-c-form__label-required"
|
|
3459
|
+
aria-hidden="true"
|
|
3460
|
+
>*</span>
|
|
3461
|
+
</label>
|
|
3462
|
+
</div>
|
|
3463
|
+
<div class="pf-c-form__group-control">
|
|
3464
|
+
<input
|
|
3465
|
+
class="pf-c-form-control"
|
|
3466
|
+
required
|
|
3467
|
+
type="text"
|
|
3468
|
+
id="-form-field7"
|
|
3469
|
+
name="-form-field7"
|
|
3470
|
+
/>
|
|
3471
|
+
</div>
|
|
3472
|
+
</div>
|
|
3473
|
+
</form>
|
|
3314
3474
|
</div>
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
3325
|
-
|
|
3326
|
-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
3332
|
-
|
|
3333
|
-
|
|
3475
|
+
</main>
|
|
3476
|
+
</div>
|
|
3477
|
+
<footer class="pf-c-wizard__footer">
|
|
3478
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
3479
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
3480
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
3481
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
3482
|
+
</div>
|
|
3483
|
+
</footer>
|
|
3484
|
+
</div>
|
|
3485
|
+
</div>
|
|
3486
|
+
<div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
|
|
3487
|
+
<div class="pf-c-drawer__body">
|
|
3488
|
+
<div class="pf-c-drawer__head">
|
|
3489
|
+
<h2 class="pf-c-title pf-m-xl">Register with Red Hat connector</h2>
|
|
3490
|
+
<div class="pf-c-drawer__actions">
|
|
3491
|
+
<div class="pf-c-drawer__close">
|
|
3492
|
+
<button
|
|
3493
|
+
class="pf-c-button pf-m-plain"
|
|
3494
|
+
type="button"
|
|
3495
|
+
aria-label="Close drawer panel"
|
|
3496
|
+
>
|
|
3497
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3498
|
+
</button>
|
|
3334
3499
|
</div>
|
|
3335
|
-
|
|
3336
|
-
<div class="pf-c-form__group-label">
|
|
3337
|
-
<label class="pf-c-form__label" for="-form-field4">
|
|
3338
|
-
<span class="pf-c-form__label-text">Field 4</span>
|
|
3339
|
-
<span
|
|
3340
|
-
class="pf-c-form__label-required"
|
|
3341
|
-
aria-hidden="true"
|
|
3342
|
-
>*</span>
|
|
3343
|
-
</label>
|
|
3344
|
-
</div>
|
|
3345
|
-
<div class="pf-c-form__group-control">
|
|
3346
|
-
<input
|
|
3347
|
-
class="pf-c-form-control"
|
|
3348
|
-
required
|
|
3349
|
-
type="text"
|
|
3350
|
-
id="-form-field4"
|
|
3351
|
-
name="-form-field4"
|
|
3352
|
-
/>
|
|
3353
|
-
</div>
|
|
3354
|
-
</div>
|
|
3355
|
-
<div class="pf-c-form__group">
|
|
3356
|
-
<div class="pf-c-form__group-label">
|
|
3357
|
-
<label class="pf-c-form__label" for="-form-field5">
|
|
3358
|
-
<span class="pf-c-form__label-text">Field 5</span>
|
|
3359
|
-
<span
|
|
3360
|
-
class="pf-c-form__label-required"
|
|
3361
|
-
aria-hidden="true"
|
|
3362
|
-
>*</span>
|
|
3363
|
-
</label>
|
|
3364
|
-
</div>
|
|
3365
|
-
<div class="pf-c-form__group-control">
|
|
3366
|
-
<input
|
|
3367
|
-
class="pf-c-form-control"
|
|
3368
|
-
required
|
|
3369
|
-
type="text"
|
|
3370
|
-
id="-form-field5"
|
|
3371
|
-
name="-form-field5"
|
|
3372
|
-
/>
|
|
3373
|
-
</div>
|
|
3374
|
-
</div>
|
|
3375
|
-
<div class="pf-c-form__group">
|
|
3376
|
-
<div class="pf-c-form__group-label">
|
|
3377
|
-
<label class="pf-c-form__label" for="-form-field6">
|
|
3378
|
-
<span class="pf-c-form__label-text">Field 6</span>
|
|
3379
|
-
<span
|
|
3380
|
-
class="pf-c-form__label-required"
|
|
3381
|
-
aria-hidden="true"
|
|
3382
|
-
>*</span>
|
|
3383
|
-
</label>
|
|
3384
|
-
</div>
|
|
3385
|
-
<div class="pf-c-form__group-control">
|
|
3386
|
-
<input
|
|
3387
|
-
class="pf-c-form-control"
|
|
3388
|
-
required
|
|
3389
|
-
type="text"
|
|
3390
|
-
id="-form-field6"
|
|
3391
|
-
name="-form-field6"
|
|
3392
|
-
/>
|
|
3393
|
-
</div>
|
|
3394
|
-
</div>
|
|
3395
|
-
<div class="pf-c-form__group">
|
|
3396
|
-
<div class="pf-c-form__group-label">
|
|
3397
|
-
<label class="pf-c-form__label" for="-form-field7">
|
|
3398
|
-
<span class="pf-c-form__label-text">Field 7</span>
|
|
3399
|
-
<span
|
|
3400
|
-
class="pf-c-form__label-required"
|
|
3401
|
-
aria-hidden="true"
|
|
3402
|
-
>*</span>
|
|
3403
|
-
</label>
|
|
3404
|
-
</div>
|
|
3405
|
-
<div class="pf-c-form__group-control">
|
|
3406
|
-
<input
|
|
3407
|
-
class="pf-c-form-control"
|
|
3408
|
-
required
|
|
3409
|
-
type="text"
|
|
3410
|
-
id="-form-field7"
|
|
3411
|
-
name="-form-field7"
|
|
3412
|
-
/>
|
|
3413
|
-
</div>
|
|
3414
|
-
</div>
|
|
3415
|
-
</form>
|
|
3500
|
+
</div>
|
|
3416
3501
|
</div>
|
|
3417
3502
|
</div>
|
|
3418
|
-
|
|
3419
|
-
|
|
3420
|
-
|
|
3421
|
-
|
|
3422
|
-
|
|
3423
|
-
|
|
3503
|
+
<div class="pf-c-drawer__body">
|
|
3504
|
+
<div class="pf-c-content">
|
|
3505
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
|
|
3506
|
+
|
|
3507
|
+
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
|
|
3508
|
+
|
|
3509
|
+
<p>
|
|
3510
|
+
Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
|
|
3511
|
+
<a
|
|
3512
|
+
href="#"
|
|
3513
|
+
>Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
|
|
3514
|
+
</p>
|
|
3515
|
+
<a href="#">
|
|
3516
|
+
<span class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
3517
|
+
<span>Learn about Red Hat connector</span>
|
|
3518
|
+
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
3519
|
+
</span>
|
|
3520
|
+
</a>
|
|
3521
|
+
</div>
|
|
3424
3522
|
</div>
|
|
3425
|
-
</
|
|
3523
|
+
</div>
|
|
3426
3524
|
</div>
|
|
3427
3525
|
</div>
|
|
3428
3526
|
</div>
|
|
3429
|
-
</
|
|
3430
|
-
</
|
|
3527
|
+
</div>
|
|
3528
|
+
</div>
|
|
3431
3529
|
</div>
|
|
3432
3530
|
|
|
3433
3531
|
```
|
|
3434
3532
|
|
|
3435
|
-
### In page
|
|
3533
|
+
### In page
|
|
3436
3534
|
|
|
3437
3535
|
```html isFullscreen
|
|
3438
|
-
<div class="pf-c-page" id="in-page-
|
|
3536
|
+
<div class="pf-c-page" id="wizard-in-page-example">
|
|
3439
3537
|
<a
|
|
3440
3538
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
3441
|
-
href="#main-content-in-page-
|
|
3539
|
+
href="#main-content-wizard-in-page-example"
|
|
3442
3540
|
>Skip to content</a>
|
|
3443
|
-
<header class="pf-c-masthead" id="in-page-
|
|
3541
|
+
<header class="pf-c-masthead" id="wizard-in-page-example-masthead">
|
|
3444
3542
|
<span class="pf-c-masthead__toggle">
|
|
3445
3543
|
<button
|
|
3446
3544
|
class="pf-c-button pf-m-plain"
|
|
@@ -3471,7 +3569,7 @@ wrapperTag: div
|
|
|
3471
3569
|
<div class="pf-c-masthead__content">
|
|
3472
3570
|
<div
|
|
3473
3571
|
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3474
|
-
id="in-page-
|
|
3572
|
+
id="wizard-in-page-example-masthead-toolbar"
|
|
3475
3573
|
>
|
|
3476
3574
|
<div class="pf-c-toolbar__content">
|
|
3477
3575
|
<div class="pf-c-toolbar__content-section">
|
|
@@ -3496,12 +3594,12 @@ wrapperTag: div
|
|
|
3496
3594
|
<nav
|
|
3497
3595
|
class="pf-c-app-launcher"
|
|
3498
3596
|
aria-label="Application launcher"
|
|
3499
|
-
id="in-page-
|
|
3597
|
+
id="wizard-in-page-example-masthead-icon-group--app-launcher"
|
|
3500
3598
|
>
|
|
3501
3599
|
<button
|
|
3502
3600
|
class="pf-c-app-launcher__toggle"
|
|
3503
3601
|
type="button"
|
|
3504
|
-
id="in-page-
|
|
3602
|
+
id="wizard-in-page-example-masthead-icon-group--app-launcher-button"
|
|
3505
3603
|
aria-expanded="false"
|
|
3506
3604
|
aria-label="Application launcher"
|
|
3507
3605
|
>
|
|
@@ -3641,7 +3739,7 @@ wrapperTag: div
|
|
|
3641
3739
|
<div class="pf-c-dropdown">
|
|
3642
3740
|
<button
|
|
3643
3741
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3644
|
-
id="in-page-
|
|
3742
|
+
id="wizard-in-page-example-masthead-settings-button"
|
|
3645
3743
|
aria-expanded="false"
|
|
3646
3744
|
type="button"
|
|
3647
3745
|
aria-label="Settings"
|
|
@@ -3650,7 +3748,7 @@ wrapperTag: div
|
|
|
3650
3748
|
</button>
|
|
3651
3749
|
<ul
|
|
3652
3750
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3653
|
-
aria-labelledby="in-page-
|
|
3751
|
+
aria-labelledby="wizard-in-page-example-masthead-settings-button"
|
|
3654
3752
|
hidden
|
|
3655
3753
|
>
|
|
3656
3754
|
<li>
|
|
@@ -3672,7 +3770,7 @@ wrapperTag: div
|
|
|
3672
3770
|
<div class="pf-c-dropdown">
|
|
3673
3771
|
<button
|
|
3674
3772
|
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3675
|
-
id="in-page-
|
|
3773
|
+
id="wizard-in-page-example-masthead-help-button"
|
|
3676
3774
|
aria-expanded="false"
|
|
3677
3775
|
type="button"
|
|
3678
3776
|
aria-label="Help"
|
|
@@ -3681,7 +3779,7 @@ wrapperTag: div
|
|
|
3681
3779
|
</button>
|
|
3682
3780
|
<ul
|
|
3683
3781
|
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3684
|
-
aria-labelledby="in-page-
|
|
3782
|
+
aria-labelledby="wizard-in-page-example-masthead-help-button"
|
|
3685
3783
|
hidden
|
|
3686
3784
|
>
|
|
3687
3785
|
<li>
|
|
@@ -4181,7 +4279,7 @@ wrapperTag: div
|
|
|
4181
4279
|
>
|
|
4182
4280
|
<button
|
|
4183
4281
|
class="pf-c-dropdown__toggle"
|
|
4184
|
-
id="in-page-
|
|
4282
|
+
id="wizard-in-page-example-masthead-profile-button"
|
|
4185
4283
|
aria-expanded="false"
|
|
4186
4284
|
type="button"
|
|
4187
4285
|
>
|
|
@@ -4237,7 +4335,7 @@ wrapperTag: div
|
|
|
4237
4335
|
<div class="pf-c-page__sidebar-body">
|
|
4238
4336
|
<nav
|
|
4239
4337
|
class="pf-c-nav"
|
|
4240
|
-
id="in-page-
|
|
4338
|
+
id="wizard-in-page-example-primary-nav"
|
|
4241
4339
|
aria-label="Global"
|
|
4242
4340
|
>
|
|
4243
4341
|
<ul class="pf-c-nav__list">
|
|
@@ -4267,7 +4365,7 @@ wrapperTag: div
|
|
|
4267
4365
|
<main
|
|
4268
4366
|
class="pf-c-page__main"
|
|
4269
4367
|
tabindex="-1"
|
|
4270
|
-
id="main-content-in-page-
|
|
4368
|
+
id="main-content-wizard-in-page-example"
|
|
4271
4369
|
>
|
|
4272
4370
|
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
4273
4371
|
<div class="pf-c-page__main-body">
|
|
@@ -4319,8 +4417,8 @@ wrapperTag: div
|
|
|
4319
4417
|
<div class="pf-c-wizard">
|
|
4320
4418
|
<button
|
|
4321
4419
|
aria-label="Wizard Header Toggle"
|
|
4322
|
-
class="pf-c-wizard__toggle
|
|
4323
|
-
aria-expanded="
|
|
4420
|
+
class="pf-c-wizard__toggle"
|
|
4421
|
+
aria-expanded="false"
|
|
4324
4422
|
>
|
|
4325
4423
|
<span class="pf-c-wizard__toggle-list">
|
|
4326
4424
|
<span class="pf-c-wizard__toggle-list-item">
|
|
@@ -4339,7 +4437,7 @@ wrapperTag: div
|
|
|
4339
4437
|
</button>
|
|
4340
4438
|
<div class="pf-c-wizard__outer-wrap">
|
|
4341
4439
|
<div class="pf-c-wizard__inner-wrap">
|
|
4342
|
-
<nav class="pf-c-wizard__nav
|
|
4440
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
4343
4441
|
<ol class="pf-c-wizard__nav-list">
|
|
4344
4442
|
<li class="pf-c-wizard__nav-item">
|
|
4345
4443
|
<button class="pf-c-wizard__nav-link">Information</button>
|
|
@@ -4537,3 +4635,2291 @@ wrapperTag: div
|
|
|
4537
4635
|
</div>
|
|
4538
4636
|
|
|
4539
4637
|
```
|
|
4638
|
+
|
|
4639
|
+
### In page nav expanded (mobile)
|
|
4640
|
+
|
|
4641
|
+
```html isFullscreen
|
|
4642
|
+
<div class="pf-c-page" id="in-page-nav-expanded-example">
|
|
4643
|
+
<a
|
|
4644
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
4645
|
+
href="#main-content-in-page-nav-expanded-example"
|
|
4646
|
+
>Skip to content</a>
|
|
4647
|
+
<header class="pf-c-masthead" id="in-page-nav-expanded-example-masthead">
|
|
4648
|
+
<span class="pf-c-masthead__toggle">
|
|
4649
|
+
<button
|
|
4650
|
+
class="pf-c-button pf-m-plain"
|
|
4651
|
+
type="button"
|
|
4652
|
+
aria-label="Global navigation"
|
|
4653
|
+
>
|
|
4654
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
4655
|
+
</button>
|
|
4656
|
+
</span>
|
|
4657
|
+
<div class="pf-c-masthead__main">
|
|
4658
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
4659
|
+
<picture
|
|
4660
|
+
class="pf-c-brand pf-m-picture"
|
|
4661
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
4662
|
+
>
|
|
4663
|
+
<source
|
|
4664
|
+
media="(min-width: 768px)"
|
|
4665
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
4666
|
+
/>
|
|
4667
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
4668
|
+
<img
|
|
4669
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
4670
|
+
alt="Fallback patternFly default logo"
|
|
4671
|
+
/>
|
|
4672
|
+
</picture>
|
|
4673
|
+
</a>
|
|
4674
|
+
</div>
|
|
4675
|
+
<div class="pf-c-masthead__content">
|
|
4676
|
+
<div
|
|
4677
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
4678
|
+
id="in-page-nav-expanded-example-masthead-toolbar"
|
|
4679
|
+
>
|
|
4680
|
+
<div class="pf-c-toolbar__content">
|
|
4681
|
+
<div class="pf-c-toolbar__content-section">
|
|
4682
|
+
<div
|
|
4683
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
4684
|
+
>
|
|
4685
|
+
<div class="pf-c-toolbar__item">
|
|
4686
|
+
<button
|
|
4687
|
+
class="pf-c-button pf-m-plain"
|
|
4688
|
+
type="button"
|
|
4689
|
+
aria-label="Notifications"
|
|
4690
|
+
>
|
|
4691
|
+
<span class="pf-c-notification-badge">
|
|
4692
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
4693
|
+
</span>
|
|
4694
|
+
</button>
|
|
4695
|
+
</div>
|
|
4696
|
+
<div
|
|
4697
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
4698
|
+
>
|
|
4699
|
+
<div class="pf-c-toolbar__item">
|
|
4700
|
+
<nav
|
|
4701
|
+
class="pf-c-app-launcher"
|
|
4702
|
+
aria-label="Application launcher"
|
|
4703
|
+
id="in-page-nav-expanded-example-masthead-icon-group--app-launcher"
|
|
4704
|
+
>
|
|
4705
|
+
<button
|
|
4706
|
+
class="pf-c-app-launcher__toggle"
|
|
4707
|
+
type="button"
|
|
4708
|
+
id="in-page-nav-expanded-example-masthead-icon-group--app-launcher-button"
|
|
4709
|
+
aria-expanded="false"
|
|
4710
|
+
aria-label="Application launcher"
|
|
4711
|
+
>
|
|
4712
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
4713
|
+
</button>
|
|
4714
|
+
<div
|
|
4715
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
4716
|
+
hidden
|
|
4717
|
+
>
|
|
4718
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
4719
|
+
<div class="pf-c-search-input">
|
|
4720
|
+
<div class="pf-c-search-input__bar">
|
|
4721
|
+
<span class="pf-c-search-input__text">
|
|
4722
|
+
<span class="pf-c-search-input__icon">
|
|
4723
|
+
<i
|
|
4724
|
+
class="fas fa-search fa-fw"
|
|
4725
|
+
aria-hidden="true"
|
|
4726
|
+
></i>
|
|
4727
|
+
</span>
|
|
4728
|
+
<input
|
|
4729
|
+
class="pf-c-search-input__text-input"
|
|
4730
|
+
type="text"
|
|
4731
|
+
placeholder="Filter by name"
|
|
4732
|
+
aria-label="Filter by name"
|
|
4733
|
+
/>
|
|
4734
|
+
</span>
|
|
4735
|
+
</div>
|
|
4736
|
+
</div>
|
|
4737
|
+
</div>
|
|
4738
|
+
<section class="pf-c-app-launcher__group">
|
|
4739
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
4740
|
+
<ul>
|
|
4741
|
+
<li
|
|
4742
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
4743
|
+
>
|
|
4744
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4745
|
+
Link 1
|
|
4746
|
+
<span
|
|
4747
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4748
|
+
>
|
|
4749
|
+
<i
|
|
4750
|
+
class="fas fa-external-link-alt"
|
|
4751
|
+
aria-hidden="true"
|
|
4752
|
+
></i>
|
|
4753
|
+
</span>
|
|
4754
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4755
|
+
</a>
|
|
4756
|
+
<button
|
|
4757
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4758
|
+
type="button"
|
|
4759
|
+
aria-label="Favorite"
|
|
4760
|
+
>
|
|
4761
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4762
|
+
</button>
|
|
4763
|
+
</li>
|
|
4764
|
+
<li
|
|
4765
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
4766
|
+
>
|
|
4767
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4768
|
+
Link 2
|
|
4769
|
+
<span
|
|
4770
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4771
|
+
>
|
|
4772
|
+
<i
|
|
4773
|
+
class="fas fa-external-link-alt"
|
|
4774
|
+
aria-hidden="true"
|
|
4775
|
+
></i>
|
|
4776
|
+
</span>
|
|
4777
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4778
|
+
</a>
|
|
4779
|
+
<button
|
|
4780
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4781
|
+
type="button"
|
|
4782
|
+
aria-label="Favorite"
|
|
4783
|
+
>
|
|
4784
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4785
|
+
</button>
|
|
4786
|
+
</li>
|
|
4787
|
+
</ul>
|
|
4788
|
+
</section>
|
|
4789
|
+
<hr class="pf-c-divider" />
|
|
4790
|
+
<section class="pf-c-app-launcher__group">
|
|
4791
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
4792
|
+
<ul>
|
|
4793
|
+
<li
|
|
4794
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
4795
|
+
>
|
|
4796
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4797
|
+
Link 1
|
|
4798
|
+
<span
|
|
4799
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4800
|
+
>
|
|
4801
|
+
<i
|
|
4802
|
+
class="fas fa-external-link-alt"
|
|
4803
|
+
aria-hidden="true"
|
|
4804
|
+
></i>
|
|
4805
|
+
</span>
|
|
4806
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4807
|
+
</a>
|
|
4808
|
+
<button
|
|
4809
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4810
|
+
type="button"
|
|
4811
|
+
aria-label="Favorite"
|
|
4812
|
+
>
|
|
4813
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4814
|
+
</button>
|
|
4815
|
+
</li>
|
|
4816
|
+
<li
|
|
4817
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
4818
|
+
>
|
|
4819
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4820
|
+
Link 2
|
|
4821
|
+
<span
|
|
4822
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4823
|
+
>
|
|
4824
|
+
<i
|
|
4825
|
+
class="fas fa-external-link-alt"
|
|
4826
|
+
aria-hidden="true"
|
|
4827
|
+
></i>
|
|
4828
|
+
</span>
|
|
4829
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4830
|
+
</a>
|
|
4831
|
+
<button
|
|
4832
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4833
|
+
type="button"
|
|
4834
|
+
aria-label="Favorite"
|
|
4835
|
+
>
|
|
4836
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4837
|
+
</button>
|
|
4838
|
+
</li>
|
|
4839
|
+
</ul>
|
|
4840
|
+
</section>
|
|
4841
|
+
</div>
|
|
4842
|
+
</nav>
|
|
4843
|
+
</div>
|
|
4844
|
+
<div class="pf-c-toolbar__item">
|
|
4845
|
+
<div class="pf-c-dropdown">
|
|
4846
|
+
<button
|
|
4847
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4848
|
+
id="in-page-nav-expanded-example-masthead-settings-button"
|
|
4849
|
+
aria-expanded="false"
|
|
4850
|
+
type="button"
|
|
4851
|
+
aria-label="Settings"
|
|
4852
|
+
>
|
|
4853
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
4854
|
+
</button>
|
|
4855
|
+
<ul
|
|
4856
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4857
|
+
aria-labelledby="in-page-nav-expanded-example-masthead-settings-button"
|
|
4858
|
+
hidden
|
|
4859
|
+
>
|
|
4860
|
+
<li>
|
|
4861
|
+
<button
|
|
4862
|
+
class="pf-c-dropdown__menu-item"
|
|
4863
|
+
type="button"
|
|
4864
|
+
>Settings</button>
|
|
4865
|
+
</li>
|
|
4866
|
+
<li>
|
|
4867
|
+
<button
|
|
4868
|
+
class="pf-c-dropdown__menu-item"
|
|
4869
|
+
type="button"
|
|
4870
|
+
>Use the beta release</button>
|
|
4871
|
+
</li>
|
|
4872
|
+
</ul>
|
|
4873
|
+
</div>
|
|
4874
|
+
</div>
|
|
4875
|
+
<div class="pf-c-toolbar__item">
|
|
4876
|
+
<div class="pf-c-dropdown">
|
|
4877
|
+
<button
|
|
4878
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4879
|
+
id="in-page-nav-expanded-example-masthead-help-button"
|
|
4880
|
+
aria-expanded="false"
|
|
4881
|
+
type="button"
|
|
4882
|
+
aria-label="Help"
|
|
4883
|
+
>
|
|
4884
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
4885
|
+
</button>
|
|
4886
|
+
<ul
|
|
4887
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4888
|
+
aria-labelledby="in-page-nav-expanded-example-masthead-help-button"
|
|
4889
|
+
hidden
|
|
4890
|
+
>
|
|
4891
|
+
<li>
|
|
4892
|
+
<button
|
|
4893
|
+
class="pf-c-dropdown__menu-item"
|
|
4894
|
+
type="button"
|
|
4895
|
+
>Support options</button>
|
|
4896
|
+
</li>
|
|
4897
|
+
<li>
|
|
4898
|
+
<button
|
|
4899
|
+
class="pf-c-dropdown__menu-item"
|
|
4900
|
+
type="button"
|
|
4901
|
+
>Open support case</button>
|
|
4902
|
+
</li>
|
|
4903
|
+
<li>
|
|
4904
|
+
<button
|
|
4905
|
+
class="pf-c-dropdown__menu-item"
|
|
4906
|
+
type="button"
|
|
4907
|
+
>API documentation</button>
|
|
4908
|
+
</li>
|
|
4909
|
+
</ul>
|
|
4910
|
+
</div>
|
|
4911
|
+
</div>
|
|
4912
|
+
</div>
|
|
4913
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
4914
|
+
<div class="pf-c-dropdown">
|
|
4915
|
+
<button
|
|
4916
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
4917
|
+
type="button"
|
|
4918
|
+
aria-expanded="false"
|
|
4919
|
+
aria-label="Actions"
|
|
4920
|
+
>
|
|
4921
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
4922
|
+
</button>
|
|
4923
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
4924
|
+
<div class="pf-c-menu__content">
|
|
4925
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
4926
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4927
|
+
<li
|
|
4928
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
4929
|
+
role="none"
|
|
4930
|
+
>
|
|
4931
|
+
<button
|
|
4932
|
+
class="pf-c-menu__item"
|
|
4933
|
+
type="button"
|
|
4934
|
+
disabled
|
|
4935
|
+
role="menuitem"
|
|
4936
|
+
>
|
|
4937
|
+
<span class="pf-c-menu__item-description">
|
|
4938
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
4939
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
4940
|
+
</span>
|
|
4941
|
+
</button>
|
|
4942
|
+
</li>
|
|
4943
|
+
<li
|
|
4944
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
4945
|
+
role="none"
|
|
4946
|
+
>
|
|
4947
|
+
<button
|
|
4948
|
+
class="pf-c-menu__item"
|
|
4949
|
+
type="button"
|
|
4950
|
+
disabled
|
|
4951
|
+
role="menuitem"
|
|
4952
|
+
>
|
|
4953
|
+
<span class="pf-c-menu__item-description">
|
|
4954
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
4955
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
4956
|
+
</span>
|
|
4957
|
+
</button>
|
|
4958
|
+
</li>
|
|
4959
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
4960
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4961
|
+
<button
|
|
4962
|
+
class="pf-c-menu__item"
|
|
4963
|
+
type="button"
|
|
4964
|
+
role="menuitem"
|
|
4965
|
+
>
|
|
4966
|
+
<span class="pf-c-menu__item-main">
|
|
4967
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
4968
|
+
</span>
|
|
4969
|
+
</button>
|
|
4970
|
+
</li>
|
|
4971
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4972
|
+
<button
|
|
4973
|
+
class="pf-c-menu__item"
|
|
4974
|
+
type="button"
|
|
4975
|
+
role="menuitem"
|
|
4976
|
+
>
|
|
4977
|
+
<span class="pf-c-menu__item-main">
|
|
4978
|
+
<span
|
|
4979
|
+
class="pf-c-menu__item-text"
|
|
4980
|
+
>User management</span>
|
|
4981
|
+
</span>
|
|
4982
|
+
</button>
|
|
4983
|
+
</li>
|
|
4984
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4985
|
+
<button
|
|
4986
|
+
class="pf-c-menu__item"
|
|
4987
|
+
type="button"
|
|
4988
|
+
role="menuitem"
|
|
4989
|
+
>
|
|
4990
|
+
<span class="pf-c-menu__item-main">
|
|
4991
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
4992
|
+
</span>
|
|
4993
|
+
</button>
|
|
4994
|
+
</li>
|
|
4995
|
+
</ul>
|
|
4996
|
+
</section>
|
|
4997
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
4998
|
+
<section class="pf-c-menu__group">
|
|
4999
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5000
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5001
|
+
<button
|
|
5002
|
+
class="pf-c-menu__item"
|
|
5003
|
+
type="button"
|
|
5004
|
+
role="menuitem"
|
|
5005
|
+
aria-expanded="false"
|
|
5006
|
+
>
|
|
5007
|
+
<span class="pf-c-menu__item-main">
|
|
5008
|
+
<span class="pf-c-menu__item-icon">
|
|
5009
|
+
<i
|
|
5010
|
+
class="fas fa-fw fa-cog"
|
|
5011
|
+
aria-hidden="true"
|
|
5012
|
+
></i>
|
|
5013
|
+
</span>
|
|
5014
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
5015
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5016
|
+
<i class="fas fa-angle-right"></i>
|
|
5017
|
+
</span>
|
|
5018
|
+
</span>
|
|
5019
|
+
</button>
|
|
5020
|
+
<div class="pf-c-menu" hidden>
|
|
5021
|
+
<div class="pf-c-menu__content">
|
|
5022
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5023
|
+
<li
|
|
5024
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
5025
|
+
role="none"
|
|
5026
|
+
>
|
|
5027
|
+
<button
|
|
5028
|
+
class="pf-c-menu__item"
|
|
5029
|
+
type="button"
|
|
5030
|
+
role="menuitem"
|
|
5031
|
+
>
|
|
5032
|
+
<span class="pf-c-menu__item-main">
|
|
5033
|
+
<span
|
|
5034
|
+
class="pf-c-menu__item-toggle-icon"
|
|
5035
|
+
>
|
|
5036
|
+
<i class="fas fa-angle-left"></i>
|
|
5037
|
+
</span>
|
|
5038
|
+
<span class="pf-c-menu__item-icon">
|
|
5039
|
+
<i
|
|
5040
|
+
class="fas fa-fw fa-cog"
|
|
5041
|
+
aria-hidden="true"
|
|
5042
|
+
></i>
|
|
5043
|
+
</span>
|
|
5044
|
+
<span
|
|
5045
|
+
class="pf-c-menu__item-text"
|
|
5046
|
+
>Settings</span>
|
|
5047
|
+
</span>
|
|
5048
|
+
</button>
|
|
5049
|
+
</li>
|
|
5050
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
5051
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5052
|
+
<a
|
|
5053
|
+
class="pf-c-menu__item"
|
|
5054
|
+
href="#"
|
|
5055
|
+
role="menuitem"
|
|
5056
|
+
>
|
|
5057
|
+
<span class="pf-c-menu__item-main">
|
|
5058
|
+
<span
|
|
5059
|
+
class="pf-c-menu__item-text"
|
|
5060
|
+
>Customer support</span>
|
|
5061
|
+
</span>
|
|
5062
|
+
</a>
|
|
5063
|
+
</li>
|
|
5064
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5065
|
+
<a
|
|
5066
|
+
class="pf-c-menu__item"
|
|
5067
|
+
href="#"
|
|
5068
|
+
role="menuitem"
|
|
5069
|
+
>
|
|
5070
|
+
<span class="pf-c-menu__item-main">
|
|
5071
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
5072
|
+
</span>
|
|
5073
|
+
</a>
|
|
5074
|
+
</li>
|
|
5075
|
+
</ul>
|
|
5076
|
+
</div>
|
|
5077
|
+
</div>
|
|
5078
|
+
</li>
|
|
5079
|
+
|
|
5080
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5081
|
+
<button
|
|
5082
|
+
class="pf-c-menu__item"
|
|
5083
|
+
type="button"
|
|
5084
|
+
role="menuitem"
|
|
5085
|
+
aria-expanded="false"
|
|
5086
|
+
>
|
|
5087
|
+
<span class="pf-c-menu__item-main">
|
|
5088
|
+
<span class="pf-c-menu__item-icon">
|
|
5089
|
+
<i
|
|
5090
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
5091
|
+
aria-hidden="true"
|
|
5092
|
+
></i>
|
|
5093
|
+
</span>
|
|
5094
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
5095
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5096
|
+
<i class="fas fa-angle-right"></i>
|
|
5097
|
+
</span>
|
|
5098
|
+
</span>
|
|
5099
|
+
</button>
|
|
5100
|
+
<div class="pf-c-menu" hidden>
|
|
5101
|
+
<div class="pf-c-menu__content">
|
|
5102
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5103
|
+
<li
|
|
5104
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
5105
|
+
role="none"
|
|
5106
|
+
>
|
|
5107
|
+
<button
|
|
5108
|
+
class="pf-c-menu__item"
|
|
5109
|
+
type="button"
|
|
5110
|
+
role="menuitem"
|
|
5111
|
+
>
|
|
5112
|
+
<span class="pf-c-menu__item-main">
|
|
5113
|
+
<span
|
|
5114
|
+
class="pf-c-menu__item-toggle-icon"
|
|
5115
|
+
>
|
|
5116
|
+
<i class="fas fa-angle-left"></i>
|
|
5117
|
+
</span>
|
|
5118
|
+
<span class="pf-c-menu__item-icon">
|
|
5119
|
+
<i
|
|
5120
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
5121
|
+
aria-hidden="true"
|
|
5122
|
+
></i>
|
|
5123
|
+
</span>
|
|
5124
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
5125
|
+
</span>
|
|
5126
|
+
</button>
|
|
5127
|
+
</li>
|
|
5128
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
5129
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5130
|
+
<a
|
|
5131
|
+
class="pf-c-menu__item"
|
|
5132
|
+
href="#"
|
|
5133
|
+
role="menuitem"
|
|
5134
|
+
>
|
|
5135
|
+
<span class="pf-c-menu__item-main">
|
|
5136
|
+
<span
|
|
5137
|
+
class="pf-c-menu__item-text"
|
|
5138
|
+
>Support options</span>
|
|
5139
|
+
</span>
|
|
5140
|
+
</a>
|
|
5141
|
+
</li>
|
|
5142
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5143
|
+
<a
|
|
5144
|
+
class="pf-c-menu__item"
|
|
5145
|
+
href="#"
|
|
5146
|
+
role="menuitem"
|
|
5147
|
+
>
|
|
5148
|
+
<span class="pf-c-menu__item-main">
|
|
5149
|
+
<span
|
|
5150
|
+
class="pf-c-menu__item-text"
|
|
5151
|
+
>Open support case</span>
|
|
5152
|
+
</span>
|
|
5153
|
+
</a>
|
|
5154
|
+
</li>
|
|
5155
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5156
|
+
<a
|
|
5157
|
+
class="pf-c-menu__item"
|
|
5158
|
+
href="#"
|
|
5159
|
+
role="menuitem"
|
|
5160
|
+
>
|
|
5161
|
+
<span class="pf-c-menu__item-main">
|
|
5162
|
+
<span
|
|
5163
|
+
class="pf-c-menu__item-text"
|
|
5164
|
+
>API documentation</span>
|
|
5165
|
+
</span>
|
|
5166
|
+
</a>
|
|
5167
|
+
</li>
|
|
5168
|
+
</ul>
|
|
5169
|
+
</div>
|
|
5170
|
+
</div>
|
|
5171
|
+
</li>
|
|
5172
|
+
|
|
5173
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5174
|
+
<button
|
|
5175
|
+
class="pf-c-menu__item"
|
|
5176
|
+
type="button"
|
|
5177
|
+
role="menuitem"
|
|
5178
|
+
>
|
|
5179
|
+
<span class="pf-c-menu__item-main">
|
|
5180
|
+
<span class="pf-c-menu__item-icon">
|
|
5181
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
5182
|
+
</span>
|
|
5183
|
+
<span
|
|
5184
|
+
class="pf-c-menu__item-text"
|
|
5185
|
+
>Application launcher</span>
|
|
5186
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5187
|
+
<i class="fas fa-angle-right"></i>
|
|
5188
|
+
</span>
|
|
5189
|
+
</span>
|
|
5190
|
+
</button>
|
|
5191
|
+
<div class="pf-c-menu" hidden>
|
|
5192
|
+
<div class="pf-c-menu__header">
|
|
5193
|
+
<button
|
|
5194
|
+
class="pf-c-menu__item"
|
|
5195
|
+
type="button"
|
|
5196
|
+
role="menuitem"
|
|
5197
|
+
>
|
|
5198
|
+
<span class="pf-c-menu__item-main">
|
|
5199
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5200
|
+
<i class="fas fa-angle-left"></i>
|
|
5201
|
+
</span>
|
|
5202
|
+
<span class="pf-c-menu__item-icon">
|
|
5203
|
+
<i
|
|
5204
|
+
class="fas fa-fw fa-th"
|
|
5205
|
+
aria-hidden="true"
|
|
5206
|
+
></i>
|
|
5207
|
+
</span>
|
|
5208
|
+
<span
|
|
5209
|
+
class="pf-c-menu__item-text"
|
|
5210
|
+
>Application launcher</span>
|
|
5211
|
+
</span>
|
|
5212
|
+
</button>
|
|
5213
|
+
</div>
|
|
5214
|
+
<div class="pf-c-menu__search">
|
|
5215
|
+
<div class="pf-c-menu__search-input">
|
|
5216
|
+
<div class="pf-c-search-input">
|
|
5217
|
+
<div class="pf-c-search-input__bar">
|
|
5218
|
+
<span class="pf-c-search-input__text">
|
|
5219
|
+
<span class="pf-c-search-input__icon">
|
|
5220
|
+
<i
|
|
5221
|
+
class="fas fa-search fa-fw"
|
|
5222
|
+
aria-hidden="true"
|
|
5223
|
+
></i>
|
|
5224
|
+
</span>
|
|
5225
|
+
<input
|
|
5226
|
+
class="pf-c-search-input__text-input"
|
|
5227
|
+
type="text"
|
|
5228
|
+
placeholder="Search"
|
|
5229
|
+
aria-label="Search"
|
|
5230
|
+
/>
|
|
5231
|
+
</span>
|
|
5232
|
+
</div>
|
|
5233
|
+
</div>
|
|
5234
|
+
</div>
|
|
5235
|
+
</div>
|
|
5236
|
+
<hr class="pf-c-divider" />
|
|
5237
|
+
<section class="pf-c-menu__group">
|
|
5238
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
5239
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5240
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5241
|
+
<a
|
|
5242
|
+
class="pf-c-menu__item"
|
|
5243
|
+
href="#"
|
|
5244
|
+
role="menuitem"
|
|
5245
|
+
>
|
|
5246
|
+
<span class="pf-c-menu__item-main">
|
|
5247
|
+
<span
|
|
5248
|
+
class="pf-c-menu__item-text"
|
|
5249
|
+
>Link 1</span>
|
|
5250
|
+
</span>
|
|
5251
|
+
</a>
|
|
5252
|
+
<button
|
|
5253
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
5254
|
+
type="button"
|
|
5255
|
+
aria-label="Starred"
|
|
5256
|
+
>
|
|
5257
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5258
|
+
<i
|
|
5259
|
+
class="fas fa-star"
|
|
5260
|
+
aria-hidden="true"
|
|
5261
|
+
></i>
|
|
5262
|
+
</span>
|
|
5263
|
+
</button>
|
|
5264
|
+
</li>
|
|
5265
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5266
|
+
<a
|
|
5267
|
+
class="pf-c-menu__item"
|
|
5268
|
+
href="#"
|
|
5269
|
+
role="menuitem"
|
|
5270
|
+
target="_blank"
|
|
5271
|
+
>
|
|
5272
|
+
<span class="pf-c-menu__item-main">
|
|
5273
|
+
<span
|
|
5274
|
+
class="pf-c-menu__item-text"
|
|
5275
|
+
>Link 2</span>
|
|
5276
|
+
<span
|
|
5277
|
+
class="pf-c-menu__item-external-icon"
|
|
5278
|
+
>
|
|
5279
|
+
<i
|
|
5280
|
+
class="fas fa-external-link-alt"
|
|
5281
|
+
aria-hidden="true"
|
|
5282
|
+
></i>
|
|
5283
|
+
</span>
|
|
5284
|
+
<span
|
|
5285
|
+
class="pf-screen-reader"
|
|
5286
|
+
>(opens new window)</span>
|
|
5287
|
+
</span>
|
|
5288
|
+
</a>
|
|
5289
|
+
<button
|
|
5290
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
5291
|
+
type="button"
|
|
5292
|
+
aria-label="Not starred"
|
|
5293
|
+
>
|
|
5294
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5295
|
+
<i
|
|
5296
|
+
class="fas fa-star"
|
|
5297
|
+
aria-hidden="true"
|
|
5298
|
+
></i>
|
|
5299
|
+
</span>
|
|
5300
|
+
</button>
|
|
5301
|
+
</li>
|
|
5302
|
+
</ul>
|
|
5303
|
+
</section>
|
|
5304
|
+
<hr class="pf-c-divider" />
|
|
5305
|
+
<section class="pf-c-menu__group">
|
|
5306
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
5307
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5308
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5309
|
+
<a
|
|
5310
|
+
class="pf-c-menu__item"
|
|
5311
|
+
href="#"
|
|
5312
|
+
role="menuitem"
|
|
5313
|
+
>
|
|
5314
|
+
<span class="pf-c-menu__item-main">
|
|
5315
|
+
<span
|
|
5316
|
+
class="pf-c-menu__item-text"
|
|
5317
|
+
>Link 1</span>
|
|
5318
|
+
</span>
|
|
5319
|
+
</a>
|
|
5320
|
+
<button
|
|
5321
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
5322
|
+
type="button"
|
|
5323
|
+
aria-label="Not starred"
|
|
5324
|
+
>
|
|
5325
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5326
|
+
<i
|
|
5327
|
+
class="fas fa-star"
|
|
5328
|
+
aria-hidden="true"
|
|
5329
|
+
></i>
|
|
5330
|
+
</span>
|
|
5331
|
+
</button>
|
|
5332
|
+
</li>
|
|
5333
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5334
|
+
<a
|
|
5335
|
+
class="pf-c-menu__item"
|
|
5336
|
+
href="#"
|
|
5337
|
+
role="menuitem"
|
|
5338
|
+
target="_blank"
|
|
5339
|
+
>
|
|
5340
|
+
<span class="pf-c-menu__item-main">
|
|
5341
|
+
<span
|
|
5342
|
+
class="pf-c-menu__item-text"
|
|
5343
|
+
>Link 2</span>
|
|
5344
|
+
<span
|
|
5345
|
+
class="pf-c-menu__item-external-icon"
|
|
5346
|
+
>
|
|
5347
|
+
<i
|
|
5348
|
+
class="fas fa-external-link-alt"
|
|
5349
|
+
aria-hidden="true"
|
|
5350
|
+
></i>
|
|
5351
|
+
</span>
|
|
5352
|
+
<span
|
|
5353
|
+
class="pf-screen-reader"
|
|
5354
|
+
>(opens new window)</span>
|
|
5355
|
+
</span>
|
|
5356
|
+
</a>
|
|
5357
|
+
<button
|
|
5358
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
5359
|
+
type="button"
|
|
5360
|
+
aria-label="Starred"
|
|
5361
|
+
>
|
|
5362
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5363
|
+
<i
|
|
5364
|
+
class="fas fa-star"
|
|
5365
|
+
aria-hidden="true"
|
|
5366
|
+
></i>
|
|
5367
|
+
</span>
|
|
5368
|
+
</button>
|
|
5369
|
+
</li>
|
|
5370
|
+
</ul>
|
|
5371
|
+
</section>
|
|
5372
|
+
</div>
|
|
5373
|
+
</li>
|
|
5374
|
+
</ul>
|
|
5375
|
+
</section>
|
|
5376
|
+
</div>
|
|
5377
|
+
</div>
|
|
5378
|
+
</div>
|
|
5379
|
+
</div>
|
|
5380
|
+
</div>
|
|
5381
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
5382
|
+
<div
|
|
5383
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
5384
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
5385
|
+
>
|
|
5386
|
+
<button
|
|
5387
|
+
class="pf-c-dropdown__toggle"
|
|
5388
|
+
id="in-page-nav-expanded-example-masthead-profile-button"
|
|
5389
|
+
aria-expanded="false"
|
|
5390
|
+
type="button"
|
|
5391
|
+
>
|
|
5392
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
5393
|
+
<img
|
|
5394
|
+
class="pf-c-avatar"
|
|
5395
|
+
src="/assets/images/img_avatar.svg"
|
|
5396
|
+
alt="Avatar image"
|
|
5397
|
+
/>
|
|
5398
|
+
</span>
|
|
5399
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
5400
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
5401
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5402
|
+
</span>
|
|
5403
|
+
</button>
|
|
5404
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
5405
|
+
<section class="pf-c-dropdown__group">
|
|
5406
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5407
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5408
|
+
<div>123456789</div>
|
|
5409
|
+
</div>
|
|
5410
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5411
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
5412
|
+
<div>mshaksho@redhat.com</div>
|
|
5413
|
+
</div>
|
|
5414
|
+
</section>
|
|
5415
|
+
<hr class="pf-c-divider" />
|
|
5416
|
+
<section class="pf-c-dropdown__group">
|
|
5417
|
+
<ul>
|
|
5418
|
+
<li>
|
|
5419
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
5420
|
+
</li>
|
|
5421
|
+
<li>
|
|
5422
|
+
<a
|
|
5423
|
+
class="pf-c-dropdown__menu-item"
|
|
5424
|
+
href="#"
|
|
5425
|
+
>User management</a>
|
|
5426
|
+
</li>
|
|
5427
|
+
<li>
|
|
5428
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
5429
|
+
</li>
|
|
5430
|
+
</ul>
|
|
5431
|
+
</section>
|
|
5432
|
+
</div>
|
|
5433
|
+
</div>
|
|
5434
|
+
</div>
|
|
5435
|
+
</div>
|
|
5436
|
+
</div>
|
|
5437
|
+
</div>
|
|
5438
|
+
</div>
|
|
5439
|
+
</header>
|
|
5440
|
+
<div class="pf-c-page__sidebar">
|
|
5441
|
+
<div class="pf-c-page__sidebar-body">
|
|
5442
|
+
<nav
|
|
5443
|
+
class="pf-c-nav"
|
|
5444
|
+
id="in-page-nav-expanded-example-primary-nav"
|
|
5445
|
+
aria-label="Global"
|
|
5446
|
+
>
|
|
5447
|
+
<ul class="pf-c-nav__list">
|
|
5448
|
+
<li class="pf-c-nav__item">
|
|
5449
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
5450
|
+
</li>
|
|
5451
|
+
<li class="pf-c-nav__item">
|
|
5452
|
+
<a
|
|
5453
|
+
href="#"
|
|
5454
|
+
class="pf-c-nav__link pf-m-current"
|
|
5455
|
+
aria-current="page"
|
|
5456
|
+
>Policy</a>
|
|
5457
|
+
</li>
|
|
5458
|
+
<li class="pf-c-nav__item">
|
|
5459
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
5460
|
+
</li>
|
|
5461
|
+
<li class="pf-c-nav__item">
|
|
5462
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
5463
|
+
</li>
|
|
5464
|
+
<li class="pf-c-nav__item">
|
|
5465
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
5466
|
+
</li>
|
|
5467
|
+
</ul>
|
|
5468
|
+
</nav>
|
|
5469
|
+
</div>
|
|
5470
|
+
</div>
|
|
5471
|
+
<main
|
|
5472
|
+
class="pf-c-page__main"
|
|
5473
|
+
tabindex="-1"
|
|
5474
|
+
id="main-content-in-page-nav-expanded-example"
|
|
5475
|
+
>
|
|
5476
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
5477
|
+
<div class="pf-c-page__main-body">
|
|
5478
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
5479
|
+
<ol class="pf-c-breadcrumb__list">
|
|
5480
|
+
<li class="pf-c-breadcrumb__item">
|
|
5481
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
5482
|
+
</li>
|
|
5483
|
+
<li class="pf-c-breadcrumb__item">
|
|
5484
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
5485
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5486
|
+
</span>
|
|
5487
|
+
|
|
5488
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
5489
|
+
</li>
|
|
5490
|
+
<li class="pf-c-breadcrumb__item">
|
|
5491
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
5492
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5493
|
+
</span>
|
|
5494
|
+
|
|
5495
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
5496
|
+
</li>
|
|
5497
|
+
<li class="pf-c-breadcrumb__item">
|
|
5498
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
5499
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5500
|
+
</span>
|
|
5501
|
+
|
|
5502
|
+
<a
|
|
5503
|
+
href="#"
|
|
5504
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
5505
|
+
aria-current="page"
|
|
5506
|
+
>Section landing</a>
|
|
5507
|
+
</li>
|
|
5508
|
+
</ol>
|
|
5509
|
+
</nav>
|
|
5510
|
+
</div>
|
|
5511
|
+
</section>
|
|
5512
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
5513
|
+
<div class="pf-c-page__main-body">
|
|
5514
|
+
<div class="pf-c-content">
|
|
5515
|
+
<h1>Main title</h1>
|
|
5516
|
+
<p>This is a full page demo.</p>
|
|
5517
|
+
</div>
|
|
5518
|
+
</div>
|
|
5519
|
+
</section>
|
|
5520
|
+
|
|
5521
|
+
<section class="pf-c-page__main-wizard pf-m-limit-width">
|
|
5522
|
+
<div class="pf-c-page__main-body">
|
|
5523
|
+
<div class="pf-c-wizard">
|
|
5524
|
+
<button
|
|
5525
|
+
aria-label="Wizard Header Toggle"
|
|
5526
|
+
class="pf-c-wizard__toggle pf-m-expanded"
|
|
5527
|
+
aria-expanded="true"
|
|
5528
|
+
>
|
|
5529
|
+
<span class="pf-c-wizard__toggle-list">
|
|
5530
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
5531
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
5532
|
+
Configuration
|
|
5533
|
+
<i
|
|
5534
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
5535
|
+
aria-hidden="true"
|
|
5536
|
+
></i>
|
|
5537
|
+
</span>
|
|
5538
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
5539
|
+
</span>
|
|
5540
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
5541
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5542
|
+
</span>
|
|
5543
|
+
</button>
|
|
5544
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
5545
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
5546
|
+
<nav class="pf-c-wizard__nav pf-m-expanded" aria-label="Steps">
|
|
5547
|
+
<ol class="pf-c-wizard__nav-list">
|
|
5548
|
+
<li class="pf-c-wizard__nav-item">
|
|
5549
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
5550
|
+
</li>
|
|
5551
|
+
<li class="pf-c-wizard__nav-item">
|
|
5552
|
+
<button
|
|
5553
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
5554
|
+
>Configuration</button>
|
|
5555
|
+
<ol class="pf-c-wizard__nav-list">
|
|
5556
|
+
<li class="pf-c-wizard__nav-item">
|
|
5557
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
5558
|
+
</li>
|
|
5559
|
+
<li class="pf-c-wizard__nav-item">
|
|
5560
|
+
<button
|
|
5561
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
5562
|
+
aria-current="page"
|
|
5563
|
+
>Substep B</button>
|
|
5564
|
+
</li>
|
|
5565
|
+
<li class="pf-c-wizard__nav-item">
|
|
5566
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
5567
|
+
</li>
|
|
5568
|
+
</ol>
|
|
5569
|
+
</li>
|
|
5570
|
+
<li class="pf-c-wizard__nav-item">
|
|
5571
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
5572
|
+
</li>
|
|
5573
|
+
<li class="pf-c-wizard__nav-item">
|
|
5574
|
+
<button
|
|
5575
|
+
class="pf-c-wizard__nav-link pf-m-disabled"
|
|
5576
|
+
aria-disabled="true"
|
|
5577
|
+
tabindex="-1"
|
|
5578
|
+
>Review</button>
|
|
5579
|
+
</li>
|
|
5580
|
+
</ol>
|
|
5581
|
+
</nav>
|
|
5582
|
+
<div class="pf-c-wizard__main" tabindex="0">
|
|
5583
|
+
<div class="pf-c-wizard__main-body">
|
|
5584
|
+
<form novalidate class="pf-c-form">
|
|
5585
|
+
<div class="pf-c-form__group">
|
|
5586
|
+
<div class="pf-c-form__group-label">
|
|
5587
|
+
<label class="pf-c-form__label" for="-form-field1">
|
|
5588
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
5589
|
+
<span
|
|
5590
|
+
class="pf-c-form__label-required"
|
|
5591
|
+
aria-hidden="true"
|
|
5592
|
+
>*</span>
|
|
5593
|
+
</label>
|
|
5594
|
+
</div>
|
|
5595
|
+
<div class="pf-c-form__group-control">
|
|
5596
|
+
<input
|
|
5597
|
+
class="pf-c-form-control"
|
|
5598
|
+
required
|
|
5599
|
+
type="text"
|
|
5600
|
+
id="-form-field1"
|
|
5601
|
+
name="-form-field1"
|
|
5602
|
+
/>
|
|
5603
|
+
</div>
|
|
5604
|
+
</div>
|
|
5605
|
+
<div class="pf-c-form__group">
|
|
5606
|
+
<div class="pf-c-form__group-label">
|
|
5607
|
+
<label class="pf-c-form__label" for="-form-field2">
|
|
5608
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
5609
|
+
<span
|
|
5610
|
+
class="pf-c-form__label-required"
|
|
5611
|
+
aria-hidden="true"
|
|
5612
|
+
>*</span>
|
|
5613
|
+
</label>
|
|
5614
|
+
</div>
|
|
5615
|
+
<div class="pf-c-form__group-control">
|
|
5616
|
+
<input
|
|
5617
|
+
class="pf-c-form-control"
|
|
5618
|
+
required
|
|
5619
|
+
type="text"
|
|
5620
|
+
id="-form-field2"
|
|
5621
|
+
name="-form-field2"
|
|
5622
|
+
/>
|
|
5623
|
+
</div>
|
|
5624
|
+
</div>
|
|
5625
|
+
<div class="pf-c-form__group">
|
|
5626
|
+
<div class="pf-c-form__group-label">
|
|
5627
|
+
<label class="pf-c-form__label" for="-form-field3">
|
|
5628
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
5629
|
+
<span
|
|
5630
|
+
class="pf-c-form__label-required"
|
|
5631
|
+
aria-hidden="true"
|
|
5632
|
+
>*</span>
|
|
5633
|
+
</label>
|
|
5634
|
+
</div>
|
|
5635
|
+
<div class="pf-c-form__group-control">
|
|
5636
|
+
<input
|
|
5637
|
+
class="pf-c-form-control"
|
|
5638
|
+
required
|
|
5639
|
+
type="text"
|
|
5640
|
+
id="-form-field3"
|
|
5641
|
+
name="-form-field3"
|
|
5642
|
+
/>
|
|
5643
|
+
</div>
|
|
5644
|
+
</div>
|
|
5645
|
+
<div class="pf-c-form__group">
|
|
5646
|
+
<div class="pf-c-form__group-label">
|
|
5647
|
+
<label class="pf-c-form__label" for="-form-field4">
|
|
5648
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
5649
|
+
<span
|
|
5650
|
+
class="pf-c-form__label-required"
|
|
5651
|
+
aria-hidden="true"
|
|
5652
|
+
>*</span>
|
|
5653
|
+
</label>
|
|
5654
|
+
</div>
|
|
5655
|
+
<div class="pf-c-form__group-control">
|
|
5656
|
+
<input
|
|
5657
|
+
class="pf-c-form-control"
|
|
5658
|
+
required
|
|
5659
|
+
type="text"
|
|
5660
|
+
id="-form-field4"
|
|
5661
|
+
name="-form-field4"
|
|
5662
|
+
/>
|
|
5663
|
+
</div>
|
|
5664
|
+
</div>
|
|
5665
|
+
<div class="pf-c-form__group">
|
|
5666
|
+
<div class="pf-c-form__group-label">
|
|
5667
|
+
<label class="pf-c-form__label" for="-form-field5">
|
|
5668
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
5669
|
+
<span
|
|
5670
|
+
class="pf-c-form__label-required"
|
|
5671
|
+
aria-hidden="true"
|
|
5672
|
+
>*</span>
|
|
5673
|
+
</label>
|
|
5674
|
+
</div>
|
|
5675
|
+
<div class="pf-c-form__group-control">
|
|
5676
|
+
<input
|
|
5677
|
+
class="pf-c-form-control"
|
|
5678
|
+
required
|
|
5679
|
+
type="text"
|
|
5680
|
+
id="-form-field5"
|
|
5681
|
+
name="-form-field5"
|
|
5682
|
+
/>
|
|
5683
|
+
</div>
|
|
5684
|
+
</div>
|
|
5685
|
+
<div class="pf-c-form__group">
|
|
5686
|
+
<div class="pf-c-form__group-label">
|
|
5687
|
+
<label class="pf-c-form__label" for="-form-field6">
|
|
5688
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
5689
|
+
<span
|
|
5690
|
+
class="pf-c-form__label-required"
|
|
5691
|
+
aria-hidden="true"
|
|
5692
|
+
>*</span>
|
|
5693
|
+
</label>
|
|
5694
|
+
</div>
|
|
5695
|
+
<div class="pf-c-form__group-control">
|
|
5696
|
+
<input
|
|
5697
|
+
class="pf-c-form-control"
|
|
5698
|
+
required
|
|
5699
|
+
type="text"
|
|
5700
|
+
id="-form-field6"
|
|
5701
|
+
name="-form-field6"
|
|
5702
|
+
/>
|
|
5703
|
+
</div>
|
|
5704
|
+
</div>
|
|
5705
|
+
<div class="pf-c-form__group">
|
|
5706
|
+
<div class="pf-c-form__group-label">
|
|
5707
|
+
<label class="pf-c-form__label" for="-form-field7">
|
|
5708
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
5709
|
+
<span
|
|
5710
|
+
class="pf-c-form__label-required"
|
|
5711
|
+
aria-hidden="true"
|
|
5712
|
+
>*</span>
|
|
5713
|
+
</label>
|
|
5714
|
+
</div>
|
|
5715
|
+
<div class="pf-c-form__group-control">
|
|
5716
|
+
<input
|
|
5717
|
+
class="pf-c-form-control"
|
|
5718
|
+
required
|
|
5719
|
+
type="text"
|
|
5720
|
+
id="-form-field7"
|
|
5721
|
+
name="-form-field7"
|
|
5722
|
+
/>
|
|
5723
|
+
</div>
|
|
5724
|
+
</div>
|
|
5725
|
+
</form>
|
|
5726
|
+
</div>
|
|
5727
|
+
</div>
|
|
5728
|
+
</div>
|
|
5729
|
+
<footer class="pf-c-wizard__footer">
|
|
5730
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
5731
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
5732
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
5733
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
5734
|
+
</div>
|
|
5735
|
+
</footer>
|
|
5736
|
+
</div>
|
|
5737
|
+
</div>
|
|
5738
|
+
</div>
|
|
5739
|
+
</section>
|
|
5740
|
+
</main>
|
|
5741
|
+
</div>
|
|
5742
|
+
|
|
5743
|
+
```
|
|
5744
|
+
|
|
5745
|
+
### With drawer, in page
|
|
5746
|
+
|
|
5747
|
+
```html isFullscreen
|
|
5748
|
+
<div class="pf-c-page" id="wizard-with-drawer-in-page-example">
|
|
5749
|
+
<a
|
|
5750
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
5751
|
+
href="#main-content-wizard-with-drawer-in-page-example"
|
|
5752
|
+
>Skip to content</a>
|
|
5753
|
+
<header
|
|
5754
|
+
class="pf-c-masthead"
|
|
5755
|
+
id="wizard-with-drawer-in-page-example-masthead"
|
|
5756
|
+
>
|
|
5757
|
+
<span class="pf-c-masthead__toggle">
|
|
5758
|
+
<button
|
|
5759
|
+
class="pf-c-button pf-m-plain"
|
|
5760
|
+
type="button"
|
|
5761
|
+
aria-label="Global navigation"
|
|
5762
|
+
>
|
|
5763
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
5764
|
+
</button>
|
|
5765
|
+
</span>
|
|
5766
|
+
<div class="pf-c-masthead__main">
|
|
5767
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
5768
|
+
<picture
|
|
5769
|
+
class="pf-c-brand pf-m-picture"
|
|
5770
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
5771
|
+
>
|
|
5772
|
+
<source
|
|
5773
|
+
media="(min-width: 768px)"
|
|
5774
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
5775
|
+
/>
|
|
5776
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
5777
|
+
<img
|
|
5778
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
5779
|
+
alt="Fallback patternFly default logo"
|
|
5780
|
+
/>
|
|
5781
|
+
</picture>
|
|
5782
|
+
</a>
|
|
5783
|
+
</div>
|
|
5784
|
+
<div class="pf-c-masthead__content">
|
|
5785
|
+
<div
|
|
5786
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
5787
|
+
id="wizard-with-drawer-in-page-example-masthead-toolbar"
|
|
5788
|
+
>
|
|
5789
|
+
<div class="pf-c-toolbar__content">
|
|
5790
|
+
<div class="pf-c-toolbar__content-section">
|
|
5791
|
+
<div
|
|
5792
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
5793
|
+
>
|
|
5794
|
+
<div class="pf-c-toolbar__item">
|
|
5795
|
+
<button
|
|
5796
|
+
class="pf-c-button pf-m-plain"
|
|
5797
|
+
type="button"
|
|
5798
|
+
aria-label="Notifications"
|
|
5799
|
+
>
|
|
5800
|
+
<span class="pf-c-notification-badge">
|
|
5801
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
5802
|
+
</span>
|
|
5803
|
+
</button>
|
|
5804
|
+
</div>
|
|
5805
|
+
<div
|
|
5806
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
5807
|
+
>
|
|
5808
|
+
<div class="pf-c-toolbar__item">
|
|
5809
|
+
<nav
|
|
5810
|
+
class="pf-c-app-launcher"
|
|
5811
|
+
aria-label="Application launcher"
|
|
5812
|
+
id="wizard-with-drawer-in-page-example-masthead-icon-group--app-launcher"
|
|
5813
|
+
>
|
|
5814
|
+
<button
|
|
5815
|
+
class="pf-c-app-launcher__toggle"
|
|
5816
|
+
type="button"
|
|
5817
|
+
id="wizard-with-drawer-in-page-example-masthead-icon-group--app-launcher-button"
|
|
5818
|
+
aria-expanded="false"
|
|
5819
|
+
aria-label="Application launcher"
|
|
5820
|
+
>
|
|
5821
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
5822
|
+
</button>
|
|
5823
|
+
<div
|
|
5824
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
5825
|
+
hidden
|
|
5826
|
+
>
|
|
5827
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
5828
|
+
<div class="pf-c-search-input">
|
|
5829
|
+
<div class="pf-c-search-input__bar">
|
|
5830
|
+
<span class="pf-c-search-input__text">
|
|
5831
|
+
<span class="pf-c-search-input__icon">
|
|
5832
|
+
<i
|
|
5833
|
+
class="fas fa-search fa-fw"
|
|
5834
|
+
aria-hidden="true"
|
|
5835
|
+
></i>
|
|
5836
|
+
</span>
|
|
5837
|
+
<input
|
|
5838
|
+
class="pf-c-search-input__text-input"
|
|
5839
|
+
type="text"
|
|
5840
|
+
placeholder="Filter by name"
|
|
5841
|
+
aria-label="Filter by name"
|
|
5842
|
+
/>
|
|
5843
|
+
</span>
|
|
5844
|
+
</div>
|
|
5845
|
+
</div>
|
|
5846
|
+
</div>
|
|
5847
|
+
<section class="pf-c-app-launcher__group">
|
|
5848
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
5849
|
+
<ul>
|
|
5850
|
+
<li
|
|
5851
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
5852
|
+
>
|
|
5853
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5854
|
+
Link 1
|
|
5855
|
+
<span
|
|
5856
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5857
|
+
>
|
|
5858
|
+
<i
|
|
5859
|
+
class="fas fa-external-link-alt"
|
|
5860
|
+
aria-hidden="true"
|
|
5861
|
+
></i>
|
|
5862
|
+
</span>
|
|
5863
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5864
|
+
</a>
|
|
5865
|
+
<button
|
|
5866
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5867
|
+
type="button"
|
|
5868
|
+
aria-label="Favorite"
|
|
5869
|
+
>
|
|
5870
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5871
|
+
</button>
|
|
5872
|
+
</li>
|
|
5873
|
+
<li
|
|
5874
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
5875
|
+
>
|
|
5876
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5877
|
+
Link 2
|
|
5878
|
+
<span
|
|
5879
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5880
|
+
>
|
|
5881
|
+
<i
|
|
5882
|
+
class="fas fa-external-link-alt"
|
|
5883
|
+
aria-hidden="true"
|
|
5884
|
+
></i>
|
|
5885
|
+
</span>
|
|
5886
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5887
|
+
</a>
|
|
5888
|
+
<button
|
|
5889
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5890
|
+
type="button"
|
|
5891
|
+
aria-label="Favorite"
|
|
5892
|
+
>
|
|
5893
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5894
|
+
</button>
|
|
5895
|
+
</li>
|
|
5896
|
+
</ul>
|
|
5897
|
+
</section>
|
|
5898
|
+
<hr class="pf-c-divider" />
|
|
5899
|
+
<section class="pf-c-app-launcher__group">
|
|
5900
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
5901
|
+
<ul>
|
|
5902
|
+
<li
|
|
5903
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
5904
|
+
>
|
|
5905
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5906
|
+
Link 1
|
|
5907
|
+
<span
|
|
5908
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5909
|
+
>
|
|
5910
|
+
<i
|
|
5911
|
+
class="fas fa-external-link-alt"
|
|
5912
|
+
aria-hidden="true"
|
|
5913
|
+
></i>
|
|
5914
|
+
</span>
|
|
5915
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5916
|
+
</a>
|
|
5917
|
+
<button
|
|
5918
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5919
|
+
type="button"
|
|
5920
|
+
aria-label="Favorite"
|
|
5921
|
+
>
|
|
5922
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5923
|
+
</button>
|
|
5924
|
+
</li>
|
|
5925
|
+
<li
|
|
5926
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
5927
|
+
>
|
|
5928
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5929
|
+
Link 2
|
|
5930
|
+
<span
|
|
5931
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5932
|
+
>
|
|
5933
|
+
<i
|
|
5934
|
+
class="fas fa-external-link-alt"
|
|
5935
|
+
aria-hidden="true"
|
|
5936
|
+
></i>
|
|
5937
|
+
</span>
|
|
5938
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5939
|
+
</a>
|
|
5940
|
+
<button
|
|
5941
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5942
|
+
type="button"
|
|
5943
|
+
aria-label="Favorite"
|
|
5944
|
+
>
|
|
5945
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5946
|
+
</button>
|
|
5947
|
+
</li>
|
|
5948
|
+
</ul>
|
|
5949
|
+
</section>
|
|
5950
|
+
</div>
|
|
5951
|
+
</nav>
|
|
5952
|
+
</div>
|
|
5953
|
+
<div class="pf-c-toolbar__item">
|
|
5954
|
+
<div class="pf-c-dropdown">
|
|
5955
|
+
<button
|
|
5956
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5957
|
+
id="wizard-with-drawer-in-page-example-masthead-settings-button"
|
|
5958
|
+
aria-expanded="false"
|
|
5959
|
+
type="button"
|
|
5960
|
+
aria-label="Settings"
|
|
5961
|
+
>
|
|
5962
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
5963
|
+
</button>
|
|
5964
|
+
<ul
|
|
5965
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5966
|
+
aria-labelledby="wizard-with-drawer-in-page-example-masthead-settings-button"
|
|
5967
|
+
hidden
|
|
5968
|
+
>
|
|
5969
|
+
<li>
|
|
5970
|
+
<button
|
|
5971
|
+
class="pf-c-dropdown__menu-item"
|
|
5972
|
+
type="button"
|
|
5973
|
+
>Settings</button>
|
|
5974
|
+
</li>
|
|
5975
|
+
<li>
|
|
5976
|
+
<button
|
|
5977
|
+
class="pf-c-dropdown__menu-item"
|
|
5978
|
+
type="button"
|
|
5979
|
+
>Use the beta release</button>
|
|
5980
|
+
</li>
|
|
5981
|
+
</ul>
|
|
5982
|
+
</div>
|
|
5983
|
+
</div>
|
|
5984
|
+
<div class="pf-c-toolbar__item">
|
|
5985
|
+
<div class="pf-c-dropdown">
|
|
5986
|
+
<button
|
|
5987
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5988
|
+
id="wizard-with-drawer-in-page-example-masthead-help-button"
|
|
5989
|
+
aria-expanded="false"
|
|
5990
|
+
type="button"
|
|
5991
|
+
aria-label="Help"
|
|
5992
|
+
>
|
|
5993
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
5994
|
+
</button>
|
|
5995
|
+
<ul
|
|
5996
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5997
|
+
aria-labelledby="wizard-with-drawer-in-page-example-masthead-help-button"
|
|
5998
|
+
hidden
|
|
5999
|
+
>
|
|
6000
|
+
<li>
|
|
6001
|
+
<button
|
|
6002
|
+
class="pf-c-dropdown__menu-item"
|
|
6003
|
+
type="button"
|
|
6004
|
+
>Support options</button>
|
|
6005
|
+
</li>
|
|
6006
|
+
<li>
|
|
6007
|
+
<button
|
|
6008
|
+
class="pf-c-dropdown__menu-item"
|
|
6009
|
+
type="button"
|
|
6010
|
+
>Open support case</button>
|
|
6011
|
+
</li>
|
|
6012
|
+
<li>
|
|
6013
|
+
<button
|
|
6014
|
+
class="pf-c-dropdown__menu-item"
|
|
6015
|
+
type="button"
|
|
6016
|
+
>API documentation</button>
|
|
6017
|
+
</li>
|
|
6018
|
+
</ul>
|
|
6019
|
+
</div>
|
|
6020
|
+
</div>
|
|
6021
|
+
</div>
|
|
6022
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
6023
|
+
<div class="pf-c-dropdown">
|
|
6024
|
+
<button
|
|
6025
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
6026
|
+
type="button"
|
|
6027
|
+
aria-expanded="false"
|
|
6028
|
+
aria-label="Actions"
|
|
6029
|
+
>
|
|
6030
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
6031
|
+
</button>
|
|
6032
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
6033
|
+
<div class="pf-c-menu__content">
|
|
6034
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
6035
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
6036
|
+
<li
|
|
6037
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
6038
|
+
role="none"
|
|
6039
|
+
>
|
|
6040
|
+
<button
|
|
6041
|
+
class="pf-c-menu__item"
|
|
6042
|
+
type="button"
|
|
6043
|
+
disabled
|
|
6044
|
+
role="menuitem"
|
|
6045
|
+
>
|
|
6046
|
+
<span class="pf-c-menu__item-description">
|
|
6047
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
6048
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
6049
|
+
</span>
|
|
6050
|
+
</button>
|
|
6051
|
+
</li>
|
|
6052
|
+
<li
|
|
6053
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
6054
|
+
role="none"
|
|
6055
|
+
>
|
|
6056
|
+
<button
|
|
6057
|
+
class="pf-c-menu__item"
|
|
6058
|
+
type="button"
|
|
6059
|
+
disabled
|
|
6060
|
+
role="menuitem"
|
|
6061
|
+
>
|
|
6062
|
+
<span class="pf-c-menu__item-description">
|
|
6063
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
6064
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
6065
|
+
</span>
|
|
6066
|
+
</button>
|
|
6067
|
+
</li>
|
|
6068
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
6069
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6070
|
+
<button
|
|
6071
|
+
class="pf-c-menu__item"
|
|
6072
|
+
type="button"
|
|
6073
|
+
role="menuitem"
|
|
6074
|
+
>
|
|
6075
|
+
<span class="pf-c-menu__item-main">
|
|
6076
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
6077
|
+
</span>
|
|
6078
|
+
</button>
|
|
6079
|
+
</li>
|
|
6080
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6081
|
+
<button
|
|
6082
|
+
class="pf-c-menu__item"
|
|
6083
|
+
type="button"
|
|
6084
|
+
role="menuitem"
|
|
6085
|
+
>
|
|
6086
|
+
<span class="pf-c-menu__item-main">
|
|
6087
|
+
<span
|
|
6088
|
+
class="pf-c-menu__item-text"
|
|
6089
|
+
>User management</span>
|
|
6090
|
+
</span>
|
|
6091
|
+
</button>
|
|
6092
|
+
</li>
|
|
6093
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6094
|
+
<button
|
|
6095
|
+
class="pf-c-menu__item"
|
|
6096
|
+
type="button"
|
|
6097
|
+
role="menuitem"
|
|
6098
|
+
>
|
|
6099
|
+
<span class="pf-c-menu__item-main">
|
|
6100
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
6101
|
+
</span>
|
|
6102
|
+
</button>
|
|
6103
|
+
</li>
|
|
6104
|
+
</ul>
|
|
6105
|
+
</section>
|
|
6106
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
6107
|
+
<section class="pf-c-menu__group">
|
|
6108
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
6109
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6110
|
+
<button
|
|
6111
|
+
class="pf-c-menu__item"
|
|
6112
|
+
type="button"
|
|
6113
|
+
role="menuitem"
|
|
6114
|
+
aria-expanded="false"
|
|
6115
|
+
>
|
|
6116
|
+
<span class="pf-c-menu__item-main">
|
|
6117
|
+
<span class="pf-c-menu__item-icon">
|
|
6118
|
+
<i
|
|
6119
|
+
class="fas fa-fw fa-cog"
|
|
6120
|
+
aria-hidden="true"
|
|
6121
|
+
></i>
|
|
6122
|
+
</span>
|
|
6123
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
6124
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
6125
|
+
<i class="fas fa-angle-right"></i>
|
|
6126
|
+
</span>
|
|
6127
|
+
</span>
|
|
6128
|
+
</button>
|
|
6129
|
+
<div class="pf-c-menu" hidden>
|
|
6130
|
+
<div class="pf-c-menu__content">
|
|
6131
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
6132
|
+
<li
|
|
6133
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
6134
|
+
role="none"
|
|
6135
|
+
>
|
|
6136
|
+
<button
|
|
6137
|
+
class="pf-c-menu__item"
|
|
6138
|
+
type="button"
|
|
6139
|
+
role="menuitem"
|
|
6140
|
+
>
|
|
6141
|
+
<span class="pf-c-menu__item-main">
|
|
6142
|
+
<span
|
|
6143
|
+
class="pf-c-menu__item-toggle-icon"
|
|
6144
|
+
>
|
|
6145
|
+
<i class="fas fa-angle-left"></i>
|
|
6146
|
+
</span>
|
|
6147
|
+
<span class="pf-c-menu__item-icon">
|
|
6148
|
+
<i
|
|
6149
|
+
class="fas fa-fw fa-cog"
|
|
6150
|
+
aria-hidden="true"
|
|
6151
|
+
></i>
|
|
6152
|
+
</span>
|
|
6153
|
+
<span
|
|
6154
|
+
class="pf-c-menu__item-text"
|
|
6155
|
+
>Settings</span>
|
|
6156
|
+
</span>
|
|
6157
|
+
</button>
|
|
6158
|
+
</li>
|
|
6159
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
6160
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6161
|
+
<a
|
|
6162
|
+
class="pf-c-menu__item"
|
|
6163
|
+
href="#"
|
|
6164
|
+
role="menuitem"
|
|
6165
|
+
>
|
|
6166
|
+
<span class="pf-c-menu__item-main">
|
|
6167
|
+
<span
|
|
6168
|
+
class="pf-c-menu__item-text"
|
|
6169
|
+
>Customer support</span>
|
|
6170
|
+
</span>
|
|
6171
|
+
</a>
|
|
6172
|
+
</li>
|
|
6173
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6174
|
+
<a
|
|
6175
|
+
class="pf-c-menu__item"
|
|
6176
|
+
href="#"
|
|
6177
|
+
role="menuitem"
|
|
6178
|
+
>
|
|
6179
|
+
<span class="pf-c-menu__item-main">
|
|
6180
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
6181
|
+
</span>
|
|
6182
|
+
</a>
|
|
6183
|
+
</li>
|
|
6184
|
+
</ul>
|
|
6185
|
+
</div>
|
|
6186
|
+
</div>
|
|
6187
|
+
</li>
|
|
6188
|
+
|
|
6189
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6190
|
+
<button
|
|
6191
|
+
class="pf-c-menu__item"
|
|
6192
|
+
type="button"
|
|
6193
|
+
role="menuitem"
|
|
6194
|
+
aria-expanded="false"
|
|
6195
|
+
>
|
|
6196
|
+
<span class="pf-c-menu__item-main">
|
|
6197
|
+
<span class="pf-c-menu__item-icon">
|
|
6198
|
+
<i
|
|
6199
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
6200
|
+
aria-hidden="true"
|
|
6201
|
+
></i>
|
|
6202
|
+
</span>
|
|
6203
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
6204
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
6205
|
+
<i class="fas fa-angle-right"></i>
|
|
6206
|
+
</span>
|
|
6207
|
+
</span>
|
|
6208
|
+
</button>
|
|
6209
|
+
<div class="pf-c-menu" hidden>
|
|
6210
|
+
<div class="pf-c-menu__content">
|
|
6211
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
6212
|
+
<li
|
|
6213
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
6214
|
+
role="none"
|
|
6215
|
+
>
|
|
6216
|
+
<button
|
|
6217
|
+
class="pf-c-menu__item"
|
|
6218
|
+
type="button"
|
|
6219
|
+
role="menuitem"
|
|
6220
|
+
>
|
|
6221
|
+
<span class="pf-c-menu__item-main">
|
|
6222
|
+
<span
|
|
6223
|
+
class="pf-c-menu__item-toggle-icon"
|
|
6224
|
+
>
|
|
6225
|
+
<i class="fas fa-angle-left"></i>
|
|
6226
|
+
</span>
|
|
6227
|
+
<span class="pf-c-menu__item-icon">
|
|
6228
|
+
<i
|
|
6229
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
6230
|
+
aria-hidden="true"
|
|
6231
|
+
></i>
|
|
6232
|
+
</span>
|
|
6233
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
6234
|
+
</span>
|
|
6235
|
+
</button>
|
|
6236
|
+
</li>
|
|
6237
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
6238
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6239
|
+
<a
|
|
6240
|
+
class="pf-c-menu__item"
|
|
6241
|
+
href="#"
|
|
6242
|
+
role="menuitem"
|
|
6243
|
+
>
|
|
6244
|
+
<span class="pf-c-menu__item-main">
|
|
6245
|
+
<span
|
|
6246
|
+
class="pf-c-menu__item-text"
|
|
6247
|
+
>Support options</span>
|
|
6248
|
+
</span>
|
|
6249
|
+
</a>
|
|
6250
|
+
</li>
|
|
6251
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6252
|
+
<a
|
|
6253
|
+
class="pf-c-menu__item"
|
|
6254
|
+
href="#"
|
|
6255
|
+
role="menuitem"
|
|
6256
|
+
>
|
|
6257
|
+
<span class="pf-c-menu__item-main">
|
|
6258
|
+
<span
|
|
6259
|
+
class="pf-c-menu__item-text"
|
|
6260
|
+
>Open support case</span>
|
|
6261
|
+
</span>
|
|
6262
|
+
</a>
|
|
6263
|
+
</li>
|
|
6264
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6265
|
+
<a
|
|
6266
|
+
class="pf-c-menu__item"
|
|
6267
|
+
href="#"
|
|
6268
|
+
role="menuitem"
|
|
6269
|
+
>
|
|
6270
|
+
<span class="pf-c-menu__item-main">
|
|
6271
|
+
<span
|
|
6272
|
+
class="pf-c-menu__item-text"
|
|
6273
|
+
>API documentation</span>
|
|
6274
|
+
</span>
|
|
6275
|
+
</a>
|
|
6276
|
+
</li>
|
|
6277
|
+
</ul>
|
|
6278
|
+
</div>
|
|
6279
|
+
</div>
|
|
6280
|
+
</li>
|
|
6281
|
+
|
|
6282
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6283
|
+
<button
|
|
6284
|
+
class="pf-c-menu__item"
|
|
6285
|
+
type="button"
|
|
6286
|
+
role="menuitem"
|
|
6287
|
+
>
|
|
6288
|
+
<span class="pf-c-menu__item-main">
|
|
6289
|
+
<span class="pf-c-menu__item-icon">
|
|
6290
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
6291
|
+
</span>
|
|
6292
|
+
<span
|
|
6293
|
+
class="pf-c-menu__item-text"
|
|
6294
|
+
>Application launcher</span>
|
|
6295
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
6296
|
+
<i class="fas fa-angle-right"></i>
|
|
6297
|
+
</span>
|
|
6298
|
+
</span>
|
|
6299
|
+
</button>
|
|
6300
|
+
<div class="pf-c-menu" hidden>
|
|
6301
|
+
<div class="pf-c-menu__header">
|
|
6302
|
+
<button
|
|
6303
|
+
class="pf-c-menu__item"
|
|
6304
|
+
type="button"
|
|
6305
|
+
role="menuitem"
|
|
6306
|
+
>
|
|
6307
|
+
<span class="pf-c-menu__item-main">
|
|
6308
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
6309
|
+
<i class="fas fa-angle-left"></i>
|
|
6310
|
+
</span>
|
|
6311
|
+
<span class="pf-c-menu__item-icon">
|
|
6312
|
+
<i
|
|
6313
|
+
class="fas fa-fw fa-th"
|
|
6314
|
+
aria-hidden="true"
|
|
6315
|
+
></i>
|
|
6316
|
+
</span>
|
|
6317
|
+
<span
|
|
6318
|
+
class="pf-c-menu__item-text"
|
|
6319
|
+
>Application launcher</span>
|
|
6320
|
+
</span>
|
|
6321
|
+
</button>
|
|
6322
|
+
</div>
|
|
6323
|
+
<div class="pf-c-menu__search">
|
|
6324
|
+
<div class="pf-c-menu__search-input">
|
|
6325
|
+
<div class="pf-c-search-input">
|
|
6326
|
+
<div class="pf-c-search-input__bar">
|
|
6327
|
+
<span class="pf-c-search-input__text">
|
|
6328
|
+
<span class="pf-c-search-input__icon">
|
|
6329
|
+
<i
|
|
6330
|
+
class="fas fa-search fa-fw"
|
|
6331
|
+
aria-hidden="true"
|
|
6332
|
+
></i>
|
|
6333
|
+
</span>
|
|
6334
|
+
<input
|
|
6335
|
+
class="pf-c-search-input__text-input"
|
|
6336
|
+
type="text"
|
|
6337
|
+
placeholder="Search"
|
|
6338
|
+
aria-label="Search"
|
|
6339
|
+
/>
|
|
6340
|
+
</span>
|
|
6341
|
+
</div>
|
|
6342
|
+
</div>
|
|
6343
|
+
</div>
|
|
6344
|
+
</div>
|
|
6345
|
+
<hr class="pf-c-divider" />
|
|
6346
|
+
<section class="pf-c-menu__group">
|
|
6347
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
6348
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
6349
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6350
|
+
<a
|
|
6351
|
+
class="pf-c-menu__item"
|
|
6352
|
+
href="#"
|
|
6353
|
+
role="menuitem"
|
|
6354
|
+
>
|
|
6355
|
+
<span class="pf-c-menu__item-main">
|
|
6356
|
+
<span
|
|
6357
|
+
class="pf-c-menu__item-text"
|
|
6358
|
+
>Link 1</span>
|
|
6359
|
+
</span>
|
|
6360
|
+
</a>
|
|
6361
|
+
<button
|
|
6362
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
6363
|
+
type="button"
|
|
6364
|
+
aria-label="Starred"
|
|
6365
|
+
>
|
|
6366
|
+
<span class="pf-c-menu__item-action-icon">
|
|
6367
|
+
<i
|
|
6368
|
+
class="fas fa-star"
|
|
6369
|
+
aria-hidden="true"
|
|
6370
|
+
></i>
|
|
6371
|
+
</span>
|
|
6372
|
+
</button>
|
|
6373
|
+
</li>
|
|
6374
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6375
|
+
<a
|
|
6376
|
+
class="pf-c-menu__item"
|
|
6377
|
+
href="#"
|
|
6378
|
+
role="menuitem"
|
|
6379
|
+
target="_blank"
|
|
6380
|
+
>
|
|
6381
|
+
<span class="pf-c-menu__item-main">
|
|
6382
|
+
<span
|
|
6383
|
+
class="pf-c-menu__item-text"
|
|
6384
|
+
>Link 2</span>
|
|
6385
|
+
<span
|
|
6386
|
+
class="pf-c-menu__item-external-icon"
|
|
6387
|
+
>
|
|
6388
|
+
<i
|
|
6389
|
+
class="fas fa-external-link-alt"
|
|
6390
|
+
aria-hidden="true"
|
|
6391
|
+
></i>
|
|
6392
|
+
</span>
|
|
6393
|
+
<span
|
|
6394
|
+
class="pf-screen-reader"
|
|
6395
|
+
>(opens new window)</span>
|
|
6396
|
+
</span>
|
|
6397
|
+
</a>
|
|
6398
|
+
<button
|
|
6399
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
6400
|
+
type="button"
|
|
6401
|
+
aria-label="Not starred"
|
|
6402
|
+
>
|
|
6403
|
+
<span class="pf-c-menu__item-action-icon">
|
|
6404
|
+
<i
|
|
6405
|
+
class="fas fa-star"
|
|
6406
|
+
aria-hidden="true"
|
|
6407
|
+
></i>
|
|
6408
|
+
</span>
|
|
6409
|
+
</button>
|
|
6410
|
+
</li>
|
|
6411
|
+
</ul>
|
|
6412
|
+
</section>
|
|
6413
|
+
<hr class="pf-c-divider" />
|
|
6414
|
+
<section class="pf-c-menu__group">
|
|
6415
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
6416
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
6417
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6418
|
+
<a
|
|
6419
|
+
class="pf-c-menu__item"
|
|
6420
|
+
href="#"
|
|
6421
|
+
role="menuitem"
|
|
6422
|
+
>
|
|
6423
|
+
<span class="pf-c-menu__item-main">
|
|
6424
|
+
<span
|
|
6425
|
+
class="pf-c-menu__item-text"
|
|
6426
|
+
>Link 1</span>
|
|
6427
|
+
</span>
|
|
6428
|
+
</a>
|
|
6429
|
+
<button
|
|
6430
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
6431
|
+
type="button"
|
|
6432
|
+
aria-label="Not starred"
|
|
6433
|
+
>
|
|
6434
|
+
<span class="pf-c-menu__item-action-icon">
|
|
6435
|
+
<i
|
|
6436
|
+
class="fas fa-star"
|
|
6437
|
+
aria-hidden="true"
|
|
6438
|
+
></i>
|
|
6439
|
+
</span>
|
|
6440
|
+
</button>
|
|
6441
|
+
</li>
|
|
6442
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
6443
|
+
<a
|
|
6444
|
+
class="pf-c-menu__item"
|
|
6445
|
+
href="#"
|
|
6446
|
+
role="menuitem"
|
|
6447
|
+
target="_blank"
|
|
6448
|
+
>
|
|
6449
|
+
<span class="pf-c-menu__item-main">
|
|
6450
|
+
<span
|
|
6451
|
+
class="pf-c-menu__item-text"
|
|
6452
|
+
>Link 2</span>
|
|
6453
|
+
<span
|
|
6454
|
+
class="pf-c-menu__item-external-icon"
|
|
6455
|
+
>
|
|
6456
|
+
<i
|
|
6457
|
+
class="fas fa-external-link-alt"
|
|
6458
|
+
aria-hidden="true"
|
|
6459
|
+
></i>
|
|
6460
|
+
</span>
|
|
6461
|
+
<span
|
|
6462
|
+
class="pf-screen-reader"
|
|
6463
|
+
>(opens new window)</span>
|
|
6464
|
+
</span>
|
|
6465
|
+
</a>
|
|
6466
|
+
<button
|
|
6467
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
6468
|
+
type="button"
|
|
6469
|
+
aria-label="Starred"
|
|
6470
|
+
>
|
|
6471
|
+
<span class="pf-c-menu__item-action-icon">
|
|
6472
|
+
<i
|
|
6473
|
+
class="fas fa-star"
|
|
6474
|
+
aria-hidden="true"
|
|
6475
|
+
></i>
|
|
6476
|
+
</span>
|
|
6477
|
+
</button>
|
|
6478
|
+
</li>
|
|
6479
|
+
</ul>
|
|
6480
|
+
</section>
|
|
6481
|
+
</div>
|
|
6482
|
+
</li>
|
|
6483
|
+
</ul>
|
|
6484
|
+
</section>
|
|
6485
|
+
</div>
|
|
6486
|
+
</div>
|
|
6487
|
+
</div>
|
|
6488
|
+
</div>
|
|
6489
|
+
</div>
|
|
6490
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
6491
|
+
<div
|
|
6492
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
6493
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
6494
|
+
>
|
|
6495
|
+
<button
|
|
6496
|
+
class="pf-c-dropdown__toggle"
|
|
6497
|
+
id="wizard-with-drawer-in-page-example-masthead-profile-button"
|
|
6498
|
+
aria-expanded="false"
|
|
6499
|
+
type="button"
|
|
6500
|
+
>
|
|
6501
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
6502
|
+
<img
|
|
6503
|
+
class="pf-c-avatar"
|
|
6504
|
+
src="/assets/images/img_avatar.svg"
|
|
6505
|
+
alt="Avatar image"
|
|
6506
|
+
/>
|
|
6507
|
+
</span>
|
|
6508
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
6509
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
6510
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
6511
|
+
</span>
|
|
6512
|
+
</button>
|
|
6513
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
6514
|
+
<section class="pf-c-dropdown__group">
|
|
6515
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
6516
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
6517
|
+
<div>123456789</div>
|
|
6518
|
+
</div>
|
|
6519
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
6520
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
6521
|
+
<div>mshaksho@redhat.com</div>
|
|
6522
|
+
</div>
|
|
6523
|
+
</section>
|
|
6524
|
+
<hr class="pf-c-divider" />
|
|
6525
|
+
<section class="pf-c-dropdown__group">
|
|
6526
|
+
<ul>
|
|
6527
|
+
<li>
|
|
6528
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
6529
|
+
</li>
|
|
6530
|
+
<li>
|
|
6531
|
+
<a
|
|
6532
|
+
class="pf-c-dropdown__menu-item"
|
|
6533
|
+
href="#"
|
|
6534
|
+
>User management</a>
|
|
6535
|
+
</li>
|
|
6536
|
+
<li>
|
|
6537
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
6538
|
+
</li>
|
|
6539
|
+
</ul>
|
|
6540
|
+
</section>
|
|
6541
|
+
</div>
|
|
6542
|
+
</div>
|
|
6543
|
+
</div>
|
|
6544
|
+
</div>
|
|
6545
|
+
</div>
|
|
6546
|
+
</div>
|
|
6547
|
+
</div>
|
|
6548
|
+
</header>
|
|
6549
|
+
<div class="pf-c-page__sidebar">
|
|
6550
|
+
<div class="pf-c-page__sidebar-body">
|
|
6551
|
+
<nav
|
|
6552
|
+
class="pf-c-nav"
|
|
6553
|
+
id="wizard-with-drawer-in-page-example-primary-nav"
|
|
6554
|
+
aria-label="Global"
|
|
6555
|
+
>
|
|
6556
|
+
<ul class="pf-c-nav__list">
|
|
6557
|
+
<li class="pf-c-nav__item">
|
|
6558
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
6559
|
+
</li>
|
|
6560
|
+
<li class="pf-c-nav__item">
|
|
6561
|
+
<a
|
|
6562
|
+
href="#"
|
|
6563
|
+
class="pf-c-nav__link pf-m-current"
|
|
6564
|
+
aria-current="page"
|
|
6565
|
+
>Policy</a>
|
|
6566
|
+
</li>
|
|
6567
|
+
<li class="pf-c-nav__item">
|
|
6568
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
6569
|
+
</li>
|
|
6570
|
+
<li class="pf-c-nav__item">
|
|
6571
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
6572
|
+
</li>
|
|
6573
|
+
<li class="pf-c-nav__item">
|
|
6574
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
6575
|
+
</li>
|
|
6576
|
+
</ul>
|
|
6577
|
+
</nav>
|
|
6578
|
+
</div>
|
|
6579
|
+
</div>
|
|
6580
|
+
<main
|
|
6581
|
+
class="pf-c-page__main"
|
|
6582
|
+
tabindex="-1"
|
|
6583
|
+
id="main-content-wizard-with-drawer-in-page-example"
|
|
6584
|
+
>
|
|
6585
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
6586
|
+
<div class="pf-c-page__main-body">
|
|
6587
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
6588
|
+
<ol class="pf-c-breadcrumb__list">
|
|
6589
|
+
<li class="pf-c-breadcrumb__item">
|
|
6590
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
6591
|
+
</li>
|
|
6592
|
+
<li class="pf-c-breadcrumb__item">
|
|
6593
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
6594
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6595
|
+
</span>
|
|
6596
|
+
|
|
6597
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
6598
|
+
</li>
|
|
6599
|
+
<li class="pf-c-breadcrumb__item">
|
|
6600
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
6601
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6602
|
+
</span>
|
|
6603
|
+
|
|
6604
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
6605
|
+
</li>
|
|
6606
|
+
<li class="pf-c-breadcrumb__item">
|
|
6607
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
6608
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
6609
|
+
</span>
|
|
6610
|
+
|
|
6611
|
+
<a
|
|
6612
|
+
href="#"
|
|
6613
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
6614
|
+
aria-current="page"
|
|
6615
|
+
>Section landing</a>
|
|
6616
|
+
</li>
|
|
6617
|
+
</ol>
|
|
6618
|
+
</nav>
|
|
6619
|
+
</div>
|
|
6620
|
+
</section>
|
|
6621
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
6622
|
+
<div class="pf-c-page__main-body">
|
|
6623
|
+
<div class="pf-c-content">
|
|
6624
|
+
<h1>Main title</h1>
|
|
6625
|
+
<p>This is a full page demo.</p>
|
|
6626
|
+
</div>
|
|
6627
|
+
</div>
|
|
6628
|
+
</section>
|
|
6629
|
+
|
|
6630
|
+
<section class="pf-c-page__main-wizard pf-m-limit-width pf-m-light-200">
|
|
6631
|
+
<div class="pf-c-page__main-body">
|
|
6632
|
+
<div class="pf-c-wizard">
|
|
6633
|
+
<button
|
|
6634
|
+
aria-label="Wizard Header Toggle"
|
|
6635
|
+
class="pf-c-wizard__toggle"
|
|
6636
|
+
aria-expanded="false"
|
|
6637
|
+
>
|
|
6638
|
+
<span class="pf-c-wizard__toggle-list">
|
|
6639
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
6640
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
6641
|
+
Configuration
|
|
6642
|
+
<i
|
|
6643
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
6644
|
+
aria-hidden="true"
|
|
6645
|
+
></i>
|
|
6646
|
+
</span>
|
|
6647
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
6648
|
+
</span>
|
|
6649
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
6650
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
6651
|
+
</span>
|
|
6652
|
+
</button>
|
|
6653
|
+
<div class="pf-c-drawer pf-m-expanded pf-m-inline">
|
|
6654
|
+
<div class="pf-c-drawer__main">
|
|
6655
|
+
<div class="pf-c-drawer__content">
|
|
6656
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
6657
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
6658
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
6659
|
+
<div class="pf-c-wizard__main-body">
|
|
6660
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
6661
|
+
<ol class="pf-c-wizard__nav-list">
|
|
6662
|
+
<li class="pf-c-wizard__nav-item">
|
|
6663
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
6664
|
+
</li>
|
|
6665
|
+
<li class="pf-c-wizard__nav-item">
|
|
6666
|
+
<button
|
|
6667
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
6668
|
+
>Configuration</button>
|
|
6669
|
+
<ol class="pf-c-wizard__nav-list">
|
|
6670
|
+
<li class="pf-c-wizard__nav-item">
|
|
6671
|
+
<button
|
|
6672
|
+
class="pf-c-wizard__nav-link"
|
|
6673
|
+
>Substep A</button>
|
|
6674
|
+
</li>
|
|
6675
|
+
<li class="pf-c-wizard__nav-item">
|
|
6676
|
+
<button
|
|
6677
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
6678
|
+
aria-current="page"
|
|
6679
|
+
>Substep B</button>
|
|
6680
|
+
</li>
|
|
6681
|
+
<li class="pf-c-wizard__nav-item">
|
|
6682
|
+
<button
|
|
6683
|
+
class="pf-c-wizard__nav-link"
|
|
6684
|
+
>Substep C</button>
|
|
6685
|
+
</li>
|
|
6686
|
+
</ol>
|
|
6687
|
+
</li>
|
|
6688
|
+
<li class="pf-c-wizard__nav-item">
|
|
6689
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
6690
|
+
</li>
|
|
6691
|
+
<li class="pf-c-wizard__nav-item">
|
|
6692
|
+
<button
|
|
6693
|
+
class="pf-c-wizard__nav-link"
|
|
6694
|
+
disabled
|
|
6695
|
+
>Review</button>
|
|
6696
|
+
</li>
|
|
6697
|
+
</ol>
|
|
6698
|
+
</nav>
|
|
6699
|
+
<form novalidate class="pf-c-form">
|
|
6700
|
+
<div class="pf-c-form__group">
|
|
6701
|
+
<div class="pf-c-form__group-label">
|
|
6702
|
+
<label
|
|
6703
|
+
class="pf-c-form__label"
|
|
6704
|
+
for="-form-field1"
|
|
6705
|
+
>
|
|
6706
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
6707
|
+
<span
|
|
6708
|
+
class="pf-c-form__label-required"
|
|
6709
|
+
aria-hidden="true"
|
|
6710
|
+
>*</span>
|
|
6711
|
+
</label>
|
|
6712
|
+
</div>
|
|
6713
|
+
<div class="pf-c-form__group-control">
|
|
6714
|
+
<input
|
|
6715
|
+
class="pf-c-form-control"
|
|
6716
|
+
required
|
|
6717
|
+
type="text"
|
|
6718
|
+
id="-form-field1"
|
|
6719
|
+
name="-form-field1"
|
|
6720
|
+
/>
|
|
6721
|
+
</div>
|
|
6722
|
+
</div>
|
|
6723
|
+
<div class="pf-c-form__group">
|
|
6724
|
+
<div class="pf-c-form__group-label">
|
|
6725
|
+
<label
|
|
6726
|
+
class="pf-c-form__label"
|
|
6727
|
+
for="-form-field2"
|
|
6728
|
+
>
|
|
6729
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
6730
|
+
<span
|
|
6731
|
+
class="pf-c-form__label-required"
|
|
6732
|
+
aria-hidden="true"
|
|
6733
|
+
>*</span>
|
|
6734
|
+
</label>
|
|
6735
|
+
</div>
|
|
6736
|
+
<div class="pf-c-form__group-control">
|
|
6737
|
+
<input
|
|
6738
|
+
class="pf-c-form-control"
|
|
6739
|
+
required
|
|
6740
|
+
type="text"
|
|
6741
|
+
id="-form-field2"
|
|
6742
|
+
name="-form-field2"
|
|
6743
|
+
/>
|
|
6744
|
+
</div>
|
|
6745
|
+
</div>
|
|
6746
|
+
<div class="pf-c-form__group">
|
|
6747
|
+
<div class="pf-c-form__group-label">
|
|
6748
|
+
<label
|
|
6749
|
+
class="pf-c-form__label"
|
|
6750
|
+
for="-form-field3"
|
|
6751
|
+
>
|
|
6752
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
6753
|
+
<span
|
|
6754
|
+
class="pf-c-form__label-required"
|
|
6755
|
+
aria-hidden="true"
|
|
6756
|
+
>*</span>
|
|
6757
|
+
</label>
|
|
6758
|
+
</div>
|
|
6759
|
+
<div class="pf-c-form__group-control">
|
|
6760
|
+
<input
|
|
6761
|
+
class="pf-c-form-control"
|
|
6762
|
+
required
|
|
6763
|
+
type="text"
|
|
6764
|
+
id="-form-field3"
|
|
6765
|
+
name="-form-field3"
|
|
6766
|
+
/>
|
|
6767
|
+
</div>
|
|
6768
|
+
</div>
|
|
6769
|
+
<div class="pf-c-form__group">
|
|
6770
|
+
<div class="pf-c-form__group-label">
|
|
6771
|
+
<label
|
|
6772
|
+
class="pf-c-form__label"
|
|
6773
|
+
for="-form-field4"
|
|
6774
|
+
>
|
|
6775
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
6776
|
+
<span
|
|
6777
|
+
class="pf-c-form__label-required"
|
|
6778
|
+
aria-hidden="true"
|
|
6779
|
+
>*</span>
|
|
6780
|
+
</label>
|
|
6781
|
+
</div>
|
|
6782
|
+
<div class="pf-c-form__group-control">
|
|
6783
|
+
<input
|
|
6784
|
+
class="pf-c-form-control"
|
|
6785
|
+
required
|
|
6786
|
+
type="text"
|
|
6787
|
+
id="-form-field4"
|
|
6788
|
+
name="-form-field4"
|
|
6789
|
+
/>
|
|
6790
|
+
</div>
|
|
6791
|
+
</div>
|
|
6792
|
+
<div class="pf-c-form__group">
|
|
6793
|
+
<div class="pf-c-form__group-label">
|
|
6794
|
+
<label
|
|
6795
|
+
class="pf-c-form__label"
|
|
6796
|
+
for="-form-field5"
|
|
6797
|
+
>
|
|
6798
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
6799
|
+
<span
|
|
6800
|
+
class="pf-c-form__label-required"
|
|
6801
|
+
aria-hidden="true"
|
|
6802
|
+
>*</span>
|
|
6803
|
+
</label>
|
|
6804
|
+
</div>
|
|
6805
|
+
<div class="pf-c-form__group-control">
|
|
6806
|
+
<input
|
|
6807
|
+
class="pf-c-form-control"
|
|
6808
|
+
required
|
|
6809
|
+
type="text"
|
|
6810
|
+
id="-form-field5"
|
|
6811
|
+
name="-form-field5"
|
|
6812
|
+
/>
|
|
6813
|
+
</div>
|
|
6814
|
+
</div>
|
|
6815
|
+
<div class="pf-c-form__group">
|
|
6816
|
+
<div class="pf-c-form__group-label">
|
|
6817
|
+
<label
|
|
6818
|
+
class="pf-c-form__label"
|
|
6819
|
+
for="-form-field6"
|
|
6820
|
+
>
|
|
6821
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
6822
|
+
<span
|
|
6823
|
+
class="pf-c-form__label-required"
|
|
6824
|
+
aria-hidden="true"
|
|
6825
|
+
>*</span>
|
|
6826
|
+
</label>
|
|
6827
|
+
</div>
|
|
6828
|
+
<div class="pf-c-form__group-control">
|
|
6829
|
+
<input
|
|
6830
|
+
class="pf-c-form-control"
|
|
6831
|
+
required
|
|
6832
|
+
type="text"
|
|
6833
|
+
id="-form-field6"
|
|
6834
|
+
name="-form-field6"
|
|
6835
|
+
/>
|
|
6836
|
+
</div>
|
|
6837
|
+
</div>
|
|
6838
|
+
<div class="pf-c-form__group">
|
|
6839
|
+
<div class="pf-c-form__group-label">
|
|
6840
|
+
<label
|
|
6841
|
+
class="pf-c-form__label"
|
|
6842
|
+
for="-form-field7"
|
|
6843
|
+
>
|
|
6844
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
6845
|
+
<span
|
|
6846
|
+
class="pf-c-form__label-required"
|
|
6847
|
+
aria-hidden="true"
|
|
6848
|
+
>*</span>
|
|
6849
|
+
</label>
|
|
6850
|
+
</div>
|
|
6851
|
+
<div class="pf-c-form__group-control">
|
|
6852
|
+
<input
|
|
6853
|
+
class="pf-c-form-control"
|
|
6854
|
+
required
|
|
6855
|
+
type="text"
|
|
6856
|
+
id="-form-field7"
|
|
6857
|
+
name="-form-field7"
|
|
6858
|
+
/>
|
|
6859
|
+
</div>
|
|
6860
|
+
</div>
|
|
6861
|
+
</form>
|
|
6862
|
+
</div>
|
|
6863
|
+
</main>
|
|
6864
|
+
</div>
|
|
6865
|
+
<footer class="pf-c-wizard__footer">
|
|
6866
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
6867
|
+
<button
|
|
6868
|
+
class="pf-c-button pf-m-secondary"
|
|
6869
|
+
type="button"
|
|
6870
|
+
>Back</button>
|
|
6871
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
6872
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
6873
|
+
</div>
|
|
6874
|
+
</footer>
|
|
6875
|
+
</div>
|
|
6876
|
+
</div>
|
|
6877
|
+
<div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
|
|
6878
|
+
<div class="pf-c-drawer__body">
|
|
6879
|
+
<div class="pf-c-drawer__head">
|
|
6880
|
+
<h2
|
|
6881
|
+
class="pf-c-title pf-m-xl"
|
|
6882
|
+
>Register with Red Hat connector</h2>
|
|
6883
|
+
<div class="pf-c-drawer__actions">
|
|
6884
|
+
<div class="pf-c-drawer__close">
|
|
6885
|
+
<button
|
|
6886
|
+
class="pf-c-button pf-m-plain"
|
|
6887
|
+
type="button"
|
|
6888
|
+
aria-label="Close drawer panel"
|
|
6889
|
+
>
|
|
6890
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
6891
|
+
</button>
|
|
6892
|
+
</div>
|
|
6893
|
+
</div>
|
|
6894
|
+
</div>
|
|
6895
|
+
</div>
|
|
6896
|
+
<div class="pf-c-drawer__body">
|
|
6897
|
+
<div class="pf-c-content">
|
|
6898
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam porta odio non justo cursus, quis placerat lacus mattis. Praesent orci velit, elementum eu tempus ut, posuere vel lorem. Fusce id tempus ex, et tempus nibh. Nullam laoreet odio tellus, id varius ante euismod id. Phasellus maximus lorem risus, eget facilisis urna hendrerit vel. Duis dapibus venenatis orci, id tristique magna hendrerit et. Aliquam eu lectus nec nisl efficitur euismod.</p>
|
|
6899
|
+
|
|
6900
|
+
<p>Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc auctor tortor eget ex mattis sagittis. Praesent aliquet, sem ut aliquet posuere, ante neque convallis velit, sit amet dictum nisi odio sed purus. Vestibulum congue eros nisl, faucibus sollicitudin nisi rutrum quis. Nam lacus risus, fringilla sed imperdiet sit amet, eleifend id nulla. Pellentesque posuere purus ex, sed ultricies leo vehicula vitae. Pellentesque lacinia, lacus interdum consequat molestie, urna quam rutrum nisi, at rhoncus dolor justo nec ante. Ut semper nisi ipsum, vel varius elit facilisis et. Nulla bibendum elit sed varius suscipit. Curabitur imperdiet ligula at pellentesque pretium. Sed eu porta erat.</p>
|
|
6901
|
+
|
|
6902
|
+
<p>
|
|
6903
|
+
Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
|
|
6904
|
+
<a
|
|
6905
|
+
href="#"
|
|
6906
|
+
>Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
|
|
6907
|
+
</p>
|
|
6908
|
+
<a href="#">
|
|
6909
|
+
<span class="pf-l-flex pf-m-space-items-sm pf-m-nowrap">
|
|
6910
|
+
<span>Learn about Red Hat connector</span>
|
|
6911
|
+
<i class="fas fa-external-link-alt" aria-hidden="true"></i>
|
|
6912
|
+
</span>
|
|
6913
|
+
</a>
|
|
6914
|
+
</div>
|
|
6915
|
+
</div>
|
|
6916
|
+
</div>
|
|
6917
|
+
</div>
|
|
6918
|
+
</div>
|
|
6919
|
+
</div>
|
|
6920
|
+
</div>
|
|
6921
|
+
</section>
|
|
6922
|
+
</main>
|
|
6923
|
+
</div>
|
|
6924
|
+
|
|
6925
|
+
```
|