@patternfly/patternfly 4.200.0 → 4.200.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/components/Wizard/wizard.css +2 -1
- package/components/Wizard/wizard.scss +3 -1
- package/docs/components/Wizard/examples/Wizard.md +59 -57
- package/docs/demos/Wizard/examples/Wizard.md +2581 -275
- package/package.json +1 -1
- package/patternfly-no-reset.css +2 -1
- package/patternfly.css +2 -1
- 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
|
-
### With drawer
|
|
2329
|
+
### With drawer, closed
|
|
2330
2330
|
|
|
2331
2331
|
```html isFullscreen
|
|
2332
|
-
<div class="pf-c-page" id="wizard-with-drawer-example">
|
|
2332
|
+
<div class="pf-c-page" id="wizard-with-drawer-closed-example">
|
|
2333
2333
|
<a
|
|
2334
2334
|
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
2335
|
-
href="#main-content-wizard-with-drawer-example"
|
|
2335
|
+
href="#main-content-wizard-with-drawer-closed-example"
|
|
2336
2336
|
>Skip to content</a>
|
|
2337
|
-
<header class="pf-c-masthead" id="wizard-with-drawer-example-masthead">
|
|
2337
|
+
<header class="pf-c-masthead" id="wizard-with-drawer-closed-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-with-drawer-example-masthead-toolbar"
|
|
2368
|
+
id="wizard-with-drawer-closed-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-with-drawer-example-masthead-icon-group--app-launcher"
|
|
2393
|
+
id="wizard-with-drawer-closed-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-with-drawer-example-masthead-icon-group--app-launcher-button"
|
|
2398
|
+
id="wizard-with-drawer-closed-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-with-drawer-example-masthead-settings-button"
|
|
2538
|
+
id="wizard-with-drawer-closed-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-with-drawer-example-masthead-settings-button"
|
|
2547
|
+
aria-labelledby="wizard-with-drawer-closed-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-with-drawer-example-masthead-help-button"
|
|
2569
|
+
id="wizard-with-drawer-closed-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-with-drawer-example-masthead-help-button"
|
|
2578
|
+
aria-labelledby="wizard-with-drawer-closed-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-with-drawer-example-masthead-profile-button"
|
|
3078
|
+
id="wizard-with-drawer-closed-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-with-drawer-example-primary-nav"
|
|
3134
|
+
id="wizard-with-drawer-closed-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-with-drawer-example"
|
|
3164
|
+
id="main-content-wizard-with-drawer-closed-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">
|
|
@@ -3287,192 +3287,2541 @@ wrapperTag: div
|
|
|
3287
3287
|
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
3288
3288
|
</span>
|
|
3289
3289
|
</button>
|
|
3290
|
-
<div class="pf-c-
|
|
3291
|
-
<div class="pf-c-
|
|
3292
|
-
<
|
|
3293
|
-
<
|
|
3294
|
-
<
|
|
3295
|
-
<
|
|
3290
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
3291
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
3292
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
3293
|
+
<ol class="pf-c-wizard__nav-list">
|
|
3294
|
+
<li class="pf-c-wizard__nav-item">
|
|
3295
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
3296
|
+
</li>
|
|
3297
|
+
<li class="pf-c-wizard__nav-item">
|
|
3298
|
+
<button
|
|
3299
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
3300
|
+
>Configuration</button>
|
|
3301
|
+
<ol class="pf-c-wizard__nav-list">
|
|
3302
|
+
<li class="pf-c-wizard__nav-item">
|
|
3303
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
3304
|
+
</li>
|
|
3305
|
+
<li class="pf-c-wizard__nav-item">
|
|
3306
|
+
<button
|
|
3307
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
3308
|
+
aria-current="page"
|
|
3309
|
+
>Substep B</button>
|
|
3310
|
+
</li>
|
|
3311
|
+
<li class="pf-c-wizard__nav-item">
|
|
3312
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
3313
|
+
</li>
|
|
3314
|
+
</ol>
|
|
3315
|
+
</li>
|
|
3316
|
+
<li class="pf-c-wizard__nav-item">
|
|
3317
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
3318
|
+
</li>
|
|
3319
|
+
<li class="pf-c-wizard__nav-item">
|
|
3320
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
3321
|
+
</li>
|
|
3322
|
+
</ol>
|
|
3323
|
+
</nav>
|
|
3324
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
3325
|
+
<div class="pf-c-drawer pf-m-inline">
|
|
3326
|
+
<div class="pf-c-drawer__main">
|
|
3327
|
+
<div class="pf-c-drawer__content">
|
|
3328
|
+
<div class="pf-c-wizard__main-body">
|
|
3329
|
+
<button
|
|
3330
|
+
class="pf-c-button pf-u-hidden pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
3331
|
+
type="button"
|
|
3332
|
+
>Open drawer</button>
|
|
3333
|
+
<form novalidate class="pf-c-form">
|
|
3334
|
+
<div class="pf-c-form__group">
|
|
3335
|
+
<div class="pf-c-form__group-label">
|
|
3336
|
+
<label class="pf-c-form__label" for="-form-field1">
|
|
3337
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
3338
|
+
<span
|
|
3339
|
+
class="pf-c-form__label-required"
|
|
3340
|
+
aria-hidden="true"
|
|
3341
|
+
>*</span>
|
|
3342
|
+
</label>
|
|
3343
|
+
</div>
|
|
3344
|
+
<div class="pf-c-form__group-control">
|
|
3345
|
+
<input
|
|
3346
|
+
class="pf-c-form-control"
|
|
3347
|
+
required
|
|
3348
|
+
type="text"
|
|
3349
|
+
id="-form-field1"
|
|
3350
|
+
name="-form-field1"
|
|
3351
|
+
/>
|
|
3352
|
+
</div>
|
|
3353
|
+
</div>
|
|
3354
|
+
<div class="pf-c-form__group">
|
|
3355
|
+
<div class="pf-c-form__group-label">
|
|
3356
|
+
<label class="pf-c-form__label" for="-form-field2">
|
|
3357
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
3358
|
+
<span
|
|
3359
|
+
class="pf-c-form__label-required"
|
|
3360
|
+
aria-hidden="true"
|
|
3361
|
+
>*</span>
|
|
3362
|
+
</label>
|
|
3363
|
+
</div>
|
|
3364
|
+
<div class="pf-c-form__group-control">
|
|
3365
|
+
<input
|
|
3366
|
+
class="pf-c-form-control"
|
|
3367
|
+
required
|
|
3368
|
+
type="text"
|
|
3369
|
+
id="-form-field2"
|
|
3370
|
+
name="-form-field2"
|
|
3371
|
+
/>
|
|
3372
|
+
</div>
|
|
3373
|
+
</div>
|
|
3374
|
+
<div class="pf-c-form__group">
|
|
3375
|
+
<div class="pf-c-form__group-label">
|
|
3376
|
+
<label class="pf-c-form__label" for="-form-field3">
|
|
3377
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
3378
|
+
<span
|
|
3379
|
+
class="pf-c-form__label-required"
|
|
3380
|
+
aria-hidden="true"
|
|
3381
|
+
>*</span>
|
|
3382
|
+
</label>
|
|
3383
|
+
</div>
|
|
3384
|
+
<div class="pf-c-form__group-control">
|
|
3385
|
+
<input
|
|
3386
|
+
class="pf-c-form-control"
|
|
3387
|
+
required
|
|
3388
|
+
type="text"
|
|
3389
|
+
id="-form-field3"
|
|
3390
|
+
name="-form-field3"
|
|
3391
|
+
/>
|
|
3392
|
+
</div>
|
|
3393
|
+
</div>
|
|
3394
|
+
<div class="pf-c-form__group">
|
|
3395
|
+
<div class="pf-c-form__group-label">
|
|
3396
|
+
<label class="pf-c-form__label" for="-form-field4">
|
|
3397
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
3398
|
+
<span
|
|
3399
|
+
class="pf-c-form__label-required"
|
|
3400
|
+
aria-hidden="true"
|
|
3401
|
+
>*</span>
|
|
3402
|
+
</label>
|
|
3403
|
+
</div>
|
|
3404
|
+
<div class="pf-c-form__group-control">
|
|
3405
|
+
<input
|
|
3406
|
+
class="pf-c-form-control"
|
|
3407
|
+
required
|
|
3408
|
+
type="text"
|
|
3409
|
+
id="-form-field4"
|
|
3410
|
+
name="-form-field4"
|
|
3411
|
+
/>
|
|
3412
|
+
</div>
|
|
3413
|
+
</div>
|
|
3414
|
+
<div class="pf-c-form__group">
|
|
3415
|
+
<div class="pf-c-form__group-label">
|
|
3416
|
+
<label class="pf-c-form__label" for="-form-field5">
|
|
3417
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
3418
|
+
<span
|
|
3419
|
+
class="pf-c-form__label-required"
|
|
3420
|
+
aria-hidden="true"
|
|
3421
|
+
>*</span>
|
|
3422
|
+
</label>
|
|
3423
|
+
</div>
|
|
3424
|
+
<div class="pf-c-form__group-control">
|
|
3425
|
+
<input
|
|
3426
|
+
class="pf-c-form-control"
|
|
3427
|
+
required
|
|
3428
|
+
type="text"
|
|
3429
|
+
id="-form-field5"
|
|
3430
|
+
name="-form-field5"
|
|
3431
|
+
/>
|
|
3432
|
+
</div>
|
|
3433
|
+
</div>
|
|
3434
|
+
<div class="pf-c-form__group">
|
|
3435
|
+
<div class="pf-c-form__group-label">
|
|
3436
|
+
<label class="pf-c-form__label" for="-form-field6">
|
|
3437
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
3438
|
+
<span
|
|
3439
|
+
class="pf-c-form__label-required"
|
|
3440
|
+
aria-hidden="true"
|
|
3441
|
+
>*</span>
|
|
3442
|
+
</label>
|
|
3443
|
+
</div>
|
|
3444
|
+
<div class="pf-c-form__group-control">
|
|
3445
|
+
<input
|
|
3446
|
+
class="pf-c-form-control"
|
|
3447
|
+
required
|
|
3448
|
+
type="text"
|
|
3449
|
+
id="-form-field6"
|
|
3450
|
+
name="-form-field6"
|
|
3451
|
+
/>
|
|
3452
|
+
</div>
|
|
3453
|
+
</div>
|
|
3454
|
+
<div class="pf-c-form__group">
|
|
3455
|
+
<div class="pf-c-form__group-label">
|
|
3456
|
+
<label class="pf-c-form__label" for="-form-field7">
|
|
3457
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
3458
|
+
<span
|
|
3459
|
+
class="pf-c-form__label-required"
|
|
3460
|
+
aria-hidden="true"
|
|
3461
|
+
>*</span>
|
|
3462
|
+
</label>
|
|
3463
|
+
</div>
|
|
3464
|
+
<div class="pf-c-form__group-control">
|
|
3465
|
+
<input
|
|
3466
|
+
class="pf-c-form-control"
|
|
3467
|
+
required
|
|
3468
|
+
type="text"
|
|
3469
|
+
id="-form-field7"
|
|
3470
|
+
name="-form-field7"
|
|
3471
|
+
/>
|
|
3472
|
+
</div>
|
|
3473
|
+
</div>
|
|
3474
|
+
</form>
|
|
3475
|
+
</div>
|
|
3476
|
+
</div>
|
|
3477
|
+
<div
|
|
3478
|
+
class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33"
|
|
3479
|
+
hidden
|
|
3480
|
+
>
|
|
3481
|
+
<div class="pf-c-drawer__body">
|
|
3482
|
+
<div class="pf-c-drawer__head">
|
|
3483
|
+
<h2
|
|
3484
|
+
class="pf-c-title pf-m-xl"
|
|
3485
|
+
>Register with Red Hat connector</h2>
|
|
3486
|
+
<div class="pf-c-drawer__actions">
|
|
3487
|
+
<div class="pf-c-drawer__close">
|
|
3488
|
+
<button
|
|
3489
|
+
class="pf-c-button pf-m-plain"
|
|
3490
|
+
type="button"
|
|
3491
|
+
aria-label="Close drawer panel"
|
|
3492
|
+
>
|
|
3493
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
3494
|
+
</button>
|
|
3495
|
+
</div>
|
|
3496
|
+
</div>
|
|
3497
|
+
</div>
|
|
3498
|
+
</div>
|
|
3499
|
+
<div class="pf-c-drawer__body">
|
|
3500
|
+
<div class="pf-c-content">
|
|
3501
|
+
<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>
|
|
3502
|
+
|
|
3503
|
+
<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>
|
|
3504
|
+
|
|
3505
|
+
<p>
|
|
3506
|
+
Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
|
|
3507
|
+
<a
|
|
3508
|
+
href="#"
|
|
3509
|
+
>Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
|
|
3510
|
+
</p>
|
|
3511
|
+
<a href="#">
|
|
3512
|
+
<span
|
|
3513
|
+
class="pf-l-flex pf-m-space-items-sm pf-m-nowrap"
|
|
3514
|
+
>
|
|
3515
|
+
<span>Learn about Red Hat connector</span>
|
|
3516
|
+
<i
|
|
3517
|
+
class="fas fa-external-link-alt"
|
|
3518
|
+
aria-hidden="true"
|
|
3519
|
+
></i>
|
|
3520
|
+
</span>
|
|
3521
|
+
</a>
|
|
3522
|
+
</div>
|
|
3523
|
+
</div>
|
|
3524
|
+
</div>
|
|
3525
|
+
</div>
|
|
3526
|
+
<footer class="pf-c-wizard__footer">
|
|
3527
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
3528
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
3529
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
3530
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
3531
|
+
</div>
|
|
3532
|
+
</footer>
|
|
3533
|
+
</div>
|
|
3534
|
+
</main>
|
|
3535
|
+
</div>
|
|
3536
|
+
</div>
|
|
3537
|
+
</div>
|
|
3538
|
+
</div>
|
|
3539
|
+
</div>
|
|
3540
|
+
</div>
|
|
3541
|
+
|
|
3542
|
+
```
|
|
3543
|
+
|
|
3544
|
+
### With drawer, expanded
|
|
3545
|
+
|
|
3546
|
+
```html isFullscreen
|
|
3547
|
+
<div class="pf-c-page" id="wizard-with-drawer-expanded-example">
|
|
3548
|
+
<a
|
|
3549
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
3550
|
+
href="#main-content-wizard-with-drawer-expanded-example"
|
|
3551
|
+
>Skip to content</a>
|
|
3552
|
+
<header
|
|
3553
|
+
class="pf-c-masthead"
|
|
3554
|
+
id="wizard-with-drawer-expanded-example-masthead"
|
|
3555
|
+
>
|
|
3556
|
+
<span class="pf-c-masthead__toggle">
|
|
3557
|
+
<button
|
|
3558
|
+
class="pf-c-button pf-m-plain"
|
|
3559
|
+
type="button"
|
|
3560
|
+
aria-label="Global navigation"
|
|
3561
|
+
>
|
|
3562
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
3563
|
+
</button>
|
|
3564
|
+
</span>
|
|
3565
|
+
<div class="pf-c-masthead__main">
|
|
3566
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
3567
|
+
<picture
|
|
3568
|
+
class="pf-c-brand pf-m-picture"
|
|
3569
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
3570
|
+
>
|
|
3571
|
+
<source
|
|
3572
|
+
media="(min-width: 768px)"
|
|
3573
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
3574
|
+
/>
|
|
3575
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
3576
|
+
<img
|
|
3577
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
3578
|
+
alt="Fallback patternFly default logo"
|
|
3579
|
+
/>
|
|
3580
|
+
</picture>
|
|
3581
|
+
</a>
|
|
3582
|
+
</div>
|
|
3583
|
+
<div class="pf-c-masthead__content">
|
|
3584
|
+
<div
|
|
3585
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3586
|
+
id="wizard-with-drawer-expanded-example-masthead-toolbar"
|
|
3587
|
+
>
|
|
3588
|
+
<div class="pf-c-toolbar__content">
|
|
3589
|
+
<div class="pf-c-toolbar__content-section">
|
|
3590
|
+
<div
|
|
3591
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
3592
|
+
>
|
|
3593
|
+
<div class="pf-c-toolbar__item">
|
|
3594
|
+
<button
|
|
3595
|
+
class="pf-c-button pf-m-plain"
|
|
3596
|
+
type="button"
|
|
3597
|
+
aria-label="Notifications"
|
|
3598
|
+
>
|
|
3599
|
+
<span class="pf-c-notification-badge">
|
|
3600
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
3601
|
+
</span>
|
|
3602
|
+
</button>
|
|
3603
|
+
</div>
|
|
3604
|
+
<div
|
|
3605
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
3606
|
+
>
|
|
3607
|
+
<div class="pf-c-toolbar__item">
|
|
3608
|
+
<nav
|
|
3609
|
+
class="pf-c-app-launcher"
|
|
3610
|
+
aria-label="Application launcher"
|
|
3611
|
+
id="wizard-with-drawer-expanded-example-masthead-icon-group--app-launcher"
|
|
3612
|
+
>
|
|
3613
|
+
<button
|
|
3614
|
+
class="pf-c-app-launcher__toggle"
|
|
3615
|
+
type="button"
|
|
3616
|
+
id="wizard-with-drawer-expanded-example-masthead-icon-group--app-launcher-button"
|
|
3617
|
+
aria-expanded="false"
|
|
3618
|
+
aria-label="Application launcher"
|
|
3619
|
+
>
|
|
3620
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
3621
|
+
</button>
|
|
3622
|
+
<div
|
|
3623
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
3624
|
+
hidden
|
|
3625
|
+
>
|
|
3626
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
3627
|
+
<div class="pf-c-search-input">
|
|
3628
|
+
<div class="pf-c-search-input__bar">
|
|
3629
|
+
<span class="pf-c-search-input__text">
|
|
3630
|
+
<span class="pf-c-search-input__icon">
|
|
3631
|
+
<i
|
|
3632
|
+
class="fas fa-search fa-fw"
|
|
3633
|
+
aria-hidden="true"
|
|
3634
|
+
></i>
|
|
3635
|
+
</span>
|
|
3636
|
+
<input
|
|
3637
|
+
class="pf-c-search-input__text-input"
|
|
3638
|
+
type="text"
|
|
3639
|
+
placeholder="Filter by name"
|
|
3640
|
+
aria-label="Filter by name"
|
|
3641
|
+
/>
|
|
3642
|
+
</span>
|
|
3643
|
+
</div>
|
|
3644
|
+
</div>
|
|
3645
|
+
</div>
|
|
3646
|
+
<section class="pf-c-app-launcher__group">
|
|
3647
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
3648
|
+
<ul>
|
|
3649
|
+
<li
|
|
3650
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
3651
|
+
>
|
|
3652
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3653
|
+
Link 1
|
|
3654
|
+
<span
|
|
3655
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3656
|
+
>
|
|
3657
|
+
<i
|
|
3658
|
+
class="fas fa-external-link-alt"
|
|
3659
|
+
aria-hidden="true"
|
|
3660
|
+
></i>
|
|
3661
|
+
</span>
|
|
3662
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3663
|
+
</a>
|
|
3664
|
+
<button
|
|
3665
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3666
|
+
type="button"
|
|
3667
|
+
aria-label="Favorite"
|
|
3668
|
+
>
|
|
3669
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3670
|
+
</button>
|
|
3671
|
+
</li>
|
|
3672
|
+
<li
|
|
3673
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
3674
|
+
>
|
|
3675
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3676
|
+
Link 2
|
|
3677
|
+
<span
|
|
3678
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3679
|
+
>
|
|
3680
|
+
<i
|
|
3681
|
+
class="fas fa-external-link-alt"
|
|
3682
|
+
aria-hidden="true"
|
|
3683
|
+
></i>
|
|
3684
|
+
</span>
|
|
3685
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3686
|
+
</a>
|
|
3687
|
+
<button
|
|
3688
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3689
|
+
type="button"
|
|
3690
|
+
aria-label="Favorite"
|
|
3691
|
+
>
|
|
3692
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3693
|
+
</button>
|
|
3694
|
+
</li>
|
|
3695
|
+
</ul>
|
|
3696
|
+
</section>
|
|
3697
|
+
<hr class="pf-c-divider" />
|
|
3698
|
+
<section class="pf-c-app-launcher__group">
|
|
3699
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
3700
|
+
<ul>
|
|
3701
|
+
<li
|
|
3702
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
3703
|
+
>
|
|
3704
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3705
|
+
Link 1
|
|
3706
|
+
<span
|
|
3707
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3708
|
+
>
|
|
3709
|
+
<i
|
|
3710
|
+
class="fas fa-external-link-alt"
|
|
3711
|
+
aria-hidden="true"
|
|
3712
|
+
></i>
|
|
3713
|
+
</span>
|
|
3714
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3715
|
+
</a>
|
|
3716
|
+
<button
|
|
3717
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3718
|
+
type="button"
|
|
3719
|
+
aria-label="Favorite"
|
|
3720
|
+
>
|
|
3721
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3722
|
+
</button>
|
|
3723
|
+
</li>
|
|
3724
|
+
<li
|
|
3725
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
3726
|
+
>
|
|
3727
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
3728
|
+
Link 2
|
|
3729
|
+
<span
|
|
3730
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
3731
|
+
>
|
|
3732
|
+
<i
|
|
3733
|
+
class="fas fa-external-link-alt"
|
|
3734
|
+
aria-hidden="true"
|
|
3735
|
+
></i>
|
|
3736
|
+
</span>
|
|
3737
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
3738
|
+
</a>
|
|
3739
|
+
<button
|
|
3740
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
3741
|
+
type="button"
|
|
3742
|
+
aria-label="Favorite"
|
|
3743
|
+
>
|
|
3744
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
3745
|
+
</button>
|
|
3746
|
+
</li>
|
|
3747
|
+
</ul>
|
|
3748
|
+
</section>
|
|
3749
|
+
</div>
|
|
3750
|
+
</nav>
|
|
3751
|
+
</div>
|
|
3752
|
+
<div class="pf-c-toolbar__item">
|
|
3753
|
+
<div class="pf-c-dropdown">
|
|
3754
|
+
<button
|
|
3755
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3756
|
+
id="wizard-with-drawer-expanded-example-masthead-settings-button"
|
|
3757
|
+
aria-expanded="false"
|
|
3758
|
+
type="button"
|
|
3759
|
+
aria-label="Settings"
|
|
3760
|
+
>
|
|
3761
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
3762
|
+
</button>
|
|
3763
|
+
<ul
|
|
3764
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3765
|
+
aria-labelledby="wizard-with-drawer-expanded-example-masthead-settings-button"
|
|
3766
|
+
hidden
|
|
3767
|
+
>
|
|
3768
|
+
<li>
|
|
3769
|
+
<button
|
|
3770
|
+
class="pf-c-dropdown__menu-item"
|
|
3771
|
+
type="button"
|
|
3772
|
+
>Settings</button>
|
|
3773
|
+
</li>
|
|
3774
|
+
<li>
|
|
3775
|
+
<button
|
|
3776
|
+
class="pf-c-dropdown__menu-item"
|
|
3777
|
+
type="button"
|
|
3778
|
+
>Use the beta release</button>
|
|
3779
|
+
</li>
|
|
3780
|
+
</ul>
|
|
3781
|
+
</div>
|
|
3782
|
+
</div>
|
|
3783
|
+
<div class="pf-c-toolbar__item">
|
|
3784
|
+
<div class="pf-c-dropdown">
|
|
3785
|
+
<button
|
|
3786
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
3787
|
+
id="wizard-with-drawer-expanded-example-masthead-help-button"
|
|
3788
|
+
aria-expanded="false"
|
|
3789
|
+
type="button"
|
|
3790
|
+
aria-label="Help"
|
|
3791
|
+
>
|
|
3792
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
3793
|
+
</button>
|
|
3794
|
+
<ul
|
|
3795
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
3796
|
+
aria-labelledby="wizard-with-drawer-expanded-example-masthead-help-button"
|
|
3797
|
+
hidden
|
|
3798
|
+
>
|
|
3799
|
+
<li>
|
|
3800
|
+
<button
|
|
3801
|
+
class="pf-c-dropdown__menu-item"
|
|
3802
|
+
type="button"
|
|
3803
|
+
>Support options</button>
|
|
3804
|
+
</li>
|
|
3805
|
+
<li>
|
|
3806
|
+
<button
|
|
3807
|
+
class="pf-c-dropdown__menu-item"
|
|
3808
|
+
type="button"
|
|
3809
|
+
>Open support case</button>
|
|
3810
|
+
</li>
|
|
3811
|
+
<li>
|
|
3812
|
+
<button
|
|
3813
|
+
class="pf-c-dropdown__menu-item"
|
|
3814
|
+
type="button"
|
|
3815
|
+
>API documentation</button>
|
|
3816
|
+
</li>
|
|
3817
|
+
</ul>
|
|
3818
|
+
</div>
|
|
3819
|
+
</div>
|
|
3820
|
+
</div>
|
|
3821
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
3822
|
+
<div class="pf-c-dropdown">
|
|
3823
|
+
<button
|
|
3824
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
3825
|
+
type="button"
|
|
3826
|
+
aria-expanded="false"
|
|
3827
|
+
aria-label="Actions"
|
|
3828
|
+
>
|
|
3829
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
3830
|
+
</button>
|
|
3831
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
3832
|
+
<div class="pf-c-menu__content">
|
|
3833
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
3834
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3835
|
+
<li
|
|
3836
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
3837
|
+
role="none"
|
|
3838
|
+
>
|
|
3839
|
+
<button
|
|
3840
|
+
class="pf-c-menu__item"
|
|
3841
|
+
type="button"
|
|
3842
|
+
disabled
|
|
3843
|
+
role="menuitem"
|
|
3844
|
+
>
|
|
3845
|
+
<span class="pf-c-menu__item-description">
|
|
3846
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
3847
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
3848
|
+
</span>
|
|
3849
|
+
</button>
|
|
3850
|
+
</li>
|
|
3851
|
+
<li
|
|
3852
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
3853
|
+
role="none"
|
|
3854
|
+
>
|
|
3855
|
+
<button
|
|
3856
|
+
class="pf-c-menu__item"
|
|
3857
|
+
type="button"
|
|
3858
|
+
disabled
|
|
3859
|
+
role="menuitem"
|
|
3860
|
+
>
|
|
3861
|
+
<span class="pf-c-menu__item-description">
|
|
3862
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
3863
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
3864
|
+
</span>
|
|
3865
|
+
</button>
|
|
3866
|
+
</li>
|
|
3867
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3868
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3869
|
+
<button
|
|
3870
|
+
class="pf-c-menu__item"
|
|
3871
|
+
type="button"
|
|
3872
|
+
role="menuitem"
|
|
3873
|
+
>
|
|
3874
|
+
<span class="pf-c-menu__item-main">
|
|
3875
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
3876
|
+
</span>
|
|
3877
|
+
</button>
|
|
3878
|
+
</li>
|
|
3879
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3880
|
+
<button
|
|
3881
|
+
class="pf-c-menu__item"
|
|
3882
|
+
type="button"
|
|
3883
|
+
role="menuitem"
|
|
3884
|
+
>
|
|
3885
|
+
<span class="pf-c-menu__item-main">
|
|
3886
|
+
<span
|
|
3887
|
+
class="pf-c-menu__item-text"
|
|
3888
|
+
>User management</span>
|
|
3889
|
+
</span>
|
|
3890
|
+
</button>
|
|
3891
|
+
</li>
|
|
3892
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3893
|
+
<button
|
|
3894
|
+
class="pf-c-menu__item"
|
|
3895
|
+
type="button"
|
|
3896
|
+
role="menuitem"
|
|
3897
|
+
>
|
|
3898
|
+
<span class="pf-c-menu__item-main">
|
|
3899
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
3900
|
+
</span>
|
|
3901
|
+
</button>
|
|
3902
|
+
</li>
|
|
3903
|
+
</ul>
|
|
3904
|
+
</section>
|
|
3905
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
3906
|
+
<section class="pf-c-menu__group">
|
|
3907
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3908
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3909
|
+
<button
|
|
3910
|
+
class="pf-c-menu__item"
|
|
3911
|
+
type="button"
|
|
3912
|
+
role="menuitem"
|
|
3913
|
+
aria-expanded="false"
|
|
3914
|
+
>
|
|
3915
|
+
<span class="pf-c-menu__item-main">
|
|
3916
|
+
<span class="pf-c-menu__item-icon">
|
|
3917
|
+
<i
|
|
3918
|
+
class="fas fa-fw fa-cog"
|
|
3919
|
+
aria-hidden="true"
|
|
3920
|
+
></i>
|
|
3921
|
+
</span>
|
|
3922
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
3923
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
3924
|
+
<i class="fas fa-angle-right"></i>
|
|
3925
|
+
</span>
|
|
3926
|
+
</span>
|
|
3927
|
+
</button>
|
|
3928
|
+
<div class="pf-c-menu" hidden>
|
|
3929
|
+
<div class="pf-c-menu__content">
|
|
3930
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
3931
|
+
<li
|
|
3932
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
3933
|
+
role="none"
|
|
3934
|
+
>
|
|
3935
|
+
<button
|
|
3936
|
+
class="pf-c-menu__item"
|
|
3937
|
+
type="button"
|
|
3938
|
+
role="menuitem"
|
|
3939
|
+
>
|
|
3940
|
+
<span class="pf-c-menu__item-main">
|
|
3941
|
+
<span
|
|
3942
|
+
class="pf-c-menu__item-toggle-icon"
|
|
3943
|
+
>
|
|
3944
|
+
<i class="fas fa-angle-left"></i>
|
|
3945
|
+
</span>
|
|
3946
|
+
<span class="pf-c-menu__item-icon">
|
|
3947
|
+
<i
|
|
3948
|
+
class="fas fa-fw fa-cog"
|
|
3949
|
+
aria-hidden="true"
|
|
3950
|
+
></i>
|
|
3951
|
+
</span>
|
|
3952
|
+
<span
|
|
3953
|
+
class="pf-c-menu__item-text"
|
|
3954
|
+
>Settings</span>
|
|
3955
|
+
</span>
|
|
3956
|
+
</button>
|
|
3957
|
+
</li>
|
|
3958
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
3959
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3960
|
+
<a
|
|
3961
|
+
class="pf-c-menu__item"
|
|
3962
|
+
href="#"
|
|
3963
|
+
role="menuitem"
|
|
3964
|
+
>
|
|
3965
|
+
<span class="pf-c-menu__item-main">
|
|
3966
|
+
<span
|
|
3967
|
+
class="pf-c-menu__item-text"
|
|
3968
|
+
>Customer support</span>
|
|
3969
|
+
</span>
|
|
3970
|
+
</a>
|
|
3971
|
+
</li>
|
|
3972
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3973
|
+
<a
|
|
3974
|
+
class="pf-c-menu__item"
|
|
3975
|
+
href="#"
|
|
3976
|
+
role="menuitem"
|
|
3977
|
+
>
|
|
3978
|
+
<span class="pf-c-menu__item-main">
|
|
3979
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
3980
|
+
</span>
|
|
3981
|
+
</a>
|
|
3982
|
+
</li>
|
|
3983
|
+
</ul>
|
|
3984
|
+
</div>
|
|
3985
|
+
</div>
|
|
3986
|
+
</li>
|
|
3987
|
+
|
|
3988
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
3989
|
+
<button
|
|
3990
|
+
class="pf-c-menu__item"
|
|
3991
|
+
type="button"
|
|
3992
|
+
role="menuitem"
|
|
3993
|
+
aria-expanded="false"
|
|
3994
|
+
>
|
|
3995
|
+
<span class="pf-c-menu__item-main">
|
|
3996
|
+
<span class="pf-c-menu__item-icon">
|
|
3997
|
+
<i
|
|
3998
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
3999
|
+
aria-hidden="true"
|
|
4000
|
+
></i>
|
|
4001
|
+
</span>
|
|
4002
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
4003
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
4004
|
+
<i class="fas fa-angle-right"></i>
|
|
4005
|
+
</span>
|
|
4006
|
+
</span>
|
|
4007
|
+
</button>
|
|
4008
|
+
<div class="pf-c-menu" hidden>
|
|
4009
|
+
<div class="pf-c-menu__content">
|
|
4010
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4011
|
+
<li
|
|
4012
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
4013
|
+
role="none"
|
|
4014
|
+
>
|
|
4015
|
+
<button
|
|
4016
|
+
class="pf-c-menu__item"
|
|
4017
|
+
type="button"
|
|
4018
|
+
role="menuitem"
|
|
4019
|
+
>
|
|
4020
|
+
<span class="pf-c-menu__item-main">
|
|
4021
|
+
<span
|
|
4022
|
+
class="pf-c-menu__item-toggle-icon"
|
|
4023
|
+
>
|
|
4024
|
+
<i class="fas fa-angle-left"></i>
|
|
4025
|
+
</span>
|
|
4026
|
+
<span class="pf-c-menu__item-icon">
|
|
4027
|
+
<i
|
|
4028
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
4029
|
+
aria-hidden="true"
|
|
4030
|
+
></i>
|
|
4031
|
+
</span>
|
|
4032
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
4033
|
+
</span>
|
|
4034
|
+
</button>
|
|
4035
|
+
</li>
|
|
4036
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
4037
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4038
|
+
<a
|
|
4039
|
+
class="pf-c-menu__item"
|
|
4040
|
+
href="#"
|
|
4041
|
+
role="menuitem"
|
|
4042
|
+
>
|
|
4043
|
+
<span class="pf-c-menu__item-main">
|
|
4044
|
+
<span
|
|
4045
|
+
class="pf-c-menu__item-text"
|
|
4046
|
+
>Support options</span>
|
|
4047
|
+
</span>
|
|
4048
|
+
</a>
|
|
4049
|
+
</li>
|
|
4050
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4051
|
+
<a
|
|
4052
|
+
class="pf-c-menu__item"
|
|
4053
|
+
href="#"
|
|
4054
|
+
role="menuitem"
|
|
4055
|
+
>
|
|
4056
|
+
<span class="pf-c-menu__item-main">
|
|
4057
|
+
<span
|
|
4058
|
+
class="pf-c-menu__item-text"
|
|
4059
|
+
>Open support case</span>
|
|
4060
|
+
</span>
|
|
4061
|
+
</a>
|
|
4062
|
+
</li>
|
|
4063
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4064
|
+
<a
|
|
4065
|
+
class="pf-c-menu__item"
|
|
4066
|
+
href="#"
|
|
4067
|
+
role="menuitem"
|
|
4068
|
+
>
|
|
4069
|
+
<span class="pf-c-menu__item-main">
|
|
4070
|
+
<span
|
|
4071
|
+
class="pf-c-menu__item-text"
|
|
4072
|
+
>API documentation</span>
|
|
4073
|
+
</span>
|
|
4074
|
+
</a>
|
|
4075
|
+
</li>
|
|
4076
|
+
</ul>
|
|
4077
|
+
</div>
|
|
4078
|
+
</div>
|
|
4079
|
+
</li>
|
|
4080
|
+
|
|
4081
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4082
|
+
<button
|
|
4083
|
+
class="pf-c-menu__item"
|
|
4084
|
+
type="button"
|
|
4085
|
+
role="menuitem"
|
|
4086
|
+
>
|
|
4087
|
+
<span class="pf-c-menu__item-main">
|
|
4088
|
+
<span class="pf-c-menu__item-icon">
|
|
4089
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
4090
|
+
</span>
|
|
4091
|
+
<span
|
|
4092
|
+
class="pf-c-menu__item-text"
|
|
4093
|
+
>Application launcher</span>
|
|
4094
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
4095
|
+
<i class="fas fa-angle-right"></i>
|
|
4096
|
+
</span>
|
|
4097
|
+
</span>
|
|
4098
|
+
</button>
|
|
4099
|
+
<div class="pf-c-menu" hidden>
|
|
4100
|
+
<div class="pf-c-menu__header">
|
|
4101
|
+
<button
|
|
4102
|
+
class="pf-c-menu__item"
|
|
4103
|
+
type="button"
|
|
4104
|
+
role="menuitem"
|
|
4105
|
+
>
|
|
4106
|
+
<span class="pf-c-menu__item-main">
|
|
4107
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
4108
|
+
<i class="fas fa-angle-left"></i>
|
|
4109
|
+
</span>
|
|
4110
|
+
<span class="pf-c-menu__item-icon">
|
|
4111
|
+
<i
|
|
4112
|
+
class="fas fa-fw fa-th"
|
|
4113
|
+
aria-hidden="true"
|
|
4114
|
+
></i>
|
|
4115
|
+
</span>
|
|
4116
|
+
<span
|
|
4117
|
+
class="pf-c-menu__item-text"
|
|
4118
|
+
>Application launcher</span>
|
|
4119
|
+
</span>
|
|
4120
|
+
</button>
|
|
4121
|
+
</div>
|
|
4122
|
+
<div class="pf-c-menu__search">
|
|
4123
|
+
<div class="pf-c-menu__search-input">
|
|
4124
|
+
<div class="pf-c-search-input">
|
|
4125
|
+
<div class="pf-c-search-input__bar">
|
|
4126
|
+
<span class="pf-c-search-input__text">
|
|
4127
|
+
<span class="pf-c-search-input__icon">
|
|
4128
|
+
<i
|
|
4129
|
+
class="fas fa-search fa-fw"
|
|
4130
|
+
aria-hidden="true"
|
|
4131
|
+
></i>
|
|
4132
|
+
</span>
|
|
4133
|
+
<input
|
|
4134
|
+
class="pf-c-search-input__text-input"
|
|
4135
|
+
type="text"
|
|
4136
|
+
placeholder="Search"
|
|
4137
|
+
aria-label="Search"
|
|
4138
|
+
/>
|
|
4139
|
+
</span>
|
|
4140
|
+
</div>
|
|
4141
|
+
</div>
|
|
4142
|
+
</div>
|
|
4143
|
+
</div>
|
|
4144
|
+
<hr class="pf-c-divider" />
|
|
4145
|
+
<section class="pf-c-menu__group">
|
|
4146
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
4147
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4148
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4149
|
+
<a
|
|
4150
|
+
class="pf-c-menu__item"
|
|
4151
|
+
href="#"
|
|
4152
|
+
role="menuitem"
|
|
4153
|
+
>
|
|
4154
|
+
<span class="pf-c-menu__item-main">
|
|
4155
|
+
<span
|
|
4156
|
+
class="pf-c-menu__item-text"
|
|
4157
|
+
>Link 1</span>
|
|
4158
|
+
</span>
|
|
4159
|
+
</a>
|
|
4160
|
+
<button
|
|
4161
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
4162
|
+
type="button"
|
|
4163
|
+
aria-label="Starred"
|
|
4164
|
+
>
|
|
4165
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4166
|
+
<i
|
|
4167
|
+
class="fas fa-star"
|
|
4168
|
+
aria-hidden="true"
|
|
4169
|
+
></i>
|
|
4170
|
+
</span>
|
|
4171
|
+
</button>
|
|
4172
|
+
</li>
|
|
4173
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4174
|
+
<a
|
|
4175
|
+
class="pf-c-menu__item"
|
|
4176
|
+
href="#"
|
|
4177
|
+
role="menuitem"
|
|
4178
|
+
target="_blank"
|
|
4179
|
+
>
|
|
4180
|
+
<span class="pf-c-menu__item-main">
|
|
4181
|
+
<span
|
|
4182
|
+
class="pf-c-menu__item-text"
|
|
4183
|
+
>Link 2</span>
|
|
4184
|
+
<span
|
|
4185
|
+
class="pf-c-menu__item-external-icon"
|
|
4186
|
+
>
|
|
4187
|
+
<i
|
|
4188
|
+
class="fas fa-external-link-alt"
|
|
4189
|
+
aria-hidden="true"
|
|
4190
|
+
></i>
|
|
4191
|
+
</span>
|
|
4192
|
+
<span
|
|
4193
|
+
class="pf-screen-reader"
|
|
4194
|
+
>(opens new window)</span>
|
|
4195
|
+
</span>
|
|
4196
|
+
</a>
|
|
4197
|
+
<button
|
|
4198
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
4199
|
+
type="button"
|
|
4200
|
+
aria-label="Not starred"
|
|
4201
|
+
>
|
|
4202
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4203
|
+
<i
|
|
4204
|
+
class="fas fa-star"
|
|
4205
|
+
aria-hidden="true"
|
|
4206
|
+
></i>
|
|
4207
|
+
</span>
|
|
4208
|
+
</button>
|
|
4209
|
+
</li>
|
|
4210
|
+
</ul>
|
|
4211
|
+
</section>
|
|
4212
|
+
<hr class="pf-c-divider" />
|
|
4213
|
+
<section class="pf-c-menu__group">
|
|
4214
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
4215
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4216
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4217
|
+
<a
|
|
4218
|
+
class="pf-c-menu__item"
|
|
4219
|
+
href="#"
|
|
4220
|
+
role="menuitem"
|
|
4221
|
+
>
|
|
4222
|
+
<span class="pf-c-menu__item-main">
|
|
4223
|
+
<span
|
|
4224
|
+
class="pf-c-menu__item-text"
|
|
4225
|
+
>Link 1</span>
|
|
4226
|
+
</span>
|
|
4227
|
+
</a>
|
|
4228
|
+
<button
|
|
4229
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
4230
|
+
type="button"
|
|
4231
|
+
aria-label="Not starred"
|
|
4232
|
+
>
|
|
4233
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4234
|
+
<i
|
|
4235
|
+
class="fas fa-star"
|
|
4236
|
+
aria-hidden="true"
|
|
4237
|
+
></i>
|
|
4238
|
+
</span>
|
|
4239
|
+
</button>
|
|
4240
|
+
</li>
|
|
4241
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4242
|
+
<a
|
|
4243
|
+
class="pf-c-menu__item"
|
|
4244
|
+
href="#"
|
|
4245
|
+
role="menuitem"
|
|
4246
|
+
target="_blank"
|
|
4247
|
+
>
|
|
4248
|
+
<span class="pf-c-menu__item-main">
|
|
4249
|
+
<span
|
|
4250
|
+
class="pf-c-menu__item-text"
|
|
4251
|
+
>Link 2</span>
|
|
4252
|
+
<span
|
|
4253
|
+
class="pf-c-menu__item-external-icon"
|
|
4254
|
+
>
|
|
4255
|
+
<i
|
|
4256
|
+
class="fas fa-external-link-alt"
|
|
4257
|
+
aria-hidden="true"
|
|
4258
|
+
></i>
|
|
4259
|
+
</span>
|
|
4260
|
+
<span
|
|
4261
|
+
class="pf-screen-reader"
|
|
4262
|
+
>(opens new window)</span>
|
|
4263
|
+
</span>
|
|
4264
|
+
</a>
|
|
4265
|
+
<button
|
|
4266
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
4267
|
+
type="button"
|
|
4268
|
+
aria-label="Starred"
|
|
4269
|
+
>
|
|
4270
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4271
|
+
<i
|
|
4272
|
+
class="fas fa-star"
|
|
4273
|
+
aria-hidden="true"
|
|
4274
|
+
></i>
|
|
4275
|
+
</span>
|
|
4276
|
+
</button>
|
|
4277
|
+
</li>
|
|
4278
|
+
</ul>
|
|
4279
|
+
</section>
|
|
4280
|
+
</div>
|
|
4281
|
+
</li>
|
|
4282
|
+
</ul>
|
|
4283
|
+
</section>
|
|
4284
|
+
</div>
|
|
4285
|
+
</div>
|
|
4286
|
+
</div>
|
|
4287
|
+
</div>
|
|
4288
|
+
</div>
|
|
4289
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
4290
|
+
<div
|
|
4291
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
4292
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
4293
|
+
>
|
|
4294
|
+
<button
|
|
4295
|
+
class="pf-c-dropdown__toggle"
|
|
4296
|
+
id="wizard-with-drawer-expanded-example-masthead-profile-button"
|
|
4297
|
+
aria-expanded="false"
|
|
4298
|
+
type="button"
|
|
4299
|
+
>
|
|
4300
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
4301
|
+
<img
|
|
4302
|
+
class="pf-c-avatar"
|
|
4303
|
+
src="/assets/images/img_avatar.svg"
|
|
4304
|
+
alt="Avatar image"
|
|
4305
|
+
/>
|
|
4306
|
+
</span>
|
|
4307
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
4308
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
4309
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4310
|
+
</span>
|
|
4311
|
+
</button>
|
|
4312
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
4313
|
+
<section class="pf-c-dropdown__group">
|
|
4314
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
4315
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
4316
|
+
<div>123456789</div>
|
|
4317
|
+
</div>
|
|
4318
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
4319
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
4320
|
+
<div>mshaksho@redhat.com</div>
|
|
4321
|
+
</div>
|
|
4322
|
+
</section>
|
|
4323
|
+
<hr class="pf-c-divider" />
|
|
4324
|
+
<section class="pf-c-dropdown__group">
|
|
4325
|
+
<ul>
|
|
4326
|
+
<li>
|
|
4327
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
4328
|
+
</li>
|
|
4329
|
+
<li>
|
|
4330
|
+
<a
|
|
4331
|
+
class="pf-c-dropdown__menu-item"
|
|
4332
|
+
href="#"
|
|
4333
|
+
>User management</a>
|
|
4334
|
+
</li>
|
|
4335
|
+
<li>
|
|
4336
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
4337
|
+
</li>
|
|
4338
|
+
</ul>
|
|
4339
|
+
</section>
|
|
4340
|
+
</div>
|
|
4341
|
+
</div>
|
|
4342
|
+
</div>
|
|
4343
|
+
</div>
|
|
4344
|
+
</div>
|
|
4345
|
+
</div>
|
|
4346
|
+
</div>
|
|
4347
|
+
</header>
|
|
4348
|
+
<div class="pf-c-page__sidebar">
|
|
4349
|
+
<div class="pf-c-page__sidebar-body">
|
|
4350
|
+
<nav
|
|
4351
|
+
class="pf-c-nav"
|
|
4352
|
+
id="wizard-with-drawer-expanded-example-primary-nav"
|
|
4353
|
+
aria-label="Global"
|
|
4354
|
+
>
|
|
4355
|
+
<ul class="pf-c-nav__list">
|
|
4356
|
+
<li class="pf-c-nav__item">
|
|
4357
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
4358
|
+
</li>
|
|
4359
|
+
<li class="pf-c-nav__item">
|
|
4360
|
+
<a
|
|
4361
|
+
href="#"
|
|
4362
|
+
class="pf-c-nav__link pf-m-current"
|
|
4363
|
+
aria-current="page"
|
|
4364
|
+
>Policy</a>
|
|
4365
|
+
</li>
|
|
4366
|
+
<li class="pf-c-nav__item">
|
|
4367
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
4368
|
+
</li>
|
|
4369
|
+
<li class="pf-c-nav__item">
|
|
4370
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
4371
|
+
</li>
|
|
4372
|
+
<li class="pf-c-nav__item">
|
|
4373
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
4374
|
+
</li>
|
|
4375
|
+
</ul>
|
|
4376
|
+
</nav>
|
|
4377
|
+
</div>
|
|
4378
|
+
</div>
|
|
4379
|
+
<main
|
|
4380
|
+
class="pf-c-page__main"
|
|
4381
|
+
tabindex="-1"
|
|
4382
|
+
id="main-content-wizard-with-drawer-expanded-example"
|
|
4383
|
+
>
|
|
4384
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
4385
|
+
<div class="pf-c-page__main-body">
|
|
4386
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
4387
|
+
<ol class="pf-c-breadcrumb__list">
|
|
4388
|
+
<li class="pf-c-breadcrumb__item">
|
|
4389
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
4390
|
+
</li>
|
|
4391
|
+
<li class="pf-c-breadcrumb__item">
|
|
4392
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
4393
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4394
|
+
</span>
|
|
4395
|
+
|
|
4396
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
4397
|
+
</li>
|
|
4398
|
+
<li class="pf-c-breadcrumb__item">
|
|
4399
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
4400
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4401
|
+
</span>
|
|
4402
|
+
|
|
4403
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
4404
|
+
</li>
|
|
4405
|
+
<li class="pf-c-breadcrumb__item">
|
|
4406
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
4407
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
4408
|
+
</span>
|
|
4409
|
+
|
|
4410
|
+
<a
|
|
4411
|
+
href="#"
|
|
4412
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
4413
|
+
aria-current="page"
|
|
4414
|
+
>Section landing</a>
|
|
4415
|
+
</li>
|
|
4416
|
+
</ol>
|
|
4417
|
+
</nav>
|
|
4418
|
+
</div>
|
|
4419
|
+
</section>
|
|
4420
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
4421
|
+
<div class="pf-c-page__main-body">
|
|
4422
|
+
<div class="pf-c-content">
|
|
4423
|
+
<h1>Main title</h1>
|
|
4424
|
+
<p>This is a full page demo.</p>
|
|
4425
|
+
</div>
|
|
4426
|
+
</div>
|
|
4427
|
+
</section>
|
|
4428
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
4429
|
+
<div class="pf-c-page__main-body">
|
|
4430
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
4431
|
+
<div class="pf-c-card">
|
|
4432
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4433
|
+
</div>
|
|
4434
|
+
<div class="pf-c-card">
|
|
4435
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4436
|
+
</div>
|
|
4437
|
+
<div class="pf-c-card">
|
|
4438
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4439
|
+
</div>
|
|
4440
|
+
<div class="pf-c-card">
|
|
4441
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4442
|
+
</div>
|
|
4443
|
+
<div class="pf-c-card">
|
|
4444
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4445
|
+
</div>
|
|
4446
|
+
<div class="pf-c-card">
|
|
4447
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4448
|
+
</div>
|
|
4449
|
+
<div class="pf-c-card">
|
|
4450
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4451
|
+
</div>
|
|
4452
|
+
<div class="pf-c-card">
|
|
4453
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4454
|
+
</div>
|
|
4455
|
+
<div class="pf-c-card">
|
|
4456
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4457
|
+
</div>
|
|
4458
|
+
<div class="pf-c-card">
|
|
4459
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
4460
|
+
</div>
|
|
4461
|
+
</div>
|
|
4462
|
+
</div>
|
|
4463
|
+
</section>
|
|
4464
|
+
</main>
|
|
4465
|
+
</div>
|
|
4466
|
+
<div class="pf-c-backdrop">
|
|
4467
|
+
<div class="pf-l-bullseye">
|
|
4468
|
+
<div
|
|
4469
|
+
class="pf-c-modal-box pf-m-lg"
|
|
4470
|
+
aria-modal="true"
|
|
4471
|
+
aria-label="Basic wizard"
|
|
4472
|
+
>
|
|
4473
|
+
<div class="pf-c-wizard">
|
|
4474
|
+
<div class="pf-c-wizard__header">
|
|
4475
|
+
<button
|
|
4476
|
+
class="pf-c-button pf-m-plain pf-c-wizard__close"
|
|
4477
|
+
type="button"
|
|
4478
|
+
aria-label="Close"
|
|
4479
|
+
>
|
|
4480
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
4481
|
+
</button>
|
|
4482
|
+
<h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
|
|
4483
|
+
|
|
4484
|
+
<div
|
|
4485
|
+
class="pf-c-wizard__description"
|
|
4486
|
+
>Here is where the description goes</div>
|
|
4487
|
+
</div>
|
|
4488
|
+
<button
|
|
4489
|
+
aria-label="Wizard Header Toggle"
|
|
4490
|
+
class="pf-c-wizard__toggle"
|
|
4491
|
+
aria-expanded="false"
|
|
4492
|
+
>
|
|
4493
|
+
<span class="pf-c-wizard__toggle-list">
|
|
4494
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
4495
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
4496
|
+
Configuration
|
|
4497
|
+
<i
|
|
4498
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
4499
|
+
aria-hidden="true"
|
|
4500
|
+
></i>
|
|
4501
|
+
</span>
|
|
4502
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
4503
|
+
</span>
|
|
4504
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
4505
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4506
|
+
</span>
|
|
4507
|
+
</button>
|
|
4508
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
4509
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
4510
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
4511
|
+
<ol class="pf-c-wizard__nav-list">
|
|
4512
|
+
<li class="pf-c-wizard__nav-item">
|
|
4513
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
4514
|
+
</li>
|
|
4515
|
+
<li class="pf-c-wizard__nav-item">
|
|
4516
|
+
<button
|
|
4517
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
4518
|
+
>Configuration</button>
|
|
4519
|
+
<ol class="pf-c-wizard__nav-list">
|
|
4520
|
+
<li class="pf-c-wizard__nav-item">
|
|
4521
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
4522
|
+
</li>
|
|
4523
|
+
<li class="pf-c-wizard__nav-item">
|
|
4524
|
+
<button
|
|
4525
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
4526
|
+
aria-current="page"
|
|
4527
|
+
>Substep B</button>
|
|
4528
|
+
</li>
|
|
4529
|
+
<li class="pf-c-wizard__nav-item">
|
|
4530
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
4531
|
+
</li>
|
|
4532
|
+
</ol>
|
|
4533
|
+
</li>
|
|
4534
|
+
<li class="pf-c-wizard__nav-item">
|
|
4535
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
4536
|
+
</li>
|
|
4537
|
+
<li class="pf-c-wizard__nav-item">
|
|
4538
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
4539
|
+
</li>
|
|
4540
|
+
</ol>
|
|
4541
|
+
</nav>
|
|
4542
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
4543
|
+
<div class="pf-c-drawer pf-m-expanded pf-m-inline">
|
|
4544
|
+
<div class="pf-c-drawer__main">
|
|
4545
|
+
<div class="pf-c-drawer__content">
|
|
4546
|
+
<div class="pf-c-wizard__main-body">
|
|
4547
|
+
<button
|
|
4548
|
+
class="pf-c-button pf-u-hidden pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
4549
|
+
type="button"
|
|
4550
|
+
>Open drawer</button>
|
|
4551
|
+
<form novalidate class="pf-c-form">
|
|
4552
|
+
<div class="pf-c-form__group">
|
|
4553
|
+
<div class="pf-c-form__group-label">
|
|
4554
|
+
<label class="pf-c-form__label" for="-form-field1">
|
|
4555
|
+
<span class="pf-c-form__label-text">Field 1</span>
|
|
4556
|
+
<span
|
|
4557
|
+
class="pf-c-form__label-required"
|
|
4558
|
+
aria-hidden="true"
|
|
4559
|
+
>*</span>
|
|
4560
|
+
</label>
|
|
4561
|
+
</div>
|
|
4562
|
+
<div class="pf-c-form__group-control">
|
|
4563
|
+
<input
|
|
4564
|
+
class="pf-c-form-control"
|
|
4565
|
+
required
|
|
4566
|
+
type="text"
|
|
4567
|
+
id="-form-field1"
|
|
4568
|
+
name="-form-field1"
|
|
4569
|
+
/>
|
|
4570
|
+
</div>
|
|
4571
|
+
</div>
|
|
4572
|
+
<div class="pf-c-form__group">
|
|
4573
|
+
<div class="pf-c-form__group-label">
|
|
4574
|
+
<label class="pf-c-form__label" for="-form-field2">
|
|
4575
|
+
<span class="pf-c-form__label-text">Field 2</span>
|
|
4576
|
+
<span
|
|
4577
|
+
class="pf-c-form__label-required"
|
|
4578
|
+
aria-hidden="true"
|
|
4579
|
+
>*</span>
|
|
4580
|
+
</label>
|
|
4581
|
+
</div>
|
|
4582
|
+
<div class="pf-c-form__group-control">
|
|
4583
|
+
<input
|
|
4584
|
+
class="pf-c-form-control"
|
|
4585
|
+
required
|
|
4586
|
+
type="text"
|
|
4587
|
+
id="-form-field2"
|
|
4588
|
+
name="-form-field2"
|
|
4589
|
+
/>
|
|
4590
|
+
</div>
|
|
4591
|
+
</div>
|
|
4592
|
+
<div class="pf-c-form__group">
|
|
4593
|
+
<div class="pf-c-form__group-label">
|
|
4594
|
+
<label class="pf-c-form__label" for="-form-field3">
|
|
4595
|
+
<span class="pf-c-form__label-text">Field 3</span>
|
|
4596
|
+
<span
|
|
4597
|
+
class="pf-c-form__label-required"
|
|
4598
|
+
aria-hidden="true"
|
|
4599
|
+
>*</span>
|
|
4600
|
+
</label>
|
|
4601
|
+
</div>
|
|
4602
|
+
<div class="pf-c-form__group-control">
|
|
4603
|
+
<input
|
|
4604
|
+
class="pf-c-form-control"
|
|
4605
|
+
required
|
|
4606
|
+
type="text"
|
|
4607
|
+
id="-form-field3"
|
|
4608
|
+
name="-form-field3"
|
|
4609
|
+
/>
|
|
4610
|
+
</div>
|
|
4611
|
+
</div>
|
|
4612
|
+
<div class="pf-c-form__group">
|
|
4613
|
+
<div class="pf-c-form__group-label">
|
|
4614
|
+
<label class="pf-c-form__label" for="-form-field4">
|
|
4615
|
+
<span class="pf-c-form__label-text">Field 4</span>
|
|
4616
|
+
<span
|
|
4617
|
+
class="pf-c-form__label-required"
|
|
4618
|
+
aria-hidden="true"
|
|
4619
|
+
>*</span>
|
|
4620
|
+
</label>
|
|
4621
|
+
</div>
|
|
4622
|
+
<div class="pf-c-form__group-control">
|
|
4623
|
+
<input
|
|
4624
|
+
class="pf-c-form-control"
|
|
4625
|
+
required
|
|
4626
|
+
type="text"
|
|
4627
|
+
id="-form-field4"
|
|
4628
|
+
name="-form-field4"
|
|
4629
|
+
/>
|
|
4630
|
+
</div>
|
|
4631
|
+
</div>
|
|
4632
|
+
<div class="pf-c-form__group">
|
|
4633
|
+
<div class="pf-c-form__group-label">
|
|
4634
|
+
<label class="pf-c-form__label" for="-form-field5">
|
|
4635
|
+
<span class="pf-c-form__label-text">Field 5</span>
|
|
4636
|
+
<span
|
|
4637
|
+
class="pf-c-form__label-required"
|
|
4638
|
+
aria-hidden="true"
|
|
4639
|
+
>*</span>
|
|
4640
|
+
</label>
|
|
4641
|
+
</div>
|
|
4642
|
+
<div class="pf-c-form__group-control">
|
|
4643
|
+
<input
|
|
4644
|
+
class="pf-c-form-control"
|
|
4645
|
+
required
|
|
4646
|
+
type="text"
|
|
4647
|
+
id="-form-field5"
|
|
4648
|
+
name="-form-field5"
|
|
4649
|
+
/>
|
|
4650
|
+
</div>
|
|
4651
|
+
</div>
|
|
4652
|
+
<div class="pf-c-form__group">
|
|
4653
|
+
<div class="pf-c-form__group-label">
|
|
4654
|
+
<label class="pf-c-form__label" for="-form-field6">
|
|
4655
|
+
<span class="pf-c-form__label-text">Field 6</span>
|
|
4656
|
+
<span
|
|
4657
|
+
class="pf-c-form__label-required"
|
|
4658
|
+
aria-hidden="true"
|
|
4659
|
+
>*</span>
|
|
4660
|
+
</label>
|
|
4661
|
+
</div>
|
|
4662
|
+
<div class="pf-c-form__group-control">
|
|
4663
|
+
<input
|
|
4664
|
+
class="pf-c-form-control"
|
|
4665
|
+
required
|
|
4666
|
+
type="text"
|
|
4667
|
+
id="-form-field6"
|
|
4668
|
+
name="-form-field6"
|
|
4669
|
+
/>
|
|
4670
|
+
</div>
|
|
4671
|
+
</div>
|
|
4672
|
+
<div class="pf-c-form__group">
|
|
4673
|
+
<div class="pf-c-form__group-label">
|
|
4674
|
+
<label class="pf-c-form__label" for="-form-field7">
|
|
4675
|
+
<span class="pf-c-form__label-text">Field 7</span>
|
|
4676
|
+
<span
|
|
4677
|
+
class="pf-c-form__label-required"
|
|
4678
|
+
aria-hidden="true"
|
|
4679
|
+
>*</span>
|
|
4680
|
+
</label>
|
|
4681
|
+
</div>
|
|
4682
|
+
<div class="pf-c-form__group-control">
|
|
4683
|
+
<input
|
|
4684
|
+
class="pf-c-form-control"
|
|
4685
|
+
required
|
|
4686
|
+
type="text"
|
|
4687
|
+
id="-form-field7"
|
|
4688
|
+
name="-form-field7"
|
|
4689
|
+
/>
|
|
4690
|
+
</div>
|
|
4691
|
+
</div>
|
|
4692
|
+
</form>
|
|
4693
|
+
</div>
|
|
4694
|
+
</div>
|
|
4695
|
+
<div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
|
|
4696
|
+
<div class="pf-c-drawer__body">
|
|
4697
|
+
<div class="pf-c-drawer__head">
|
|
4698
|
+
<h2
|
|
4699
|
+
class="pf-c-title pf-m-xl"
|
|
4700
|
+
>Register with Red Hat connector</h2>
|
|
4701
|
+
<div class="pf-c-drawer__actions">
|
|
4702
|
+
<div class="pf-c-drawer__close">
|
|
4703
|
+
<button
|
|
4704
|
+
class="pf-c-button pf-m-plain"
|
|
4705
|
+
type="button"
|
|
4706
|
+
aria-label="Close drawer panel"
|
|
4707
|
+
>
|
|
4708
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
4709
|
+
</button>
|
|
4710
|
+
</div>
|
|
4711
|
+
</div>
|
|
4712
|
+
</div>
|
|
4713
|
+
</div>
|
|
4714
|
+
<div class="pf-c-drawer__body">
|
|
4715
|
+
<div class="pf-c-content">
|
|
4716
|
+
<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>
|
|
4717
|
+
|
|
4718
|
+
<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>
|
|
4719
|
+
|
|
4720
|
+
<p>
|
|
4721
|
+
Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
|
|
4722
|
+
<a
|
|
4723
|
+
href="#"
|
|
4724
|
+
>Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
|
|
4725
|
+
</p>
|
|
4726
|
+
<a href="#">
|
|
4727
|
+
<span
|
|
4728
|
+
class="pf-l-flex pf-m-space-items-sm pf-m-nowrap"
|
|
4729
|
+
>
|
|
4730
|
+
<span>Learn about Red Hat connector</span>
|
|
4731
|
+
<i
|
|
4732
|
+
class="fas fa-external-link-alt"
|
|
4733
|
+
aria-hidden="true"
|
|
4734
|
+
></i>
|
|
4735
|
+
</span>
|
|
4736
|
+
</a>
|
|
4737
|
+
</div>
|
|
4738
|
+
</div>
|
|
4739
|
+
</div>
|
|
4740
|
+
</div>
|
|
4741
|
+
<footer class="pf-c-wizard__footer">
|
|
4742
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
4743
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
4744
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
4745
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
4746
|
+
</div>
|
|
4747
|
+
</footer>
|
|
4748
|
+
</div>
|
|
4749
|
+
</main>
|
|
4750
|
+
</div>
|
|
4751
|
+
</div>
|
|
4752
|
+
</div>
|
|
4753
|
+
</div>
|
|
4754
|
+
</div>
|
|
4755
|
+
</div>
|
|
4756
|
+
|
|
4757
|
+
```
|
|
4758
|
+
|
|
4759
|
+
### With drawer and informational step
|
|
4760
|
+
|
|
4761
|
+
```html isFullscreen
|
|
4762
|
+
<div class="pf-c-page" id="wizard-with-drawer-info-example">
|
|
4763
|
+
<a
|
|
4764
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
4765
|
+
href="#main-content-wizard-with-drawer-info-example"
|
|
4766
|
+
>Skip to content</a>
|
|
4767
|
+
<header class="pf-c-masthead" id="wizard-with-drawer-info-example-masthead">
|
|
4768
|
+
<span class="pf-c-masthead__toggle">
|
|
4769
|
+
<button
|
|
4770
|
+
class="pf-c-button pf-m-plain"
|
|
4771
|
+
type="button"
|
|
4772
|
+
aria-label="Global navigation"
|
|
4773
|
+
>
|
|
4774
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
4775
|
+
</button>
|
|
4776
|
+
</span>
|
|
4777
|
+
<div class="pf-c-masthead__main">
|
|
4778
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
4779
|
+
<picture
|
|
4780
|
+
class="pf-c-brand pf-m-picture"
|
|
4781
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
4782
|
+
>
|
|
4783
|
+
<source
|
|
4784
|
+
media="(min-width: 768px)"
|
|
4785
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
4786
|
+
/>
|
|
4787
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
4788
|
+
<img
|
|
4789
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
4790
|
+
alt="Fallback patternFly default logo"
|
|
4791
|
+
/>
|
|
4792
|
+
</picture>
|
|
4793
|
+
</a>
|
|
4794
|
+
</div>
|
|
4795
|
+
<div class="pf-c-masthead__content">
|
|
4796
|
+
<div
|
|
4797
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
4798
|
+
id="wizard-with-drawer-info-example-masthead-toolbar"
|
|
4799
|
+
>
|
|
4800
|
+
<div class="pf-c-toolbar__content">
|
|
4801
|
+
<div class="pf-c-toolbar__content-section">
|
|
4802
|
+
<div
|
|
4803
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
4804
|
+
>
|
|
4805
|
+
<div class="pf-c-toolbar__item">
|
|
4806
|
+
<button
|
|
4807
|
+
class="pf-c-button pf-m-plain"
|
|
4808
|
+
type="button"
|
|
4809
|
+
aria-label="Notifications"
|
|
4810
|
+
>
|
|
4811
|
+
<span class="pf-c-notification-badge">
|
|
4812
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
4813
|
+
</span>
|
|
4814
|
+
</button>
|
|
4815
|
+
</div>
|
|
4816
|
+
<div
|
|
4817
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
4818
|
+
>
|
|
4819
|
+
<div class="pf-c-toolbar__item">
|
|
4820
|
+
<nav
|
|
4821
|
+
class="pf-c-app-launcher"
|
|
4822
|
+
aria-label="Application launcher"
|
|
4823
|
+
id="wizard-with-drawer-info-example-masthead-icon-group--app-launcher"
|
|
4824
|
+
>
|
|
4825
|
+
<button
|
|
4826
|
+
class="pf-c-app-launcher__toggle"
|
|
4827
|
+
type="button"
|
|
4828
|
+
id="wizard-with-drawer-info-example-masthead-icon-group--app-launcher-button"
|
|
4829
|
+
aria-expanded="false"
|
|
4830
|
+
aria-label="Application launcher"
|
|
4831
|
+
>
|
|
4832
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
4833
|
+
</button>
|
|
4834
|
+
<div
|
|
4835
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
4836
|
+
hidden
|
|
4837
|
+
>
|
|
4838
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
4839
|
+
<div class="pf-c-search-input">
|
|
4840
|
+
<div class="pf-c-search-input__bar">
|
|
4841
|
+
<span class="pf-c-search-input__text">
|
|
4842
|
+
<span class="pf-c-search-input__icon">
|
|
4843
|
+
<i
|
|
4844
|
+
class="fas fa-search fa-fw"
|
|
4845
|
+
aria-hidden="true"
|
|
4846
|
+
></i>
|
|
4847
|
+
</span>
|
|
4848
|
+
<input
|
|
4849
|
+
class="pf-c-search-input__text-input"
|
|
4850
|
+
type="text"
|
|
4851
|
+
placeholder="Filter by name"
|
|
4852
|
+
aria-label="Filter by name"
|
|
4853
|
+
/>
|
|
4854
|
+
</span>
|
|
4855
|
+
</div>
|
|
4856
|
+
</div>
|
|
4857
|
+
</div>
|
|
4858
|
+
<section class="pf-c-app-launcher__group">
|
|
4859
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
4860
|
+
<ul>
|
|
4861
|
+
<li
|
|
4862
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
4863
|
+
>
|
|
4864
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4865
|
+
Link 1
|
|
4866
|
+
<span
|
|
4867
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4868
|
+
>
|
|
4869
|
+
<i
|
|
4870
|
+
class="fas fa-external-link-alt"
|
|
4871
|
+
aria-hidden="true"
|
|
4872
|
+
></i>
|
|
4873
|
+
</span>
|
|
4874
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4875
|
+
</a>
|
|
4876
|
+
<button
|
|
4877
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4878
|
+
type="button"
|
|
4879
|
+
aria-label="Favorite"
|
|
4880
|
+
>
|
|
4881
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4882
|
+
</button>
|
|
4883
|
+
</li>
|
|
4884
|
+
<li
|
|
4885
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
4886
|
+
>
|
|
4887
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4888
|
+
Link 2
|
|
4889
|
+
<span
|
|
4890
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4891
|
+
>
|
|
4892
|
+
<i
|
|
4893
|
+
class="fas fa-external-link-alt"
|
|
4894
|
+
aria-hidden="true"
|
|
4895
|
+
></i>
|
|
4896
|
+
</span>
|
|
4897
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4898
|
+
</a>
|
|
4899
|
+
<button
|
|
4900
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4901
|
+
type="button"
|
|
4902
|
+
aria-label="Favorite"
|
|
4903
|
+
>
|
|
4904
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4905
|
+
</button>
|
|
4906
|
+
</li>
|
|
4907
|
+
</ul>
|
|
4908
|
+
</section>
|
|
4909
|
+
<hr class="pf-c-divider" />
|
|
4910
|
+
<section class="pf-c-app-launcher__group">
|
|
4911
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
4912
|
+
<ul>
|
|
4913
|
+
<li
|
|
4914
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
4915
|
+
>
|
|
4916
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4917
|
+
Link 1
|
|
4918
|
+
<span
|
|
4919
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4920
|
+
>
|
|
4921
|
+
<i
|
|
4922
|
+
class="fas fa-external-link-alt"
|
|
4923
|
+
aria-hidden="true"
|
|
4924
|
+
></i>
|
|
4925
|
+
</span>
|
|
4926
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4927
|
+
</a>
|
|
4928
|
+
<button
|
|
4929
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4930
|
+
type="button"
|
|
4931
|
+
aria-label="Favorite"
|
|
4932
|
+
>
|
|
4933
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4934
|
+
</button>
|
|
4935
|
+
</li>
|
|
4936
|
+
<li
|
|
4937
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
4938
|
+
>
|
|
4939
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4940
|
+
Link 2
|
|
4941
|
+
<span
|
|
4942
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4943
|
+
>
|
|
4944
|
+
<i
|
|
4945
|
+
class="fas fa-external-link-alt"
|
|
4946
|
+
aria-hidden="true"
|
|
4947
|
+
></i>
|
|
4948
|
+
</span>
|
|
4949
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4950
|
+
</a>
|
|
4951
|
+
<button
|
|
4952
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4953
|
+
type="button"
|
|
4954
|
+
aria-label="Favorite"
|
|
4955
|
+
>
|
|
4956
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4957
|
+
</button>
|
|
4958
|
+
</li>
|
|
4959
|
+
</ul>
|
|
4960
|
+
</section>
|
|
4961
|
+
</div>
|
|
4962
|
+
</nav>
|
|
4963
|
+
</div>
|
|
4964
|
+
<div class="pf-c-toolbar__item">
|
|
4965
|
+
<div class="pf-c-dropdown">
|
|
4966
|
+
<button
|
|
4967
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4968
|
+
id="wizard-with-drawer-info-example-masthead-settings-button"
|
|
4969
|
+
aria-expanded="false"
|
|
4970
|
+
type="button"
|
|
4971
|
+
aria-label="Settings"
|
|
4972
|
+
>
|
|
4973
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
4974
|
+
</button>
|
|
4975
|
+
<ul
|
|
4976
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4977
|
+
aria-labelledby="wizard-with-drawer-info-example-masthead-settings-button"
|
|
4978
|
+
hidden
|
|
4979
|
+
>
|
|
4980
|
+
<li>
|
|
4981
|
+
<button
|
|
4982
|
+
class="pf-c-dropdown__menu-item"
|
|
4983
|
+
type="button"
|
|
4984
|
+
>Settings</button>
|
|
4985
|
+
</li>
|
|
4986
|
+
<li>
|
|
4987
|
+
<button
|
|
4988
|
+
class="pf-c-dropdown__menu-item"
|
|
4989
|
+
type="button"
|
|
4990
|
+
>Use the beta release</button>
|
|
4991
|
+
</li>
|
|
4992
|
+
</ul>
|
|
4993
|
+
</div>
|
|
4994
|
+
</div>
|
|
4995
|
+
<div class="pf-c-toolbar__item">
|
|
4996
|
+
<div class="pf-c-dropdown">
|
|
4997
|
+
<button
|
|
4998
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4999
|
+
id="wizard-with-drawer-info-example-masthead-help-button"
|
|
5000
|
+
aria-expanded="false"
|
|
5001
|
+
type="button"
|
|
5002
|
+
aria-label="Help"
|
|
5003
|
+
>
|
|
5004
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
5005
|
+
</button>
|
|
5006
|
+
<ul
|
|
5007
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5008
|
+
aria-labelledby="wizard-with-drawer-info-example-masthead-help-button"
|
|
5009
|
+
hidden
|
|
5010
|
+
>
|
|
5011
|
+
<li>
|
|
5012
|
+
<button
|
|
5013
|
+
class="pf-c-dropdown__menu-item"
|
|
5014
|
+
type="button"
|
|
5015
|
+
>Support options</button>
|
|
5016
|
+
</li>
|
|
5017
|
+
<li>
|
|
5018
|
+
<button
|
|
5019
|
+
class="pf-c-dropdown__menu-item"
|
|
5020
|
+
type="button"
|
|
5021
|
+
>Open support case</button>
|
|
5022
|
+
</li>
|
|
5023
|
+
<li>
|
|
5024
|
+
<button
|
|
5025
|
+
class="pf-c-dropdown__menu-item"
|
|
5026
|
+
type="button"
|
|
5027
|
+
>API documentation</button>
|
|
5028
|
+
</li>
|
|
5029
|
+
</ul>
|
|
5030
|
+
</div>
|
|
5031
|
+
</div>
|
|
5032
|
+
</div>
|
|
5033
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
5034
|
+
<div class="pf-c-dropdown">
|
|
5035
|
+
<button
|
|
5036
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
5037
|
+
type="button"
|
|
5038
|
+
aria-expanded="false"
|
|
5039
|
+
aria-label="Actions"
|
|
5040
|
+
>
|
|
5041
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
5042
|
+
</button>
|
|
5043
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
5044
|
+
<div class="pf-c-menu__content">
|
|
5045
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
5046
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5047
|
+
<li
|
|
5048
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
5049
|
+
role="none"
|
|
5050
|
+
>
|
|
5051
|
+
<button
|
|
5052
|
+
class="pf-c-menu__item"
|
|
5053
|
+
type="button"
|
|
5054
|
+
disabled
|
|
5055
|
+
role="menuitem"
|
|
5056
|
+
>
|
|
5057
|
+
<span class="pf-c-menu__item-description">
|
|
5058
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
5059
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
5060
|
+
</span>
|
|
5061
|
+
</button>
|
|
5062
|
+
</li>
|
|
5063
|
+
<li
|
|
5064
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
5065
|
+
role="none"
|
|
5066
|
+
>
|
|
5067
|
+
<button
|
|
5068
|
+
class="pf-c-menu__item"
|
|
5069
|
+
type="button"
|
|
5070
|
+
disabled
|
|
5071
|
+
role="menuitem"
|
|
5072
|
+
>
|
|
5073
|
+
<span class="pf-c-menu__item-description">
|
|
5074
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5075
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
5076
|
+
</span>
|
|
5077
|
+
</button>
|
|
5078
|
+
</li>
|
|
5079
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
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
|
+
>
|
|
5086
|
+
<span class="pf-c-menu__item-main">
|
|
5087
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
5088
|
+
</span>
|
|
5089
|
+
</button>
|
|
5090
|
+
</li>
|
|
5091
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5092
|
+
<button
|
|
5093
|
+
class="pf-c-menu__item"
|
|
5094
|
+
type="button"
|
|
5095
|
+
role="menuitem"
|
|
5096
|
+
>
|
|
5097
|
+
<span class="pf-c-menu__item-main">
|
|
5098
|
+
<span
|
|
5099
|
+
class="pf-c-menu__item-text"
|
|
5100
|
+
>User management</span>
|
|
5101
|
+
</span>
|
|
5102
|
+
</button>
|
|
5103
|
+
</li>
|
|
5104
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5105
|
+
<button
|
|
5106
|
+
class="pf-c-menu__item"
|
|
5107
|
+
type="button"
|
|
5108
|
+
role="menuitem"
|
|
5109
|
+
>
|
|
5110
|
+
<span class="pf-c-menu__item-main">
|
|
5111
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
5112
|
+
</span>
|
|
5113
|
+
</button>
|
|
5114
|
+
</li>
|
|
5115
|
+
</ul>
|
|
5116
|
+
</section>
|
|
5117
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
5118
|
+
<section class="pf-c-menu__group">
|
|
5119
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5120
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5121
|
+
<button
|
|
5122
|
+
class="pf-c-menu__item"
|
|
5123
|
+
type="button"
|
|
5124
|
+
role="menuitem"
|
|
5125
|
+
aria-expanded="false"
|
|
5126
|
+
>
|
|
5127
|
+
<span class="pf-c-menu__item-main">
|
|
5128
|
+
<span class="pf-c-menu__item-icon">
|
|
5129
|
+
<i
|
|
5130
|
+
class="fas fa-fw fa-cog"
|
|
5131
|
+
aria-hidden="true"
|
|
5132
|
+
></i>
|
|
5133
|
+
</span>
|
|
5134
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
5135
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5136
|
+
<i class="fas fa-angle-right"></i>
|
|
5137
|
+
</span>
|
|
5138
|
+
</span>
|
|
5139
|
+
</button>
|
|
5140
|
+
<div class="pf-c-menu" hidden>
|
|
5141
|
+
<div class="pf-c-menu__content">
|
|
5142
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5143
|
+
<li
|
|
5144
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
5145
|
+
role="none"
|
|
5146
|
+
>
|
|
5147
|
+
<button
|
|
5148
|
+
class="pf-c-menu__item"
|
|
5149
|
+
type="button"
|
|
5150
|
+
role="menuitem"
|
|
5151
|
+
>
|
|
5152
|
+
<span class="pf-c-menu__item-main">
|
|
5153
|
+
<span
|
|
5154
|
+
class="pf-c-menu__item-toggle-icon"
|
|
5155
|
+
>
|
|
5156
|
+
<i class="fas fa-angle-left"></i>
|
|
5157
|
+
</span>
|
|
5158
|
+
<span class="pf-c-menu__item-icon">
|
|
5159
|
+
<i
|
|
5160
|
+
class="fas fa-fw fa-cog"
|
|
5161
|
+
aria-hidden="true"
|
|
5162
|
+
></i>
|
|
5163
|
+
</span>
|
|
5164
|
+
<span
|
|
5165
|
+
class="pf-c-menu__item-text"
|
|
5166
|
+
>Settings</span>
|
|
5167
|
+
</span>
|
|
5168
|
+
</button>
|
|
5169
|
+
</li>
|
|
5170
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
5171
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5172
|
+
<a
|
|
5173
|
+
class="pf-c-menu__item"
|
|
5174
|
+
href="#"
|
|
5175
|
+
role="menuitem"
|
|
5176
|
+
>
|
|
5177
|
+
<span class="pf-c-menu__item-main">
|
|
5178
|
+
<span
|
|
5179
|
+
class="pf-c-menu__item-text"
|
|
5180
|
+
>Customer support</span>
|
|
5181
|
+
</span>
|
|
5182
|
+
</a>
|
|
5183
|
+
</li>
|
|
5184
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5185
|
+
<a
|
|
5186
|
+
class="pf-c-menu__item"
|
|
5187
|
+
href="#"
|
|
5188
|
+
role="menuitem"
|
|
5189
|
+
>
|
|
5190
|
+
<span class="pf-c-menu__item-main">
|
|
5191
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
5192
|
+
</span>
|
|
5193
|
+
</a>
|
|
5194
|
+
</li>
|
|
5195
|
+
</ul>
|
|
5196
|
+
</div>
|
|
5197
|
+
</div>
|
|
5198
|
+
</li>
|
|
5199
|
+
|
|
5200
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5201
|
+
<button
|
|
5202
|
+
class="pf-c-menu__item"
|
|
5203
|
+
type="button"
|
|
5204
|
+
role="menuitem"
|
|
5205
|
+
aria-expanded="false"
|
|
5206
|
+
>
|
|
5207
|
+
<span class="pf-c-menu__item-main">
|
|
5208
|
+
<span class="pf-c-menu__item-icon">
|
|
5209
|
+
<i
|
|
5210
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
5211
|
+
aria-hidden="true"
|
|
5212
|
+
></i>
|
|
5213
|
+
</span>
|
|
5214
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
5215
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5216
|
+
<i class="fas fa-angle-right"></i>
|
|
5217
|
+
</span>
|
|
5218
|
+
</span>
|
|
5219
|
+
</button>
|
|
5220
|
+
<div class="pf-c-menu" hidden>
|
|
5221
|
+
<div class="pf-c-menu__content">
|
|
5222
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5223
|
+
<li
|
|
5224
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
5225
|
+
role="none"
|
|
5226
|
+
>
|
|
5227
|
+
<button
|
|
5228
|
+
class="pf-c-menu__item"
|
|
5229
|
+
type="button"
|
|
5230
|
+
role="menuitem"
|
|
5231
|
+
>
|
|
5232
|
+
<span class="pf-c-menu__item-main">
|
|
5233
|
+
<span
|
|
5234
|
+
class="pf-c-menu__item-toggle-icon"
|
|
5235
|
+
>
|
|
5236
|
+
<i class="fas fa-angle-left"></i>
|
|
5237
|
+
</span>
|
|
5238
|
+
<span class="pf-c-menu__item-icon">
|
|
5239
|
+
<i
|
|
5240
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
5241
|
+
aria-hidden="true"
|
|
5242
|
+
></i>
|
|
5243
|
+
</span>
|
|
5244
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
5245
|
+
</span>
|
|
5246
|
+
</button>
|
|
5247
|
+
</li>
|
|
5248
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
5249
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5250
|
+
<a
|
|
5251
|
+
class="pf-c-menu__item"
|
|
5252
|
+
href="#"
|
|
5253
|
+
role="menuitem"
|
|
5254
|
+
>
|
|
5255
|
+
<span class="pf-c-menu__item-main">
|
|
5256
|
+
<span
|
|
5257
|
+
class="pf-c-menu__item-text"
|
|
5258
|
+
>Support options</span>
|
|
5259
|
+
</span>
|
|
5260
|
+
</a>
|
|
5261
|
+
</li>
|
|
5262
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5263
|
+
<a
|
|
5264
|
+
class="pf-c-menu__item"
|
|
5265
|
+
href="#"
|
|
5266
|
+
role="menuitem"
|
|
5267
|
+
>
|
|
5268
|
+
<span class="pf-c-menu__item-main">
|
|
5269
|
+
<span
|
|
5270
|
+
class="pf-c-menu__item-text"
|
|
5271
|
+
>Open support case</span>
|
|
5272
|
+
</span>
|
|
5273
|
+
</a>
|
|
5274
|
+
</li>
|
|
5275
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5276
|
+
<a
|
|
5277
|
+
class="pf-c-menu__item"
|
|
5278
|
+
href="#"
|
|
5279
|
+
role="menuitem"
|
|
5280
|
+
>
|
|
5281
|
+
<span class="pf-c-menu__item-main">
|
|
5282
|
+
<span
|
|
5283
|
+
class="pf-c-menu__item-text"
|
|
5284
|
+
>API documentation</span>
|
|
5285
|
+
</span>
|
|
5286
|
+
</a>
|
|
5287
|
+
</li>
|
|
5288
|
+
</ul>
|
|
5289
|
+
</div>
|
|
5290
|
+
</div>
|
|
5291
|
+
</li>
|
|
5292
|
+
|
|
5293
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5294
|
+
<button
|
|
5295
|
+
class="pf-c-menu__item"
|
|
5296
|
+
type="button"
|
|
5297
|
+
role="menuitem"
|
|
5298
|
+
>
|
|
5299
|
+
<span class="pf-c-menu__item-main">
|
|
5300
|
+
<span class="pf-c-menu__item-icon">
|
|
5301
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
5302
|
+
</span>
|
|
5303
|
+
<span
|
|
5304
|
+
class="pf-c-menu__item-text"
|
|
5305
|
+
>Application launcher</span>
|
|
5306
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5307
|
+
<i class="fas fa-angle-right"></i>
|
|
5308
|
+
</span>
|
|
5309
|
+
</span>
|
|
5310
|
+
</button>
|
|
5311
|
+
<div class="pf-c-menu" hidden>
|
|
5312
|
+
<div class="pf-c-menu__header">
|
|
5313
|
+
<button
|
|
5314
|
+
class="pf-c-menu__item"
|
|
5315
|
+
type="button"
|
|
5316
|
+
role="menuitem"
|
|
5317
|
+
>
|
|
5318
|
+
<span class="pf-c-menu__item-main">
|
|
5319
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5320
|
+
<i class="fas fa-angle-left"></i>
|
|
5321
|
+
</span>
|
|
5322
|
+
<span class="pf-c-menu__item-icon">
|
|
5323
|
+
<i
|
|
5324
|
+
class="fas fa-fw fa-th"
|
|
5325
|
+
aria-hidden="true"
|
|
5326
|
+
></i>
|
|
5327
|
+
</span>
|
|
5328
|
+
<span
|
|
5329
|
+
class="pf-c-menu__item-text"
|
|
5330
|
+
>Application launcher</span>
|
|
5331
|
+
</span>
|
|
5332
|
+
</button>
|
|
5333
|
+
</div>
|
|
5334
|
+
<div class="pf-c-menu__search">
|
|
5335
|
+
<div class="pf-c-menu__search-input">
|
|
5336
|
+
<div class="pf-c-search-input">
|
|
5337
|
+
<div class="pf-c-search-input__bar">
|
|
5338
|
+
<span class="pf-c-search-input__text">
|
|
5339
|
+
<span class="pf-c-search-input__icon">
|
|
5340
|
+
<i
|
|
5341
|
+
class="fas fa-search fa-fw"
|
|
5342
|
+
aria-hidden="true"
|
|
5343
|
+
></i>
|
|
5344
|
+
</span>
|
|
5345
|
+
<input
|
|
5346
|
+
class="pf-c-search-input__text-input"
|
|
5347
|
+
type="text"
|
|
5348
|
+
placeholder="Search"
|
|
5349
|
+
aria-label="Search"
|
|
5350
|
+
/>
|
|
5351
|
+
</span>
|
|
5352
|
+
</div>
|
|
5353
|
+
</div>
|
|
5354
|
+
</div>
|
|
5355
|
+
</div>
|
|
5356
|
+
<hr class="pf-c-divider" />
|
|
5357
|
+
<section class="pf-c-menu__group">
|
|
5358
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
5359
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5360
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5361
|
+
<a
|
|
5362
|
+
class="pf-c-menu__item"
|
|
5363
|
+
href="#"
|
|
5364
|
+
role="menuitem"
|
|
5365
|
+
>
|
|
5366
|
+
<span class="pf-c-menu__item-main">
|
|
5367
|
+
<span
|
|
5368
|
+
class="pf-c-menu__item-text"
|
|
5369
|
+
>Link 1</span>
|
|
5370
|
+
</span>
|
|
5371
|
+
</a>
|
|
5372
|
+
<button
|
|
5373
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
5374
|
+
type="button"
|
|
5375
|
+
aria-label="Starred"
|
|
5376
|
+
>
|
|
5377
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5378
|
+
<i
|
|
5379
|
+
class="fas fa-star"
|
|
5380
|
+
aria-hidden="true"
|
|
5381
|
+
></i>
|
|
5382
|
+
</span>
|
|
5383
|
+
</button>
|
|
5384
|
+
</li>
|
|
5385
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5386
|
+
<a
|
|
5387
|
+
class="pf-c-menu__item"
|
|
5388
|
+
href="#"
|
|
5389
|
+
role="menuitem"
|
|
5390
|
+
target="_blank"
|
|
5391
|
+
>
|
|
5392
|
+
<span class="pf-c-menu__item-main">
|
|
5393
|
+
<span
|
|
5394
|
+
class="pf-c-menu__item-text"
|
|
5395
|
+
>Link 2</span>
|
|
5396
|
+
<span
|
|
5397
|
+
class="pf-c-menu__item-external-icon"
|
|
5398
|
+
>
|
|
5399
|
+
<i
|
|
5400
|
+
class="fas fa-external-link-alt"
|
|
5401
|
+
aria-hidden="true"
|
|
5402
|
+
></i>
|
|
5403
|
+
</span>
|
|
5404
|
+
<span
|
|
5405
|
+
class="pf-screen-reader"
|
|
5406
|
+
>(opens new window)</span>
|
|
5407
|
+
</span>
|
|
5408
|
+
</a>
|
|
5409
|
+
<button
|
|
5410
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
5411
|
+
type="button"
|
|
5412
|
+
aria-label="Not starred"
|
|
5413
|
+
>
|
|
5414
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5415
|
+
<i
|
|
5416
|
+
class="fas fa-star"
|
|
5417
|
+
aria-hidden="true"
|
|
5418
|
+
></i>
|
|
5419
|
+
</span>
|
|
5420
|
+
</button>
|
|
5421
|
+
</li>
|
|
5422
|
+
</ul>
|
|
5423
|
+
</section>
|
|
5424
|
+
<hr class="pf-c-divider" />
|
|
5425
|
+
<section class="pf-c-menu__group">
|
|
5426
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
5427
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5428
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5429
|
+
<a
|
|
5430
|
+
class="pf-c-menu__item"
|
|
5431
|
+
href="#"
|
|
5432
|
+
role="menuitem"
|
|
5433
|
+
>
|
|
5434
|
+
<span class="pf-c-menu__item-main">
|
|
5435
|
+
<span
|
|
5436
|
+
class="pf-c-menu__item-text"
|
|
5437
|
+
>Link 1</span>
|
|
5438
|
+
</span>
|
|
5439
|
+
</a>
|
|
5440
|
+
<button
|
|
5441
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
5442
|
+
type="button"
|
|
5443
|
+
aria-label="Not starred"
|
|
5444
|
+
>
|
|
5445
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5446
|
+
<i
|
|
5447
|
+
class="fas fa-star"
|
|
5448
|
+
aria-hidden="true"
|
|
5449
|
+
></i>
|
|
5450
|
+
</span>
|
|
5451
|
+
</button>
|
|
5452
|
+
</li>
|
|
5453
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5454
|
+
<a
|
|
5455
|
+
class="pf-c-menu__item"
|
|
5456
|
+
href="#"
|
|
5457
|
+
role="menuitem"
|
|
5458
|
+
target="_blank"
|
|
5459
|
+
>
|
|
5460
|
+
<span class="pf-c-menu__item-main">
|
|
5461
|
+
<span
|
|
5462
|
+
class="pf-c-menu__item-text"
|
|
5463
|
+
>Link 2</span>
|
|
5464
|
+
<span
|
|
5465
|
+
class="pf-c-menu__item-external-icon"
|
|
5466
|
+
>
|
|
5467
|
+
<i
|
|
5468
|
+
class="fas fa-external-link-alt"
|
|
5469
|
+
aria-hidden="true"
|
|
5470
|
+
></i>
|
|
5471
|
+
</span>
|
|
5472
|
+
<span
|
|
5473
|
+
class="pf-screen-reader"
|
|
5474
|
+
>(opens new window)</span>
|
|
5475
|
+
</span>
|
|
5476
|
+
</a>
|
|
5477
|
+
<button
|
|
5478
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
5479
|
+
type="button"
|
|
5480
|
+
aria-label="Starred"
|
|
5481
|
+
>
|
|
5482
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5483
|
+
<i
|
|
5484
|
+
class="fas fa-star"
|
|
5485
|
+
aria-hidden="true"
|
|
5486
|
+
></i>
|
|
5487
|
+
</span>
|
|
5488
|
+
</button>
|
|
5489
|
+
</li>
|
|
5490
|
+
</ul>
|
|
5491
|
+
</section>
|
|
5492
|
+
</div>
|
|
5493
|
+
</li>
|
|
5494
|
+
</ul>
|
|
5495
|
+
</section>
|
|
5496
|
+
</div>
|
|
5497
|
+
</div>
|
|
5498
|
+
</div>
|
|
5499
|
+
</div>
|
|
5500
|
+
</div>
|
|
5501
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
5502
|
+
<div
|
|
5503
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
5504
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
5505
|
+
>
|
|
5506
|
+
<button
|
|
5507
|
+
class="pf-c-dropdown__toggle"
|
|
5508
|
+
id="wizard-with-drawer-info-example-masthead-profile-button"
|
|
5509
|
+
aria-expanded="false"
|
|
5510
|
+
type="button"
|
|
5511
|
+
>
|
|
5512
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
5513
|
+
<img
|
|
5514
|
+
class="pf-c-avatar"
|
|
5515
|
+
src="/assets/images/img_avatar.svg"
|
|
5516
|
+
alt="Avatar image"
|
|
5517
|
+
/>
|
|
5518
|
+
</span>
|
|
5519
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
5520
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
5521
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5522
|
+
</span>
|
|
5523
|
+
</button>
|
|
5524
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
5525
|
+
<section class="pf-c-dropdown__group">
|
|
5526
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5527
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5528
|
+
<div>123456789</div>
|
|
5529
|
+
</div>
|
|
5530
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5531
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
5532
|
+
<div>mshaksho@redhat.com</div>
|
|
5533
|
+
</div>
|
|
5534
|
+
</section>
|
|
5535
|
+
<hr class="pf-c-divider" />
|
|
5536
|
+
<section class="pf-c-dropdown__group">
|
|
5537
|
+
<ul>
|
|
5538
|
+
<li>
|
|
5539
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
5540
|
+
</li>
|
|
5541
|
+
<li>
|
|
5542
|
+
<a
|
|
5543
|
+
class="pf-c-dropdown__menu-item"
|
|
5544
|
+
href="#"
|
|
5545
|
+
>User management</a>
|
|
5546
|
+
</li>
|
|
5547
|
+
<li>
|
|
5548
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
5549
|
+
</li>
|
|
5550
|
+
</ul>
|
|
5551
|
+
</section>
|
|
5552
|
+
</div>
|
|
5553
|
+
</div>
|
|
5554
|
+
</div>
|
|
5555
|
+
</div>
|
|
5556
|
+
</div>
|
|
5557
|
+
</div>
|
|
5558
|
+
</div>
|
|
5559
|
+
</header>
|
|
5560
|
+
<div class="pf-c-page__sidebar">
|
|
5561
|
+
<div class="pf-c-page__sidebar-body">
|
|
5562
|
+
<nav
|
|
5563
|
+
class="pf-c-nav"
|
|
5564
|
+
id="wizard-with-drawer-info-example-primary-nav"
|
|
5565
|
+
aria-label="Global"
|
|
5566
|
+
>
|
|
5567
|
+
<ul class="pf-c-nav__list">
|
|
5568
|
+
<li class="pf-c-nav__item">
|
|
5569
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
5570
|
+
</li>
|
|
5571
|
+
<li class="pf-c-nav__item">
|
|
5572
|
+
<a
|
|
5573
|
+
href="#"
|
|
5574
|
+
class="pf-c-nav__link pf-m-current"
|
|
5575
|
+
aria-current="page"
|
|
5576
|
+
>Policy</a>
|
|
5577
|
+
</li>
|
|
5578
|
+
<li class="pf-c-nav__item">
|
|
5579
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
5580
|
+
</li>
|
|
5581
|
+
<li class="pf-c-nav__item">
|
|
5582
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
5583
|
+
</li>
|
|
5584
|
+
<li class="pf-c-nav__item">
|
|
5585
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
5586
|
+
</li>
|
|
5587
|
+
</ul>
|
|
5588
|
+
</nav>
|
|
5589
|
+
</div>
|
|
5590
|
+
</div>
|
|
5591
|
+
<main
|
|
5592
|
+
class="pf-c-page__main"
|
|
5593
|
+
tabindex="-1"
|
|
5594
|
+
id="main-content-wizard-with-drawer-info-example"
|
|
5595
|
+
>
|
|
5596
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
5597
|
+
<div class="pf-c-page__main-body">
|
|
5598
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
5599
|
+
<ol class="pf-c-breadcrumb__list">
|
|
5600
|
+
<li class="pf-c-breadcrumb__item">
|
|
5601
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
5602
|
+
</li>
|
|
5603
|
+
<li class="pf-c-breadcrumb__item">
|
|
5604
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
5605
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5606
|
+
</span>
|
|
5607
|
+
|
|
5608
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
5609
|
+
</li>
|
|
5610
|
+
<li class="pf-c-breadcrumb__item">
|
|
5611
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
5612
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5613
|
+
</span>
|
|
5614
|
+
|
|
5615
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
5616
|
+
</li>
|
|
5617
|
+
<li class="pf-c-breadcrumb__item">
|
|
5618
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
5619
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
5620
|
+
</span>
|
|
5621
|
+
|
|
5622
|
+
<a
|
|
5623
|
+
href="#"
|
|
5624
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
5625
|
+
aria-current="page"
|
|
5626
|
+
>Section landing</a>
|
|
5627
|
+
</li>
|
|
5628
|
+
</ol>
|
|
5629
|
+
</nav>
|
|
5630
|
+
</div>
|
|
5631
|
+
</section>
|
|
5632
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
5633
|
+
<div class="pf-c-page__main-body">
|
|
5634
|
+
<div class="pf-c-content">
|
|
5635
|
+
<h1>Main title</h1>
|
|
5636
|
+
<p>This is a full page demo.</p>
|
|
5637
|
+
</div>
|
|
5638
|
+
</div>
|
|
5639
|
+
</section>
|
|
5640
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
5641
|
+
<div class="pf-c-page__main-body">
|
|
5642
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
5643
|
+
<div class="pf-c-card">
|
|
5644
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5645
|
+
</div>
|
|
5646
|
+
<div class="pf-c-card">
|
|
5647
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5648
|
+
</div>
|
|
5649
|
+
<div class="pf-c-card">
|
|
5650
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5651
|
+
</div>
|
|
5652
|
+
<div class="pf-c-card">
|
|
5653
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5654
|
+
</div>
|
|
5655
|
+
<div class="pf-c-card">
|
|
5656
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5657
|
+
</div>
|
|
5658
|
+
<div class="pf-c-card">
|
|
5659
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5660
|
+
</div>
|
|
5661
|
+
<div class="pf-c-card">
|
|
5662
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5663
|
+
</div>
|
|
5664
|
+
<div class="pf-c-card">
|
|
5665
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5666
|
+
</div>
|
|
5667
|
+
<div class="pf-c-card">
|
|
5668
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5669
|
+
</div>
|
|
5670
|
+
<div class="pf-c-card">
|
|
5671
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
5672
|
+
</div>
|
|
5673
|
+
</div>
|
|
5674
|
+
</div>
|
|
5675
|
+
</section>
|
|
5676
|
+
</main>
|
|
5677
|
+
</div>
|
|
5678
|
+
<div class="pf-c-backdrop">
|
|
5679
|
+
<div class="pf-l-bullseye">
|
|
5680
|
+
<div
|
|
5681
|
+
class="pf-c-modal-box pf-m-lg"
|
|
5682
|
+
aria-modal="true"
|
|
5683
|
+
aria-label="Basic wizard"
|
|
5684
|
+
>
|
|
5685
|
+
<div class="pf-c-wizard">
|
|
5686
|
+
<div class="pf-c-wizard__header">
|
|
5687
|
+
<button
|
|
5688
|
+
class="pf-c-button pf-m-plain pf-c-wizard__close"
|
|
5689
|
+
type="button"
|
|
5690
|
+
aria-label="Close"
|
|
5691
|
+
>
|
|
5692
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
5693
|
+
</button>
|
|
5694
|
+
<h1 class="pf-c-title pf-m-3xl pf-c-wizard__title">Wizard title</h1>
|
|
5695
|
+
|
|
5696
|
+
<div
|
|
5697
|
+
class="pf-c-wizard__description"
|
|
5698
|
+
>Here is where the description goes</div>
|
|
5699
|
+
</div>
|
|
5700
|
+
<button
|
|
5701
|
+
aria-label="Wizard Header Toggle"
|
|
5702
|
+
class="pf-c-wizard__toggle"
|
|
5703
|
+
aria-expanded="false"
|
|
5704
|
+
>
|
|
5705
|
+
<span class="pf-c-wizard__toggle-list">
|
|
5706
|
+
<span class="pf-c-wizard__toggle-list-item">
|
|
5707
|
+
<span class="pf-c-wizard__toggle-num">2</span>
|
|
5708
|
+
Configuration
|
|
5709
|
+
<i
|
|
5710
|
+
class="fas fa-angle-right pf-c-wizard__toggle-separator"
|
|
5711
|
+
aria-hidden="true"
|
|
5712
|
+
></i>
|
|
5713
|
+
</span>
|
|
5714
|
+
<span class="pf-c-wizard__toggle-list-item">Substep B</span>
|
|
5715
|
+
</span>
|
|
5716
|
+
<span class="pf-c-wizard__toggle-icon">
|
|
5717
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5718
|
+
</span>
|
|
5719
|
+
</button>
|
|
5720
|
+
<div class="pf-c-wizard__outer-wrap">
|
|
5721
|
+
<div class="pf-c-wizard__inner-wrap">
|
|
5722
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
5723
|
+
<ol class="pf-c-wizard__nav-list">
|
|
5724
|
+
<li class="pf-c-wizard__nav-item">
|
|
5725
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
5726
|
+
</li>
|
|
5727
|
+
<li class="pf-c-wizard__nav-item">
|
|
5728
|
+
<button
|
|
5729
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
5730
|
+
>Configuration</button>
|
|
5731
|
+
<ol class="pf-c-wizard__nav-list">
|
|
5732
|
+
<li class="pf-c-wizard__nav-item">
|
|
5733
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
5734
|
+
</li>
|
|
5735
|
+
<li class="pf-c-wizard__nav-item">
|
|
5736
|
+
<button
|
|
5737
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
5738
|
+
aria-current="page"
|
|
5739
|
+
>Substep B</button>
|
|
5740
|
+
</li>
|
|
5741
|
+
<li class="pf-c-wizard__nav-item">
|
|
5742
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
5743
|
+
</li>
|
|
5744
|
+
</ol>
|
|
5745
|
+
</li>
|
|
5746
|
+
<li class="pf-c-wizard__nav-item">
|
|
5747
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
5748
|
+
</li>
|
|
5749
|
+
<li class="pf-c-wizard__nav-item">
|
|
5750
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
5751
|
+
</li>
|
|
5752
|
+
</ol>
|
|
5753
|
+
</nav>
|
|
5754
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
5755
|
+
<div class="pf-c-drawer pf-m-inline">
|
|
5756
|
+
<div class="pf-c-drawer__main">
|
|
5757
|
+
<div class="pf-c-drawer__content">
|
|
3296
5758
|
<div class="pf-c-wizard__main-body">
|
|
3297
|
-
<
|
|
3298
|
-
|
|
3299
|
-
|
|
3300
|
-
|
|
3301
|
-
|
|
3302
|
-
|
|
3303
|
-
|
|
3304
|
-
|
|
3305
|
-
|
|
3306
|
-
|
|
3307
|
-
|
|
3308
|
-
|
|
3309
|
-
|
|
3310
|
-
|
|
3311
|
-
|
|
3312
|
-
|
|
3313
|
-
|
|
3314
|
-
|
|
3315
|
-
|
|
3316
|
-
|
|
3317
|
-
|
|
3318
|
-
|
|
3319
|
-
|
|
3320
|
-
|
|
3321
|
-
|
|
3322
|
-
|
|
3323
|
-
|
|
3324
|
-
|
|
5759
|
+
<button
|
|
5760
|
+
class="pf-c-button pf-u-hidden pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
5761
|
+
type="button"
|
|
5762
|
+
>Open drawer</button>
|
|
5763
|
+
<div class="pf-c-content">
|
|
5764
|
+
<h1>Information step content</h1>
|
|
5765
|
+
<p>
|
|
5766
|
+
Wizard description goes here. If you need more assistance,
|
|
5767
|
+
<button
|
|
5768
|
+
class="pf-c-button pf-m-inline pf-m-link"
|
|
5769
|
+
type="button"
|
|
5770
|
+
aria-expanded="false"
|
|
5771
|
+
>see more information</button>
|
|
5772
|
+
in the side drawer.
|
|
5773
|
+
</p>
|
|
5774
|
+
</div>
|
|
5775
|
+
</div>
|
|
5776
|
+
</div>
|
|
5777
|
+
<div
|
|
5778
|
+
class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33"
|
|
5779
|
+
hidden
|
|
5780
|
+
>
|
|
5781
|
+
<div class="pf-c-drawer__body">
|
|
5782
|
+
<div class="pf-c-drawer__head">
|
|
5783
|
+
<h2
|
|
5784
|
+
class="pf-c-title pf-m-xl"
|
|
5785
|
+
>Register with Red Hat connector</h2>
|
|
5786
|
+
<div class="pf-c-drawer__actions">
|
|
5787
|
+
<div class="pf-c-drawer__close">
|
|
3325
5788
|
<button
|
|
3326
|
-
class="pf-c-
|
|
3327
|
-
|
|
3328
|
-
|
|
3329
|
-
|
|
3330
|
-
|
|
3331
|
-
|
|
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
|
-
/>
|
|
5789
|
+
class="pf-c-button pf-m-plain"
|
|
5790
|
+
type="button"
|
|
5791
|
+
aria-label="Close drawer panel"
|
|
5792
|
+
>
|
|
5793
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
5794
|
+
</button>
|
|
3471
5795
|
</div>
|
|
3472
5796
|
</div>
|
|
3473
|
-
</
|
|
5797
|
+
</div>
|
|
5798
|
+
</div>
|
|
5799
|
+
<div class="pf-c-drawer__body">
|
|
5800
|
+
<div class="pf-c-content">
|
|
5801
|
+
<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>
|
|
5802
|
+
|
|
5803
|
+
<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>
|
|
5804
|
+
|
|
5805
|
+
<p>
|
|
5806
|
+
Aenean hendrerit quam velit, eget euismod ex sagittis a. Fusce a ante ut ante malesuada tincidunt.
|
|
5807
|
+
<a
|
|
5808
|
+
href="#"
|
|
5809
|
+
>Vestibulum facilisis ante eros, eget volutpat risus lobortis non.</a>
|
|
5810
|
+
</p>
|
|
5811
|
+
<a href="#">
|
|
5812
|
+
<span
|
|
5813
|
+
class="pf-l-flex pf-m-space-items-sm pf-m-nowrap"
|
|
5814
|
+
>
|
|
5815
|
+
<span>Learn about Red Hat connector</span>
|
|
5816
|
+
<i
|
|
5817
|
+
class="fas fa-external-link-alt"
|
|
5818
|
+
aria-hidden="true"
|
|
5819
|
+
></i>
|
|
5820
|
+
</span>
|
|
5821
|
+
</a>
|
|
5822
|
+
</div>
|
|
3474
5823
|
</div>
|
|
3475
|
-
</
|
|
5824
|
+
</div>
|
|
3476
5825
|
</div>
|
|
3477
5826
|
<footer class="pf-c-wizard__footer">
|
|
3478
5827
|
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
@@ -3482,45 +5831,7 @@ wrapperTag: div
|
|
|
3482
5831
|
</div>
|
|
3483
5832
|
</footer>
|
|
3484
5833
|
</div>
|
|
3485
|
-
</
|
|
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>
|
|
3499
|
-
</div>
|
|
3500
|
-
</div>
|
|
3501
|
-
</div>
|
|
3502
|
-
</div>
|
|
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>
|
|
3522
|
-
</div>
|
|
3523
|
-
</div>
|
|
5834
|
+
</main>
|
|
3524
5835
|
</div>
|
|
3525
5836
|
</div>
|
|
3526
5837
|
</div>
|
|
@@ -6655,47 +8966,45 @@ wrapperTag: div
|
|
|
6655
8966
|
<div class="pf-c-drawer__content">
|
|
6656
8967
|
<div class="pf-c-wizard__outer-wrap">
|
|
6657
8968
|
<div class="pf-c-wizard__inner-wrap">
|
|
6658
|
-
<
|
|
6659
|
-
<
|
|
6660
|
-
<
|
|
8969
|
+
<nav class="pf-c-wizard__nav" aria-label="Steps">
|
|
8970
|
+
<ol class="pf-c-wizard__nav-list">
|
|
8971
|
+
<li class="pf-c-wizard__nav-item">
|
|
8972
|
+
<button class="pf-c-wizard__nav-link">Information</button>
|
|
8973
|
+
</li>
|
|
8974
|
+
<li class="pf-c-wizard__nav-item">
|
|
8975
|
+
<button
|
|
8976
|
+
class="pf-c-wizard__nav-link pf-m-current"
|
|
8977
|
+
>Configuration</button>
|
|
6661
8978
|
<ol class="pf-c-wizard__nav-list">
|
|
6662
8979
|
<li class="pf-c-wizard__nav-item">
|
|
6663
|
-
<button class="pf-c-wizard__nav-link">
|
|
8980
|
+
<button class="pf-c-wizard__nav-link">Substep A</button>
|
|
6664
8981
|
</li>
|
|
6665
8982
|
<li class="pf-c-wizard__nav-item">
|
|
6666
8983
|
<button
|
|
6667
8984
|
class="pf-c-wizard__nav-link pf-m-current"
|
|
6668
|
-
|
|
6669
|
-
|
|
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>
|
|
8985
|
+
aria-current="page"
|
|
8986
|
+
>Substep B</button>
|
|
6690
8987
|
</li>
|
|
6691
8988
|
<li class="pf-c-wizard__nav-item">
|
|
6692
|
-
<button
|
|
6693
|
-
class="pf-c-wizard__nav-link"
|
|
6694
|
-
disabled
|
|
6695
|
-
>Review</button>
|
|
8989
|
+
<button class="pf-c-wizard__nav-link">Substep C</button>
|
|
6696
8990
|
</li>
|
|
6697
8991
|
</ol>
|
|
6698
|
-
</
|
|
8992
|
+
</li>
|
|
8993
|
+
<li class="pf-c-wizard__nav-item">
|
|
8994
|
+
<button class="pf-c-wizard__nav-link">Additional</button>
|
|
8995
|
+
</li>
|
|
8996
|
+
<li class="pf-c-wizard__nav-item">
|
|
8997
|
+
<button class="pf-c-wizard__nav-link" disabled>Review</button>
|
|
8998
|
+
</li>
|
|
8999
|
+
</ol>
|
|
9000
|
+
</nav>
|
|
9001
|
+
<main class="pf-c-wizard__main" tabindex="0">
|
|
9002
|
+
<div class="pf-c-wizard__main-body">
|
|
9003
|
+
<button
|
|
9004
|
+
class="pf-c-button pf-m-link pf-m-inline pf-u-float-right pf-u-ml-md"
|
|
9005
|
+
type="button"
|
|
9006
|
+
aria-expanded="true"
|
|
9007
|
+
>Open drawer</button>
|
|
6699
9008
|
<form novalidate class="pf-c-form">
|
|
6700
9009
|
<div class="pf-c-form__group">
|
|
6701
9010
|
<div class="pf-c-form__group-label">
|
|
@@ -6862,16 +9171,6 @@ wrapperTag: div
|
|
|
6862
9171
|
</div>
|
|
6863
9172
|
</main>
|
|
6864
9173
|
</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
9174
|
</div>
|
|
6876
9175
|
</div>
|
|
6877
9176
|
<div class="pf-c-drawer__panel pf-m-light-200 pf-m-width-33">
|
|
@@ -6916,6 +9215,13 @@ wrapperTag: div
|
|
|
6916
9215
|
</div>
|
|
6917
9216
|
</div>
|
|
6918
9217
|
</div>
|
|
9218
|
+
<footer class="pf-c-wizard__footer">
|
|
9219
|
+
<button class="pf-c-button pf-m-primary" type="submit">Next</button>
|
|
9220
|
+
<button class="pf-c-button pf-m-secondary" type="button">Back</button>
|
|
9221
|
+
<div class="pf-c-wizard__footer-cancel">
|
|
9222
|
+
<button class="pf-c-button pf-m-link" type="button">Cancel</button>
|
|
9223
|
+
</div>
|
|
9224
|
+
</footer>
|
|
6919
9225
|
</div>
|
|
6920
9226
|
</div>
|
|
6921
9227
|
</section>
|