@patternfly/patternfly 4.194.2 → 4.195.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/RELEASE-NOTES.md +25 -0
- package/docs/demos/Drawer/examples/Drawer.md +1930 -0
- package/docs/demos/JumpLinks/examples/JumpLinks.md +1946 -0
- package/docs/utilities/Text/examples/Text.md +43 -26
- package/package.json +1 -1
- package/patternfly-addons.css +24 -0
- package/patternfly-charts-theme-dark.css +6 -1
- package/themes/dark/_patternfly-charts-theme-dark.scss +6 -1
- package/utilities/Text/text.css +24 -0
- package/utilities/Text/text.scss +24 -0
|
@@ -959,6 +959,10 @@ section: components
|
|
|
959
959
|
<div class="pf-c-sidebar__content">
|
|
960
960
|
<section class="pf-c-page__main-section">
|
|
961
961
|
<div class="pf-c-content">
|
|
962
|
+
<p>
|
|
963
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
964
|
+
</p>
|
|
965
|
+
|
|
962
966
|
<h2
|
|
963
967
|
id="jump-links-collapsed-mobile-example-jump-links-first"
|
|
964
968
|
>First section</h2>
|
|
@@ -1950,6 +1954,10 @@ section: components
|
|
|
1950
1954
|
<div class="pf-c-sidebar__content">
|
|
1951
1955
|
<section class="pf-c-page__main-section">
|
|
1952
1956
|
<div class="pf-c-content">
|
|
1957
|
+
<p>
|
|
1958
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
1959
|
+
</p>
|
|
1960
|
+
|
|
1953
1961
|
<h2
|
|
1954
1962
|
id="jump-links-vertical-expanded-mobile-example-jump-links-first"
|
|
1955
1963
|
>First section</h2>
|
|
@@ -2941,6 +2949,10 @@ section: components
|
|
|
2941
2949
|
<div class="pf-c-sidebar__content">
|
|
2942
2950
|
<section class="pf-c-page__main-section">
|
|
2943
2951
|
<div class="pf-c-content">
|
|
2952
|
+
<p>
|
|
2953
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
2954
|
+
</p>
|
|
2955
|
+
|
|
2944
2956
|
<h2
|
|
2945
2957
|
id="jump-links-vertical-toggle-text-mobile-example-jump-links-first"
|
|
2946
2958
|
>First section</h2>
|
|
@@ -3895,6 +3907,10 @@ section: components
|
|
|
3895
3907
|
</section>
|
|
3896
3908
|
<section class="pf-c-page__main-section">
|
|
3897
3909
|
<div class="pf-c-content">
|
|
3910
|
+
<p>
|
|
3911
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
3912
|
+
</p>
|
|
3913
|
+
|
|
3898
3914
|
<h2 id="-first">First section</h2>
|
|
3899
3915
|
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
3900
3916
|
|
|
@@ -3915,3 +3931,1933 @@ section: components
|
|
|
3915
3931
|
</div>
|
|
3916
3932
|
|
|
3917
3933
|
```
|
|
3934
|
+
|
|
3935
|
+
### Jump links in drawer
|
|
3936
|
+
|
|
3937
|
+
```html isFullscreen
|
|
3938
|
+
<div class="pf-c-page" id="jump-links-drawer">
|
|
3939
|
+
<a
|
|
3940
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
3941
|
+
href="#main-content-jump-links-drawer"
|
|
3942
|
+
>Skip to content</a>
|
|
3943
|
+
<header class="pf-c-masthead" id="jump-links-drawer-masthead">
|
|
3944
|
+
<span class="pf-c-masthead__toggle">
|
|
3945
|
+
<button
|
|
3946
|
+
class="pf-c-button pf-m-plain"
|
|
3947
|
+
type="button"
|
|
3948
|
+
aria-label="Global navigation"
|
|
3949
|
+
>
|
|
3950
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
3951
|
+
</button>
|
|
3952
|
+
</span>
|
|
3953
|
+
<div class="pf-c-masthead__main">
|
|
3954
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
3955
|
+
<picture
|
|
3956
|
+
class="pf-c-brand pf-m-picture"
|
|
3957
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
3958
|
+
>
|
|
3959
|
+
<source
|
|
3960
|
+
media="(min-width: 768px)"
|
|
3961
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
3962
|
+
/>
|
|
3963
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
3964
|
+
<img
|
|
3965
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
3966
|
+
alt="Fallback patternFly default logo"
|
|
3967
|
+
/>
|
|
3968
|
+
</picture>
|
|
3969
|
+
</a>
|
|
3970
|
+
</div>
|
|
3971
|
+
<div class="pf-c-masthead__content">
|
|
3972
|
+
<div
|
|
3973
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
3974
|
+
id="jump-links-drawer-masthead-toolbar"
|
|
3975
|
+
>
|
|
3976
|
+
<div class="pf-c-toolbar__content">
|
|
3977
|
+
<div class="pf-c-toolbar__content-section">
|
|
3978
|
+
<div
|
|
3979
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
3980
|
+
>
|
|
3981
|
+
<div class="pf-c-toolbar__item">
|
|
3982
|
+
<button
|
|
3983
|
+
class="pf-c-button pf-m-plain"
|
|
3984
|
+
type="button"
|
|
3985
|
+
aria-label="Notifications"
|
|
3986
|
+
>
|
|
3987
|
+
<span class="pf-c-notification-badge">
|
|
3988
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
3989
|
+
</span>
|
|
3990
|
+
</button>
|
|
3991
|
+
</div>
|
|
3992
|
+
<div
|
|
3993
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
3994
|
+
>
|
|
3995
|
+
<div class="pf-c-toolbar__item">
|
|
3996
|
+
<nav
|
|
3997
|
+
class="pf-c-app-launcher"
|
|
3998
|
+
aria-label="Application launcher"
|
|
3999
|
+
id="jump-links-drawer-masthead-icon-group--app-launcher"
|
|
4000
|
+
>
|
|
4001
|
+
<button
|
|
4002
|
+
class="pf-c-app-launcher__toggle"
|
|
4003
|
+
type="button"
|
|
4004
|
+
id="jump-links-drawer-masthead-icon-group--app-launcher-button"
|
|
4005
|
+
aria-expanded="false"
|
|
4006
|
+
aria-label="Application launcher"
|
|
4007
|
+
>
|
|
4008
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
4009
|
+
</button>
|
|
4010
|
+
<div
|
|
4011
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
4012
|
+
hidden
|
|
4013
|
+
>
|
|
4014
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
4015
|
+
<div class="pf-c-search-input">
|
|
4016
|
+
<div class="pf-c-search-input__bar">
|
|
4017
|
+
<span class="pf-c-search-input__text">
|
|
4018
|
+
<span class="pf-c-search-input__icon">
|
|
4019
|
+
<i
|
|
4020
|
+
class="fas fa-search fa-fw"
|
|
4021
|
+
aria-hidden="true"
|
|
4022
|
+
></i>
|
|
4023
|
+
</span>
|
|
4024
|
+
<input
|
|
4025
|
+
class="pf-c-search-input__text-input"
|
|
4026
|
+
type="text"
|
|
4027
|
+
placeholder="Filter by name"
|
|
4028
|
+
aria-label="Filter by name"
|
|
4029
|
+
/>
|
|
4030
|
+
</span>
|
|
4031
|
+
</div>
|
|
4032
|
+
</div>
|
|
4033
|
+
</div>
|
|
4034
|
+
<section class="pf-c-app-launcher__group">
|
|
4035
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
4036
|
+
<ul>
|
|
4037
|
+
<li
|
|
4038
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
4039
|
+
>
|
|
4040
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4041
|
+
Link 1
|
|
4042
|
+
<span
|
|
4043
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4044
|
+
>
|
|
4045
|
+
<i
|
|
4046
|
+
class="fas fa-external-link-alt"
|
|
4047
|
+
aria-hidden="true"
|
|
4048
|
+
></i>
|
|
4049
|
+
</span>
|
|
4050
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4051
|
+
</a>
|
|
4052
|
+
<button
|
|
4053
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4054
|
+
type="button"
|
|
4055
|
+
aria-label="Favorite"
|
|
4056
|
+
>
|
|
4057
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4058
|
+
</button>
|
|
4059
|
+
</li>
|
|
4060
|
+
<li
|
|
4061
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
4062
|
+
>
|
|
4063
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4064
|
+
Link 2
|
|
4065
|
+
<span
|
|
4066
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4067
|
+
>
|
|
4068
|
+
<i
|
|
4069
|
+
class="fas fa-external-link-alt"
|
|
4070
|
+
aria-hidden="true"
|
|
4071
|
+
></i>
|
|
4072
|
+
</span>
|
|
4073
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4074
|
+
</a>
|
|
4075
|
+
<button
|
|
4076
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4077
|
+
type="button"
|
|
4078
|
+
aria-label="Favorite"
|
|
4079
|
+
>
|
|
4080
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4081
|
+
</button>
|
|
4082
|
+
</li>
|
|
4083
|
+
</ul>
|
|
4084
|
+
</section>
|
|
4085
|
+
<hr class="pf-c-divider" />
|
|
4086
|
+
<section class="pf-c-app-launcher__group">
|
|
4087
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
4088
|
+
<ul>
|
|
4089
|
+
<li
|
|
4090
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
4091
|
+
>
|
|
4092
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4093
|
+
Link 1
|
|
4094
|
+
<span
|
|
4095
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4096
|
+
>
|
|
4097
|
+
<i
|
|
4098
|
+
class="fas fa-external-link-alt"
|
|
4099
|
+
aria-hidden="true"
|
|
4100
|
+
></i>
|
|
4101
|
+
</span>
|
|
4102
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4103
|
+
</a>
|
|
4104
|
+
<button
|
|
4105
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4106
|
+
type="button"
|
|
4107
|
+
aria-label="Favorite"
|
|
4108
|
+
>
|
|
4109
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4110
|
+
</button>
|
|
4111
|
+
</li>
|
|
4112
|
+
<li
|
|
4113
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
4114
|
+
>
|
|
4115
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
4116
|
+
Link 2
|
|
4117
|
+
<span
|
|
4118
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
4119
|
+
>
|
|
4120
|
+
<i
|
|
4121
|
+
class="fas fa-external-link-alt"
|
|
4122
|
+
aria-hidden="true"
|
|
4123
|
+
></i>
|
|
4124
|
+
</span>
|
|
4125
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
4126
|
+
</a>
|
|
4127
|
+
<button
|
|
4128
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
4129
|
+
type="button"
|
|
4130
|
+
aria-label="Favorite"
|
|
4131
|
+
>
|
|
4132
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
4133
|
+
</button>
|
|
4134
|
+
</li>
|
|
4135
|
+
</ul>
|
|
4136
|
+
</section>
|
|
4137
|
+
</div>
|
|
4138
|
+
</nav>
|
|
4139
|
+
</div>
|
|
4140
|
+
<div class="pf-c-toolbar__item">
|
|
4141
|
+
<div class="pf-c-dropdown">
|
|
4142
|
+
<button
|
|
4143
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4144
|
+
id="jump-links-drawer-masthead-settings-button"
|
|
4145
|
+
aria-expanded="false"
|
|
4146
|
+
type="button"
|
|
4147
|
+
aria-label="Settings"
|
|
4148
|
+
>
|
|
4149
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
4150
|
+
</button>
|
|
4151
|
+
<ul
|
|
4152
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4153
|
+
aria-labelledby="jump-links-drawer-masthead-settings-button"
|
|
4154
|
+
hidden
|
|
4155
|
+
>
|
|
4156
|
+
<li>
|
|
4157
|
+
<button
|
|
4158
|
+
class="pf-c-dropdown__menu-item"
|
|
4159
|
+
type="button"
|
|
4160
|
+
>Settings</button>
|
|
4161
|
+
</li>
|
|
4162
|
+
<li>
|
|
4163
|
+
<button
|
|
4164
|
+
class="pf-c-dropdown__menu-item"
|
|
4165
|
+
type="button"
|
|
4166
|
+
>Use the beta release</button>
|
|
4167
|
+
</li>
|
|
4168
|
+
</ul>
|
|
4169
|
+
</div>
|
|
4170
|
+
</div>
|
|
4171
|
+
<div class="pf-c-toolbar__item">
|
|
4172
|
+
<div class="pf-c-dropdown">
|
|
4173
|
+
<button
|
|
4174
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
4175
|
+
id="jump-links-drawer-masthead-help-button"
|
|
4176
|
+
aria-expanded="false"
|
|
4177
|
+
type="button"
|
|
4178
|
+
aria-label="Help"
|
|
4179
|
+
>
|
|
4180
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
4181
|
+
</button>
|
|
4182
|
+
<ul
|
|
4183
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
4184
|
+
aria-labelledby="jump-links-drawer-masthead-help-button"
|
|
4185
|
+
hidden
|
|
4186
|
+
>
|
|
4187
|
+
<li>
|
|
4188
|
+
<button
|
|
4189
|
+
class="pf-c-dropdown__menu-item"
|
|
4190
|
+
type="button"
|
|
4191
|
+
>Support options</button>
|
|
4192
|
+
</li>
|
|
4193
|
+
<li>
|
|
4194
|
+
<button
|
|
4195
|
+
class="pf-c-dropdown__menu-item"
|
|
4196
|
+
type="button"
|
|
4197
|
+
>Open support case</button>
|
|
4198
|
+
</li>
|
|
4199
|
+
<li>
|
|
4200
|
+
<button
|
|
4201
|
+
class="pf-c-dropdown__menu-item"
|
|
4202
|
+
type="button"
|
|
4203
|
+
>API documentation</button>
|
|
4204
|
+
</li>
|
|
4205
|
+
</ul>
|
|
4206
|
+
</div>
|
|
4207
|
+
</div>
|
|
4208
|
+
</div>
|
|
4209
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
4210
|
+
<div class="pf-c-dropdown">
|
|
4211
|
+
<button
|
|
4212
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
4213
|
+
type="button"
|
|
4214
|
+
aria-expanded="false"
|
|
4215
|
+
aria-label="Actions"
|
|
4216
|
+
>
|
|
4217
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
4218
|
+
</button>
|
|
4219
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
4220
|
+
<div class="pf-c-menu__content">
|
|
4221
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
4222
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4223
|
+
<li
|
|
4224
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
4225
|
+
role="none"
|
|
4226
|
+
>
|
|
4227
|
+
<button
|
|
4228
|
+
class="pf-c-menu__item"
|
|
4229
|
+
type="button"
|
|
4230
|
+
disabled
|
|
4231
|
+
role="menuitem"
|
|
4232
|
+
>
|
|
4233
|
+
<span class="pf-c-menu__item-description">
|
|
4234
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
4235
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
4236
|
+
</span>
|
|
4237
|
+
</button>
|
|
4238
|
+
</li>
|
|
4239
|
+
<li
|
|
4240
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
4241
|
+
role="none"
|
|
4242
|
+
>
|
|
4243
|
+
<button
|
|
4244
|
+
class="pf-c-menu__item"
|
|
4245
|
+
type="button"
|
|
4246
|
+
disabled
|
|
4247
|
+
role="menuitem"
|
|
4248
|
+
>
|
|
4249
|
+
<span class="pf-c-menu__item-description">
|
|
4250
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
4251
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
4252
|
+
</span>
|
|
4253
|
+
</button>
|
|
4254
|
+
</li>
|
|
4255
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
4256
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4257
|
+
<button
|
|
4258
|
+
class="pf-c-menu__item"
|
|
4259
|
+
type="button"
|
|
4260
|
+
role="menuitem"
|
|
4261
|
+
>
|
|
4262
|
+
<span class="pf-c-menu__item-main">
|
|
4263
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
4264
|
+
</span>
|
|
4265
|
+
</button>
|
|
4266
|
+
</li>
|
|
4267
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4268
|
+
<button
|
|
4269
|
+
class="pf-c-menu__item"
|
|
4270
|
+
type="button"
|
|
4271
|
+
role="menuitem"
|
|
4272
|
+
>
|
|
4273
|
+
<span class="pf-c-menu__item-main">
|
|
4274
|
+
<span
|
|
4275
|
+
class="pf-c-menu__item-text"
|
|
4276
|
+
>User management</span>
|
|
4277
|
+
</span>
|
|
4278
|
+
</button>
|
|
4279
|
+
</li>
|
|
4280
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4281
|
+
<button
|
|
4282
|
+
class="pf-c-menu__item"
|
|
4283
|
+
type="button"
|
|
4284
|
+
role="menuitem"
|
|
4285
|
+
>
|
|
4286
|
+
<span class="pf-c-menu__item-main">
|
|
4287
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
4288
|
+
</span>
|
|
4289
|
+
</button>
|
|
4290
|
+
</li>
|
|
4291
|
+
</ul>
|
|
4292
|
+
</section>
|
|
4293
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
4294
|
+
<section class="pf-c-menu__group">
|
|
4295
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4296
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4297
|
+
<button
|
|
4298
|
+
class="pf-c-menu__item"
|
|
4299
|
+
type="button"
|
|
4300
|
+
role="menuitem"
|
|
4301
|
+
aria-expanded="false"
|
|
4302
|
+
>
|
|
4303
|
+
<span class="pf-c-menu__item-main">
|
|
4304
|
+
<span class="pf-c-menu__item-icon">
|
|
4305
|
+
<i
|
|
4306
|
+
class="fas fa-fw fa-cog"
|
|
4307
|
+
aria-hidden="true"
|
|
4308
|
+
></i>
|
|
4309
|
+
</span>
|
|
4310
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
4311
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
4312
|
+
<i class="fas fa-angle-right"></i>
|
|
4313
|
+
</span>
|
|
4314
|
+
</span>
|
|
4315
|
+
</button>
|
|
4316
|
+
<div class="pf-c-menu" hidden>
|
|
4317
|
+
<div class="pf-c-menu__content">
|
|
4318
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4319
|
+
<li
|
|
4320
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
4321
|
+
role="none"
|
|
4322
|
+
>
|
|
4323
|
+
<button
|
|
4324
|
+
class="pf-c-menu__item"
|
|
4325
|
+
type="button"
|
|
4326
|
+
role="menuitem"
|
|
4327
|
+
>
|
|
4328
|
+
<span class="pf-c-menu__item-main">
|
|
4329
|
+
<span
|
|
4330
|
+
class="pf-c-menu__item-toggle-icon"
|
|
4331
|
+
>
|
|
4332
|
+
<i class="fas fa-angle-left"></i>
|
|
4333
|
+
</span>
|
|
4334
|
+
<span class="pf-c-menu__item-icon">
|
|
4335
|
+
<i
|
|
4336
|
+
class="fas fa-fw fa-cog"
|
|
4337
|
+
aria-hidden="true"
|
|
4338
|
+
></i>
|
|
4339
|
+
</span>
|
|
4340
|
+
<span
|
|
4341
|
+
class="pf-c-menu__item-text"
|
|
4342
|
+
>Settings</span>
|
|
4343
|
+
</span>
|
|
4344
|
+
</button>
|
|
4345
|
+
</li>
|
|
4346
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
4347
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4348
|
+
<a
|
|
4349
|
+
class="pf-c-menu__item"
|
|
4350
|
+
href="#"
|
|
4351
|
+
role="menuitem"
|
|
4352
|
+
>
|
|
4353
|
+
<span class="pf-c-menu__item-main">
|
|
4354
|
+
<span
|
|
4355
|
+
class="pf-c-menu__item-text"
|
|
4356
|
+
>Customer support</span>
|
|
4357
|
+
</span>
|
|
4358
|
+
</a>
|
|
4359
|
+
</li>
|
|
4360
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4361
|
+
<a
|
|
4362
|
+
class="pf-c-menu__item"
|
|
4363
|
+
href="#"
|
|
4364
|
+
role="menuitem"
|
|
4365
|
+
>
|
|
4366
|
+
<span class="pf-c-menu__item-main">
|
|
4367
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
4368
|
+
</span>
|
|
4369
|
+
</a>
|
|
4370
|
+
</li>
|
|
4371
|
+
</ul>
|
|
4372
|
+
</div>
|
|
4373
|
+
</div>
|
|
4374
|
+
</li>
|
|
4375
|
+
|
|
4376
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4377
|
+
<button
|
|
4378
|
+
class="pf-c-menu__item"
|
|
4379
|
+
type="button"
|
|
4380
|
+
role="menuitem"
|
|
4381
|
+
aria-expanded="false"
|
|
4382
|
+
>
|
|
4383
|
+
<span class="pf-c-menu__item-main">
|
|
4384
|
+
<span class="pf-c-menu__item-icon">
|
|
4385
|
+
<i
|
|
4386
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
4387
|
+
aria-hidden="true"
|
|
4388
|
+
></i>
|
|
4389
|
+
</span>
|
|
4390
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
4391
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
4392
|
+
<i class="fas fa-angle-right"></i>
|
|
4393
|
+
</span>
|
|
4394
|
+
</span>
|
|
4395
|
+
</button>
|
|
4396
|
+
<div class="pf-c-menu" hidden>
|
|
4397
|
+
<div class="pf-c-menu__content">
|
|
4398
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4399
|
+
<li
|
|
4400
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
4401
|
+
role="none"
|
|
4402
|
+
>
|
|
4403
|
+
<button
|
|
4404
|
+
class="pf-c-menu__item"
|
|
4405
|
+
type="button"
|
|
4406
|
+
role="menuitem"
|
|
4407
|
+
>
|
|
4408
|
+
<span class="pf-c-menu__item-main">
|
|
4409
|
+
<span
|
|
4410
|
+
class="pf-c-menu__item-toggle-icon"
|
|
4411
|
+
>
|
|
4412
|
+
<i class="fas fa-angle-left"></i>
|
|
4413
|
+
</span>
|
|
4414
|
+
<span class="pf-c-menu__item-icon">
|
|
4415
|
+
<i
|
|
4416
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
4417
|
+
aria-hidden="true"
|
|
4418
|
+
></i>
|
|
4419
|
+
</span>
|
|
4420
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
4421
|
+
</span>
|
|
4422
|
+
</button>
|
|
4423
|
+
</li>
|
|
4424
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
4425
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4426
|
+
<a
|
|
4427
|
+
class="pf-c-menu__item"
|
|
4428
|
+
href="#"
|
|
4429
|
+
role="menuitem"
|
|
4430
|
+
>
|
|
4431
|
+
<span class="pf-c-menu__item-main">
|
|
4432
|
+
<span
|
|
4433
|
+
class="pf-c-menu__item-text"
|
|
4434
|
+
>Support options</span>
|
|
4435
|
+
</span>
|
|
4436
|
+
</a>
|
|
4437
|
+
</li>
|
|
4438
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4439
|
+
<a
|
|
4440
|
+
class="pf-c-menu__item"
|
|
4441
|
+
href="#"
|
|
4442
|
+
role="menuitem"
|
|
4443
|
+
>
|
|
4444
|
+
<span class="pf-c-menu__item-main">
|
|
4445
|
+
<span
|
|
4446
|
+
class="pf-c-menu__item-text"
|
|
4447
|
+
>Open support case</span>
|
|
4448
|
+
</span>
|
|
4449
|
+
</a>
|
|
4450
|
+
</li>
|
|
4451
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4452
|
+
<a
|
|
4453
|
+
class="pf-c-menu__item"
|
|
4454
|
+
href="#"
|
|
4455
|
+
role="menuitem"
|
|
4456
|
+
>
|
|
4457
|
+
<span class="pf-c-menu__item-main">
|
|
4458
|
+
<span
|
|
4459
|
+
class="pf-c-menu__item-text"
|
|
4460
|
+
>API documentation</span>
|
|
4461
|
+
</span>
|
|
4462
|
+
</a>
|
|
4463
|
+
</li>
|
|
4464
|
+
</ul>
|
|
4465
|
+
</div>
|
|
4466
|
+
</div>
|
|
4467
|
+
</li>
|
|
4468
|
+
|
|
4469
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4470
|
+
<button
|
|
4471
|
+
class="pf-c-menu__item"
|
|
4472
|
+
type="button"
|
|
4473
|
+
role="menuitem"
|
|
4474
|
+
>
|
|
4475
|
+
<span class="pf-c-menu__item-main">
|
|
4476
|
+
<span class="pf-c-menu__item-icon">
|
|
4477
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
4478
|
+
</span>
|
|
4479
|
+
<span
|
|
4480
|
+
class="pf-c-menu__item-text"
|
|
4481
|
+
>Application launcher</span>
|
|
4482
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
4483
|
+
<i class="fas fa-angle-right"></i>
|
|
4484
|
+
</span>
|
|
4485
|
+
</span>
|
|
4486
|
+
</button>
|
|
4487
|
+
<div class="pf-c-menu" hidden>
|
|
4488
|
+
<div class="pf-c-menu__header">
|
|
4489
|
+
<button
|
|
4490
|
+
class="pf-c-menu__item"
|
|
4491
|
+
type="button"
|
|
4492
|
+
role="menuitem"
|
|
4493
|
+
>
|
|
4494
|
+
<span class="pf-c-menu__item-main">
|
|
4495
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
4496
|
+
<i class="fas fa-angle-left"></i>
|
|
4497
|
+
</span>
|
|
4498
|
+
<span class="pf-c-menu__item-icon">
|
|
4499
|
+
<i
|
|
4500
|
+
class="fas fa-fw fa-th"
|
|
4501
|
+
aria-hidden="true"
|
|
4502
|
+
></i>
|
|
4503
|
+
</span>
|
|
4504
|
+
<span
|
|
4505
|
+
class="pf-c-menu__item-text"
|
|
4506
|
+
>Application launcher</span>
|
|
4507
|
+
</span>
|
|
4508
|
+
</button>
|
|
4509
|
+
</div>
|
|
4510
|
+
<div class="pf-c-menu__search">
|
|
4511
|
+
<div class="pf-c-menu__search-input">
|
|
4512
|
+
<div class="pf-c-search-input">
|
|
4513
|
+
<div class="pf-c-search-input__bar">
|
|
4514
|
+
<span class="pf-c-search-input__text">
|
|
4515
|
+
<span class="pf-c-search-input__icon">
|
|
4516
|
+
<i
|
|
4517
|
+
class="fas fa-search fa-fw"
|
|
4518
|
+
aria-hidden="true"
|
|
4519
|
+
></i>
|
|
4520
|
+
</span>
|
|
4521
|
+
<input
|
|
4522
|
+
class="pf-c-search-input__text-input"
|
|
4523
|
+
type="text"
|
|
4524
|
+
placeholder="Search"
|
|
4525
|
+
aria-label="Search"
|
|
4526
|
+
/>
|
|
4527
|
+
</span>
|
|
4528
|
+
</div>
|
|
4529
|
+
</div>
|
|
4530
|
+
</div>
|
|
4531
|
+
</div>
|
|
4532
|
+
<hr class="pf-c-divider" />
|
|
4533
|
+
<section class="pf-c-menu__group">
|
|
4534
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
4535
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4536
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4537
|
+
<a
|
|
4538
|
+
class="pf-c-menu__item"
|
|
4539
|
+
href="#"
|
|
4540
|
+
role="menuitem"
|
|
4541
|
+
>
|
|
4542
|
+
<span class="pf-c-menu__item-main">
|
|
4543
|
+
<span
|
|
4544
|
+
class="pf-c-menu__item-text"
|
|
4545
|
+
>Link 1</span>
|
|
4546
|
+
</span>
|
|
4547
|
+
</a>
|
|
4548
|
+
<button
|
|
4549
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
4550
|
+
type="button"
|
|
4551
|
+
aria-label="Starred"
|
|
4552
|
+
>
|
|
4553
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4554
|
+
<i
|
|
4555
|
+
class="fas fa-star"
|
|
4556
|
+
aria-hidden="true"
|
|
4557
|
+
></i>
|
|
4558
|
+
</span>
|
|
4559
|
+
</button>
|
|
4560
|
+
</li>
|
|
4561
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4562
|
+
<a
|
|
4563
|
+
class="pf-c-menu__item"
|
|
4564
|
+
href="#"
|
|
4565
|
+
role="menuitem"
|
|
4566
|
+
target="_blank"
|
|
4567
|
+
>
|
|
4568
|
+
<span class="pf-c-menu__item-main">
|
|
4569
|
+
<span
|
|
4570
|
+
class="pf-c-menu__item-text"
|
|
4571
|
+
>Link 2</span>
|
|
4572
|
+
<span
|
|
4573
|
+
class="pf-c-menu__item-external-icon"
|
|
4574
|
+
>
|
|
4575
|
+
<i
|
|
4576
|
+
class="fas fa-external-link-alt"
|
|
4577
|
+
aria-hidden="true"
|
|
4578
|
+
></i>
|
|
4579
|
+
</span>
|
|
4580
|
+
<span
|
|
4581
|
+
class="pf-screen-reader"
|
|
4582
|
+
>(opens new window)</span>
|
|
4583
|
+
</span>
|
|
4584
|
+
</a>
|
|
4585
|
+
<button
|
|
4586
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
4587
|
+
type="button"
|
|
4588
|
+
aria-label="Not starred"
|
|
4589
|
+
>
|
|
4590
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4591
|
+
<i
|
|
4592
|
+
class="fas fa-star"
|
|
4593
|
+
aria-hidden="true"
|
|
4594
|
+
></i>
|
|
4595
|
+
</span>
|
|
4596
|
+
</button>
|
|
4597
|
+
</li>
|
|
4598
|
+
</ul>
|
|
4599
|
+
</section>
|
|
4600
|
+
<hr class="pf-c-divider" />
|
|
4601
|
+
<section class="pf-c-menu__group">
|
|
4602
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
4603
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
4604
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4605
|
+
<a
|
|
4606
|
+
class="pf-c-menu__item"
|
|
4607
|
+
href="#"
|
|
4608
|
+
role="menuitem"
|
|
4609
|
+
>
|
|
4610
|
+
<span class="pf-c-menu__item-main">
|
|
4611
|
+
<span
|
|
4612
|
+
class="pf-c-menu__item-text"
|
|
4613
|
+
>Link 1</span>
|
|
4614
|
+
</span>
|
|
4615
|
+
</a>
|
|
4616
|
+
<button
|
|
4617
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
4618
|
+
type="button"
|
|
4619
|
+
aria-label="Not starred"
|
|
4620
|
+
>
|
|
4621
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4622
|
+
<i
|
|
4623
|
+
class="fas fa-star"
|
|
4624
|
+
aria-hidden="true"
|
|
4625
|
+
></i>
|
|
4626
|
+
</span>
|
|
4627
|
+
</button>
|
|
4628
|
+
</li>
|
|
4629
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
4630
|
+
<a
|
|
4631
|
+
class="pf-c-menu__item"
|
|
4632
|
+
href="#"
|
|
4633
|
+
role="menuitem"
|
|
4634
|
+
target="_blank"
|
|
4635
|
+
>
|
|
4636
|
+
<span class="pf-c-menu__item-main">
|
|
4637
|
+
<span
|
|
4638
|
+
class="pf-c-menu__item-text"
|
|
4639
|
+
>Link 2</span>
|
|
4640
|
+
<span
|
|
4641
|
+
class="pf-c-menu__item-external-icon"
|
|
4642
|
+
>
|
|
4643
|
+
<i
|
|
4644
|
+
class="fas fa-external-link-alt"
|
|
4645
|
+
aria-hidden="true"
|
|
4646
|
+
></i>
|
|
4647
|
+
</span>
|
|
4648
|
+
<span
|
|
4649
|
+
class="pf-screen-reader"
|
|
4650
|
+
>(opens new window)</span>
|
|
4651
|
+
</span>
|
|
4652
|
+
</a>
|
|
4653
|
+
<button
|
|
4654
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
4655
|
+
type="button"
|
|
4656
|
+
aria-label="Starred"
|
|
4657
|
+
>
|
|
4658
|
+
<span class="pf-c-menu__item-action-icon">
|
|
4659
|
+
<i
|
|
4660
|
+
class="fas fa-star"
|
|
4661
|
+
aria-hidden="true"
|
|
4662
|
+
></i>
|
|
4663
|
+
</span>
|
|
4664
|
+
</button>
|
|
4665
|
+
</li>
|
|
4666
|
+
</ul>
|
|
4667
|
+
</section>
|
|
4668
|
+
</div>
|
|
4669
|
+
</li>
|
|
4670
|
+
</ul>
|
|
4671
|
+
</section>
|
|
4672
|
+
</div>
|
|
4673
|
+
</div>
|
|
4674
|
+
</div>
|
|
4675
|
+
</div>
|
|
4676
|
+
</div>
|
|
4677
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
4678
|
+
<div
|
|
4679
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
4680
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
4681
|
+
>
|
|
4682
|
+
<button
|
|
4683
|
+
class="pf-c-dropdown__toggle"
|
|
4684
|
+
id="jump-links-drawer-masthead-profile-button"
|
|
4685
|
+
aria-expanded="false"
|
|
4686
|
+
type="button"
|
|
4687
|
+
>
|
|
4688
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
4689
|
+
<img
|
|
4690
|
+
class="pf-c-avatar"
|
|
4691
|
+
src="/assets/images/img_avatar.svg"
|
|
4692
|
+
alt="Avatar image"
|
|
4693
|
+
/>
|
|
4694
|
+
</span>
|
|
4695
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
4696
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
4697
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
4698
|
+
</span>
|
|
4699
|
+
</button>
|
|
4700
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
4701
|
+
<section class="pf-c-dropdown__group">
|
|
4702
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
4703
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
4704
|
+
<div>123456789</div>
|
|
4705
|
+
</div>
|
|
4706
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
4707
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
4708
|
+
<div>mshaksho@redhat.com</div>
|
|
4709
|
+
</div>
|
|
4710
|
+
</section>
|
|
4711
|
+
<hr class="pf-c-divider" />
|
|
4712
|
+
<section class="pf-c-dropdown__group">
|
|
4713
|
+
<ul>
|
|
4714
|
+
<li>
|
|
4715
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
4716
|
+
</li>
|
|
4717
|
+
<li>
|
|
4718
|
+
<a
|
|
4719
|
+
class="pf-c-dropdown__menu-item"
|
|
4720
|
+
href="#"
|
|
4721
|
+
>User management</a>
|
|
4722
|
+
</li>
|
|
4723
|
+
<li>
|
|
4724
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
4725
|
+
</li>
|
|
4726
|
+
</ul>
|
|
4727
|
+
</section>
|
|
4728
|
+
</div>
|
|
4729
|
+
</div>
|
|
4730
|
+
</div>
|
|
4731
|
+
</div>
|
|
4732
|
+
</div>
|
|
4733
|
+
</div>
|
|
4734
|
+
</div>
|
|
4735
|
+
</header>
|
|
4736
|
+
<div class="pf-c-page__sidebar">
|
|
4737
|
+
<div class="pf-c-page__sidebar-body">
|
|
4738
|
+
<nav
|
|
4739
|
+
class="pf-c-nav"
|
|
4740
|
+
id="jump-links-drawer-primary-nav"
|
|
4741
|
+
aria-label="Global"
|
|
4742
|
+
>
|
|
4743
|
+
<ul class="pf-c-nav__list">
|
|
4744
|
+
<li class="pf-c-nav__item">
|
|
4745
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
4746
|
+
</li>
|
|
4747
|
+
<li class="pf-c-nav__item">
|
|
4748
|
+
<a
|
|
4749
|
+
href="#"
|
|
4750
|
+
class="pf-c-nav__link pf-m-current"
|
|
4751
|
+
aria-current="page"
|
|
4752
|
+
>Policy</a>
|
|
4753
|
+
</li>
|
|
4754
|
+
<li class="pf-c-nav__item">
|
|
4755
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
4756
|
+
</li>
|
|
4757
|
+
<li class="pf-c-nav__item">
|
|
4758
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
4759
|
+
</li>
|
|
4760
|
+
<li class="pf-c-nav__item">
|
|
4761
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
4762
|
+
</li>
|
|
4763
|
+
</ul>
|
|
4764
|
+
</nav>
|
|
4765
|
+
</div>
|
|
4766
|
+
</div>
|
|
4767
|
+
<main
|
|
4768
|
+
class="pf-c-page__main"
|
|
4769
|
+
tabindex="-1"
|
|
4770
|
+
id="main-content-jump-links-drawer"
|
|
4771
|
+
>
|
|
4772
|
+
<div class="pf-c-drawer">
|
|
4773
|
+
<div class="pf-c-drawer__main">
|
|
4774
|
+
<div
|
|
4775
|
+
class="pf-c-drawer__content"
|
|
4776
|
+
id="jump-links-drawer-drawer-scrollable-container"
|
|
4777
|
+
>
|
|
4778
|
+
<div class="pf-c-drawer__body">
|
|
4779
|
+
<div class="pf-c-drawer__body pf-m-padding">
|
|
4780
|
+
<div class="pf-c-sidebar">
|
|
4781
|
+
<div class="pf-c-sidebar__main">
|
|
4782
|
+
<div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
4783
|
+
<nav
|
|
4784
|
+
class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
4785
|
+
>
|
|
4786
|
+
<div class="pf-c-jump-links__label">Jump to section</div>
|
|
4787
|
+
<ul class="pf-c-jump-links__list">
|
|
4788
|
+
<li class="pf-c-jump-links__item pf-m-current">
|
|
4789
|
+
<a
|
|
4790
|
+
class="pf-c-jump-links__link"
|
|
4791
|
+
href="#jump-links-drawer-jump-links-first"
|
|
4792
|
+
>
|
|
4793
|
+
<span
|
|
4794
|
+
class="pf-c-jump-links__link-text"
|
|
4795
|
+
>First section</span>
|
|
4796
|
+
</a>
|
|
4797
|
+
</li>
|
|
4798
|
+
<li class="pf-c-jump-links__item">
|
|
4799
|
+
<a
|
|
4800
|
+
class="pf-c-jump-links__link"
|
|
4801
|
+
href="#jump-links-drawer-jump-links-second"
|
|
4802
|
+
>
|
|
4803
|
+
<span
|
|
4804
|
+
class="pf-c-jump-links__link-text"
|
|
4805
|
+
>Second section</span>
|
|
4806
|
+
</a>
|
|
4807
|
+
</li>
|
|
4808
|
+
<li class="pf-c-jump-links__item">
|
|
4809
|
+
<a
|
|
4810
|
+
class="pf-c-jump-links__link"
|
|
4811
|
+
href="#jump-links-drawer-jump-links-third"
|
|
4812
|
+
>
|
|
4813
|
+
<span
|
|
4814
|
+
class="pf-c-jump-links__link-text"
|
|
4815
|
+
>Third section</span>
|
|
4816
|
+
</a>
|
|
4817
|
+
</li>
|
|
4818
|
+
<li class="pf-c-jump-links__item">
|
|
4819
|
+
<a
|
|
4820
|
+
class="pf-c-jump-links__link"
|
|
4821
|
+
href="#jump-links-drawer-jump-links-fourth"
|
|
4822
|
+
>
|
|
4823
|
+
<span
|
|
4824
|
+
class="pf-c-jump-links__link-text"
|
|
4825
|
+
>Fourth section</span>
|
|
4826
|
+
</a>
|
|
4827
|
+
</li>
|
|
4828
|
+
<li class="pf-c-jump-links__item">
|
|
4829
|
+
<a
|
|
4830
|
+
class="pf-c-jump-links__link"
|
|
4831
|
+
href="#jump-links-drawer-jump-links-fifth"
|
|
4832
|
+
>
|
|
4833
|
+
<span
|
|
4834
|
+
class="pf-c-jump-links__link-text"
|
|
4835
|
+
>Fifth section</span>
|
|
4836
|
+
</a>
|
|
4837
|
+
</li>
|
|
4838
|
+
</ul>
|
|
4839
|
+
</nav>
|
|
4840
|
+
</div>
|
|
4841
|
+
<div class="pf-c-sidebar__content">
|
|
4842
|
+
<div class="pf-c-content">
|
|
4843
|
+
<p>
|
|
4844
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
4845
|
+
</p>
|
|
4846
|
+
|
|
4847
|
+
<h2 id="jump-links-drawer-jump-links-first">First section</h2>
|
|
4848
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4849
|
+
|
|
4850
|
+
<h2
|
|
4851
|
+
id="jump-links-drawer-jump-links-second"
|
|
4852
|
+
>Second section</h2>
|
|
4853
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4854
|
+
|
|
4855
|
+
<h2 id="jump-links-drawer-jump-links-third">Third section</h2>
|
|
4856
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4857
|
+
|
|
4858
|
+
<h2
|
|
4859
|
+
id="jump-links-drawer-jump-links-fourth"
|
|
4860
|
+
>Fourth section</h2>
|
|
4861
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4862
|
+
|
|
4863
|
+
<h2 id="jump-links-drawer-jump-links-fifth">Fifth section</h2>
|
|
4864
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
4865
|
+
</div>
|
|
4866
|
+
</div>
|
|
4867
|
+
</div>
|
|
4868
|
+
</div>
|
|
4869
|
+
</div>
|
|
4870
|
+
</div>
|
|
4871
|
+
</div>
|
|
4872
|
+
<div class="pf-c-drawer__panel" hidden>
|
|
4873
|
+
<div class="pf-c-drawer__body">
|
|
4874
|
+
<div class="pf-c-drawer__head">
|
|
4875
|
+
<span>drawer-panel</span>
|
|
4876
|
+
<div class="pf-c-drawer__actions">
|
|
4877
|
+
<div class="pf-c-drawer__close">
|
|
4878
|
+
<button
|
|
4879
|
+
class="pf-c-button pf-m-plain"
|
|
4880
|
+
type="button"
|
|
4881
|
+
aria-label="Close drawer panel"
|
|
4882
|
+
>
|
|
4883
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
4884
|
+
</button>
|
|
4885
|
+
</div>
|
|
4886
|
+
</div>
|
|
4887
|
+
</div>
|
|
4888
|
+
</div>
|
|
4889
|
+
</div>
|
|
4890
|
+
</div>
|
|
4891
|
+
</div>
|
|
4892
|
+
</main>
|
|
4893
|
+
</div>
|
|
4894
|
+
|
|
4895
|
+
```
|
|
4896
|
+
|
|
4897
|
+
### Jump links in expanded drawer
|
|
4898
|
+
|
|
4899
|
+
```html isFullscreen
|
|
4900
|
+
<div class="pf-c-page" id="jump-links-drawer-expanded">
|
|
4901
|
+
<a
|
|
4902
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
4903
|
+
href="#main-content-jump-links-drawer-expanded"
|
|
4904
|
+
>Skip to content</a>
|
|
4905
|
+
<header class="pf-c-masthead" id="jump-links-drawer-expanded-masthead">
|
|
4906
|
+
<span class="pf-c-masthead__toggle">
|
|
4907
|
+
<button
|
|
4908
|
+
class="pf-c-button pf-m-plain"
|
|
4909
|
+
type="button"
|
|
4910
|
+
aria-label="Global navigation"
|
|
4911
|
+
>
|
|
4912
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
4913
|
+
</button>
|
|
4914
|
+
</span>
|
|
4915
|
+
<div class="pf-c-masthead__main">
|
|
4916
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
4917
|
+
<picture
|
|
4918
|
+
class="pf-c-brand pf-m-picture"
|
|
4919
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
4920
|
+
>
|
|
4921
|
+
<source
|
|
4922
|
+
media="(min-width: 768px)"
|
|
4923
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
4924
|
+
/>
|
|
4925
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
4926
|
+
<img
|
|
4927
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
4928
|
+
alt="Fallback patternFly default logo"
|
|
4929
|
+
/>
|
|
4930
|
+
</picture>
|
|
4931
|
+
</a>
|
|
4932
|
+
</div>
|
|
4933
|
+
<div class="pf-c-masthead__content">
|
|
4934
|
+
<div
|
|
4935
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
4936
|
+
id="jump-links-drawer-expanded-masthead-toolbar"
|
|
4937
|
+
>
|
|
4938
|
+
<div class="pf-c-toolbar__content">
|
|
4939
|
+
<div class="pf-c-toolbar__content-section">
|
|
4940
|
+
<div
|
|
4941
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
4942
|
+
>
|
|
4943
|
+
<div class="pf-c-toolbar__item">
|
|
4944
|
+
<button
|
|
4945
|
+
class="pf-c-button pf-m-plain"
|
|
4946
|
+
type="button"
|
|
4947
|
+
aria-label="Notifications"
|
|
4948
|
+
>
|
|
4949
|
+
<span class="pf-c-notification-badge">
|
|
4950
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
4951
|
+
</span>
|
|
4952
|
+
</button>
|
|
4953
|
+
</div>
|
|
4954
|
+
<div
|
|
4955
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
4956
|
+
>
|
|
4957
|
+
<div class="pf-c-toolbar__item">
|
|
4958
|
+
<nav
|
|
4959
|
+
class="pf-c-app-launcher"
|
|
4960
|
+
aria-label="Application launcher"
|
|
4961
|
+
id="jump-links-drawer-expanded-masthead-icon-group--app-launcher"
|
|
4962
|
+
>
|
|
4963
|
+
<button
|
|
4964
|
+
class="pf-c-app-launcher__toggle"
|
|
4965
|
+
type="button"
|
|
4966
|
+
id="jump-links-drawer-expanded-masthead-icon-group--app-launcher-button"
|
|
4967
|
+
aria-expanded="false"
|
|
4968
|
+
aria-label="Application launcher"
|
|
4969
|
+
>
|
|
4970
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
4971
|
+
</button>
|
|
4972
|
+
<div
|
|
4973
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
4974
|
+
hidden
|
|
4975
|
+
>
|
|
4976
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
4977
|
+
<div class="pf-c-search-input">
|
|
4978
|
+
<div class="pf-c-search-input__bar">
|
|
4979
|
+
<span class="pf-c-search-input__text">
|
|
4980
|
+
<span class="pf-c-search-input__icon">
|
|
4981
|
+
<i
|
|
4982
|
+
class="fas fa-search fa-fw"
|
|
4983
|
+
aria-hidden="true"
|
|
4984
|
+
></i>
|
|
4985
|
+
</span>
|
|
4986
|
+
<input
|
|
4987
|
+
class="pf-c-search-input__text-input"
|
|
4988
|
+
type="text"
|
|
4989
|
+
placeholder="Filter by name"
|
|
4990
|
+
aria-label="Filter by name"
|
|
4991
|
+
/>
|
|
4992
|
+
</span>
|
|
4993
|
+
</div>
|
|
4994
|
+
</div>
|
|
4995
|
+
</div>
|
|
4996
|
+
<section class="pf-c-app-launcher__group">
|
|
4997
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
4998
|
+
<ul>
|
|
4999
|
+
<li
|
|
5000
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
5001
|
+
>
|
|
5002
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5003
|
+
Link 1
|
|
5004
|
+
<span
|
|
5005
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5006
|
+
>
|
|
5007
|
+
<i
|
|
5008
|
+
class="fas fa-external-link-alt"
|
|
5009
|
+
aria-hidden="true"
|
|
5010
|
+
></i>
|
|
5011
|
+
</span>
|
|
5012
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5013
|
+
</a>
|
|
5014
|
+
<button
|
|
5015
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5016
|
+
type="button"
|
|
5017
|
+
aria-label="Favorite"
|
|
5018
|
+
>
|
|
5019
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5020
|
+
</button>
|
|
5021
|
+
</li>
|
|
5022
|
+
<li
|
|
5023
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
5024
|
+
>
|
|
5025
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5026
|
+
Link 2
|
|
5027
|
+
<span
|
|
5028
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5029
|
+
>
|
|
5030
|
+
<i
|
|
5031
|
+
class="fas fa-external-link-alt"
|
|
5032
|
+
aria-hidden="true"
|
|
5033
|
+
></i>
|
|
5034
|
+
</span>
|
|
5035
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5036
|
+
</a>
|
|
5037
|
+
<button
|
|
5038
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5039
|
+
type="button"
|
|
5040
|
+
aria-label="Favorite"
|
|
5041
|
+
>
|
|
5042
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5043
|
+
</button>
|
|
5044
|
+
</li>
|
|
5045
|
+
</ul>
|
|
5046
|
+
</section>
|
|
5047
|
+
<hr class="pf-c-divider" />
|
|
5048
|
+
<section class="pf-c-app-launcher__group">
|
|
5049
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
5050
|
+
<ul>
|
|
5051
|
+
<li
|
|
5052
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
5053
|
+
>
|
|
5054
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5055
|
+
Link 1
|
|
5056
|
+
<span
|
|
5057
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5058
|
+
>
|
|
5059
|
+
<i
|
|
5060
|
+
class="fas fa-external-link-alt"
|
|
5061
|
+
aria-hidden="true"
|
|
5062
|
+
></i>
|
|
5063
|
+
</span>
|
|
5064
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5065
|
+
</a>
|
|
5066
|
+
<button
|
|
5067
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5068
|
+
type="button"
|
|
5069
|
+
aria-label="Favorite"
|
|
5070
|
+
>
|
|
5071
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5072
|
+
</button>
|
|
5073
|
+
</li>
|
|
5074
|
+
<li
|
|
5075
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
5076
|
+
>
|
|
5077
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
5078
|
+
Link 2
|
|
5079
|
+
<span
|
|
5080
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
5081
|
+
>
|
|
5082
|
+
<i
|
|
5083
|
+
class="fas fa-external-link-alt"
|
|
5084
|
+
aria-hidden="true"
|
|
5085
|
+
></i>
|
|
5086
|
+
</span>
|
|
5087
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
5088
|
+
</a>
|
|
5089
|
+
<button
|
|
5090
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
5091
|
+
type="button"
|
|
5092
|
+
aria-label="Favorite"
|
|
5093
|
+
>
|
|
5094
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
5095
|
+
</button>
|
|
5096
|
+
</li>
|
|
5097
|
+
</ul>
|
|
5098
|
+
</section>
|
|
5099
|
+
</div>
|
|
5100
|
+
</nav>
|
|
5101
|
+
</div>
|
|
5102
|
+
<div class="pf-c-toolbar__item">
|
|
5103
|
+
<div class="pf-c-dropdown">
|
|
5104
|
+
<button
|
|
5105
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5106
|
+
id="jump-links-drawer-expanded-masthead-settings-button"
|
|
5107
|
+
aria-expanded="false"
|
|
5108
|
+
type="button"
|
|
5109
|
+
aria-label="Settings"
|
|
5110
|
+
>
|
|
5111
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
5112
|
+
</button>
|
|
5113
|
+
<ul
|
|
5114
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5115
|
+
aria-labelledby="jump-links-drawer-expanded-masthead-settings-button"
|
|
5116
|
+
hidden
|
|
5117
|
+
>
|
|
5118
|
+
<li>
|
|
5119
|
+
<button
|
|
5120
|
+
class="pf-c-dropdown__menu-item"
|
|
5121
|
+
type="button"
|
|
5122
|
+
>Settings</button>
|
|
5123
|
+
</li>
|
|
5124
|
+
<li>
|
|
5125
|
+
<button
|
|
5126
|
+
class="pf-c-dropdown__menu-item"
|
|
5127
|
+
type="button"
|
|
5128
|
+
>Use the beta release</button>
|
|
5129
|
+
</li>
|
|
5130
|
+
</ul>
|
|
5131
|
+
</div>
|
|
5132
|
+
</div>
|
|
5133
|
+
<div class="pf-c-toolbar__item">
|
|
5134
|
+
<div class="pf-c-dropdown">
|
|
5135
|
+
<button
|
|
5136
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
5137
|
+
id="jump-links-drawer-expanded-masthead-help-button"
|
|
5138
|
+
aria-expanded="false"
|
|
5139
|
+
type="button"
|
|
5140
|
+
aria-label="Help"
|
|
5141
|
+
>
|
|
5142
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
5143
|
+
</button>
|
|
5144
|
+
<ul
|
|
5145
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
5146
|
+
aria-labelledby="jump-links-drawer-expanded-masthead-help-button"
|
|
5147
|
+
hidden
|
|
5148
|
+
>
|
|
5149
|
+
<li>
|
|
5150
|
+
<button
|
|
5151
|
+
class="pf-c-dropdown__menu-item"
|
|
5152
|
+
type="button"
|
|
5153
|
+
>Support options</button>
|
|
5154
|
+
</li>
|
|
5155
|
+
<li>
|
|
5156
|
+
<button
|
|
5157
|
+
class="pf-c-dropdown__menu-item"
|
|
5158
|
+
type="button"
|
|
5159
|
+
>Open support case</button>
|
|
5160
|
+
</li>
|
|
5161
|
+
<li>
|
|
5162
|
+
<button
|
|
5163
|
+
class="pf-c-dropdown__menu-item"
|
|
5164
|
+
type="button"
|
|
5165
|
+
>API documentation</button>
|
|
5166
|
+
</li>
|
|
5167
|
+
</ul>
|
|
5168
|
+
</div>
|
|
5169
|
+
</div>
|
|
5170
|
+
</div>
|
|
5171
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
5172
|
+
<div class="pf-c-dropdown">
|
|
5173
|
+
<button
|
|
5174
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
5175
|
+
type="button"
|
|
5176
|
+
aria-expanded="false"
|
|
5177
|
+
aria-label="Actions"
|
|
5178
|
+
>
|
|
5179
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
5180
|
+
</button>
|
|
5181
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
5182
|
+
<div class="pf-c-menu__content">
|
|
5183
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
5184
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5185
|
+
<li
|
|
5186
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
5187
|
+
role="none"
|
|
5188
|
+
>
|
|
5189
|
+
<button
|
|
5190
|
+
class="pf-c-menu__item"
|
|
5191
|
+
type="button"
|
|
5192
|
+
disabled
|
|
5193
|
+
role="menuitem"
|
|
5194
|
+
>
|
|
5195
|
+
<span class="pf-c-menu__item-description">
|
|
5196
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
5197
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
5198
|
+
</span>
|
|
5199
|
+
</button>
|
|
5200
|
+
</li>
|
|
5201
|
+
<li
|
|
5202
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
5203
|
+
role="none"
|
|
5204
|
+
>
|
|
5205
|
+
<button
|
|
5206
|
+
class="pf-c-menu__item"
|
|
5207
|
+
type="button"
|
|
5208
|
+
disabled
|
|
5209
|
+
role="menuitem"
|
|
5210
|
+
>
|
|
5211
|
+
<span class="pf-c-menu__item-description">
|
|
5212
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5213
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
5214
|
+
</span>
|
|
5215
|
+
</button>
|
|
5216
|
+
</li>
|
|
5217
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
5218
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5219
|
+
<button
|
|
5220
|
+
class="pf-c-menu__item"
|
|
5221
|
+
type="button"
|
|
5222
|
+
role="menuitem"
|
|
5223
|
+
>
|
|
5224
|
+
<span class="pf-c-menu__item-main">
|
|
5225
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
5226
|
+
</span>
|
|
5227
|
+
</button>
|
|
5228
|
+
</li>
|
|
5229
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5230
|
+
<button
|
|
5231
|
+
class="pf-c-menu__item"
|
|
5232
|
+
type="button"
|
|
5233
|
+
role="menuitem"
|
|
5234
|
+
>
|
|
5235
|
+
<span class="pf-c-menu__item-main">
|
|
5236
|
+
<span
|
|
5237
|
+
class="pf-c-menu__item-text"
|
|
5238
|
+
>User management</span>
|
|
5239
|
+
</span>
|
|
5240
|
+
</button>
|
|
5241
|
+
</li>
|
|
5242
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5243
|
+
<button
|
|
5244
|
+
class="pf-c-menu__item"
|
|
5245
|
+
type="button"
|
|
5246
|
+
role="menuitem"
|
|
5247
|
+
>
|
|
5248
|
+
<span class="pf-c-menu__item-main">
|
|
5249
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
5250
|
+
</span>
|
|
5251
|
+
</button>
|
|
5252
|
+
</li>
|
|
5253
|
+
</ul>
|
|
5254
|
+
</section>
|
|
5255
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
5256
|
+
<section class="pf-c-menu__group">
|
|
5257
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5258
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5259
|
+
<button
|
|
5260
|
+
class="pf-c-menu__item"
|
|
5261
|
+
type="button"
|
|
5262
|
+
role="menuitem"
|
|
5263
|
+
aria-expanded="false"
|
|
5264
|
+
>
|
|
5265
|
+
<span class="pf-c-menu__item-main">
|
|
5266
|
+
<span class="pf-c-menu__item-icon">
|
|
5267
|
+
<i
|
|
5268
|
+
class="fas fa-fw fa-cog"
|
|
5269
|
+
aria-hidden="true"
|
|
5270
|
+
></i>
|
|
5271
|
+
</span>
|
|
5272
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
5273
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5274
|
+
<i class="fas fa-angle-right"></i>
|
|
5275
|
+
</span>
|
|
5276
|
+
</span>
|
|
5277
|
+
</button>
|
|
5278
|
+
<div class="pf-c-menu" hidden>
|
|
5279
|
+
<div class="pf-c-menu__content">
|
|
5280
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5281
|
+
<li
|
|
5282
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
5283
|
+
role="none"
|
|
5284
|
+
>
|
|
5285
|
+
<button
|
|
5286
|
+
class="pf-c-menu__item"
|
|
5287
|
+
type="button"
|
|
5288
|
+
role="menuitem"
|
|
5289
|
+
>
|
|
5290
|
+
<span class="pf-c-menu__item-main">
|
|
5291
|
+
<span
|
|
5292
|
+
class="pf-c-menu__item-toggle-icon"
|
|
5293
|
+
>
|
|
5294
|
+
<i class="fas fa-angle-left"></i>
|
|
5295
|
+
</span>
|
|
5296
|
+
<span class="pf-c-menu__item-icon">
|
|
5297
|
+
<i
|
|
5298
|
+
class="fas fa-fw fa-cog"
|
|
5299
|
+
aria-hidden="true"
|
|
5300
|
+
></i>
|
|
5301
|
+
</span>
|
|
5302
|
+
<span
|
|
5303
|
+
class="pf-c-menu__item-text"
|
|
5304
|
+
>Settings</span>
|
|
5305
|
+
</span>
|
|
5306
|
+
</button>
|
|
5307
|
+
</li>
|
|
5308
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
5309
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5310
|
+
<a
|
|
5311
|
+
class="pf-c-menu__item"
|
|
5312
|
+
href="#"
|
|
5313
|
+
role="menuitem"
|
|
5314
|
+
>
|
|
5315
|
+
<span class="pf-c-menu__item-main">
|
|
5316
|
+
<span
|
|
5317
|
+
class="pf-c-menu__item-text"
|
|
5318
|
+
>Customer support</span>
|
|
5319
|
+
</span>
|
|
5320
|
+
</a>
|
|
5321
|
+
</li>
|
|
5322
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5323
|
+
<a
|
|
5324
|
+
class="pf-c-menu__item"
|
|
5325
|
+
href="#"
|
|
5326
|
+
role="menuitem"
|
|
5327
|
+
>
|
|
5328
|
+
<span class="pf-c-menu__item-main">
|
|
5329
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
5330
|
+
</span>
|
|
5331
|
+
</a>
|
|
5332
|
+
</li>
|
|
5333
|
+
</ul>
|
|
5334
|
+
</div>
|
|
5335
|
+
</div>
|
|
5336
|
+
</li>
|
|
5337
|
+
|
|
5338
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5339
|
+
<button
|
|
5340
|
+
class="pf-c-menu__item"
|
|
5341
|
+
type="button"
|
|
5342
|
+
role="menuitem"
|
|
5343
|
+
aria-expanded="false"
|
|
5344
|
+
>
|
|
5345
|
+
<span class="pf-c-menu__item-main">
|
|
5346
|
+
<span class="pf-c-menu__item-icon">
|
|
5347
|
+
<i
|
|
5348
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
5349
|
+
aria-hidden="true"
|
|
5350
|
+
></i>
|
|
5351
|
+
</span>
|
|
5352
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
5353
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5354
|
+
<i class="fas fa-angle-right"></i>
|
|
5355
|
+
</span>
|
|
5356
|
+
</span>
|
|
5357
|
+
</button>
|
|
5358
|
+
<div class="pf-c-menu" hidden>
|
|
5359
|
+
<div class="pf-c-menu__content">
|
|
5360
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5361
|
+
<li
|
|
5362
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
5363
|
+
role="none"
|
|
5364
|
+
>
|
|
5365
|
+
<button
|
|
5366
|
+
class="pf-c-menu__item"
|
|
5367
|
+
type="button"
|
|
5368
|
+
role="menuitem"
|
|
5369
|
+
>
|
|
5370
|
+
<span class="pf-c-menu__item-main">
|
|
5371
|
+
<span
|
|
5372
|
+
class="pf-c-menu__item-toggle-icon"
|
|
5373
|
+
>
|
|
5374
|
+
<i class="fas fa-angle-left"></i>
|
|
5375
|
+
</span>
|
|
5376
|
+
<span class="pf-c-menu__item-icon">
|
|
5377
|
+
<i
|
|
5378
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
5379
|
+
aria-hidden="true"
|
|
5380
|
+
></i>
|
|
5381
|
+
</span>
|
|
5382
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
5383
|
+
</span>
|
|
5384
|
+
</button>
|
|
5385
|
+
</li>
|
|
5386
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
5387
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5388
|
+
<a
|
|
5389
|
+
class="pf-c-menu__item"
|
|
5390
|
+
href="#"
|
|
5391
|
+
role="menuitem"
|
|
5392
|
+
>
|
|
5393
|
+
<span class="pf-c-menu__item-main">
|
|
5394
|
+
<span
|
|
5395
|
+
class="pf-c-menu__item-text"
|
|
5396
|
+
>Support options</span>
|
|
5397
|
+
</span>
|
|
5398
|
+
</a>
|
|
5399
|
+
</li>
|
|
5400
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5401
|
+
<a
|
|
5402
|
+
class="pf-c-menu__item"
|
|
5403
|
+
href="#"
|
|
5404
|
+
role="menuitem"
|
|
5405
|
+
>
|
|
5406
|
+
<span class="pf-c-menu__item-main">
|
|
5407
|
+
<span
|
|
5408
|
+
class="pf-c-menu__item-text"
|
|
5409
|
+
>Open support case</span>
|
|
5410
|
+
</span>
|
|
5411
|
+
</a>
|
|
5412
|
+
</li>
|
|
5413
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5414
|
+
<a
|
|
5415
|
+
class="pf-c-menu__item"
|
|
5416
|
+
href="#"
|
|
5417
|
+
role="menuitem"
|
|
5418
|
+
>
|
|
5419
|
+
<span class="pf-c-menu__item-main">
|
|
5420
|
+
<span
|
|
5421
|
+
class="pf-c-menu__item-text"
|
|
5422
|
+
>API documentation</span>
|
|
5423
|
+
</span>
|
|
5424
|
+
</a>
|
|
5425
|
+
</li>
|
|
5426
|
+
</ul>
|
|
5427
|
+
</div>
|
|
5428
|
+
</div>
|
|
5429
|
+
</li>
|
|
5430
|
+
|
|
5431
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5432
|
+
<button
|
|
5433
|
+
class="pf-c-menu__item"
|
|
5434
|
+
type="button"
|
|
5435
|
+
role="menuitem"
|
|
5436
|
+
>
|
|
5437
|
+
<span class="pf-c-menu__item-main">
|
|
5438
|
+
<span class="pf-c-menu__item-icon">
|
|
5439
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
5440
|
+
</span>
|
|
5441
|
+
<span
|
|
5442
|
+
class="pf-c-menu__item-text"
|
|
5443
|
+
>Application launcher</span>
|
|
5444
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5445
|
+
<i class="fas fa-angle-right"></i>
|
|
5446
|
+
</span>
|
|
5447
|
+
</span>
|
|
5448
|
+
</button>
|
|
5449
|
+
<div class="pf-c-menu" hidden>
|
|
5450
|
+
<div class="pf-c-menu__header">
|
|
5451
|
+
<button
|
|
5452
|
+
class="pf-c-menu__item"
|
|
5453
|
+
type="button"
|
|
5454
|
+
role="menuitem"
|
|
5455
|
+
>
|
|
5456
|
+
<span class="pf-c-menu__item-main">
|
|
5457
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
5458
|
+
<i class="fas fa-angle-left"></i>
|
|
5459
|
+
</span>
|
|
5460
|
+
<span class="pf-c-menu__item-icon">
|
|
5461
|
+
<i
|
|
5462
|
+
class="fas fa-fw fa-th"
|
|
5463
|
+
aria-hidden="true"
|
|
5464
|
+
></i>
|
|
5465
|
+
</span>
|
|
5466
|
+
<span
|
|
5467
|
+
class="pf-c-menu__item-text"
|
|
5468
|
+
>Application launcher</span>
|
|
5469
|
+
</span>
|
|
5470
|
+
</button>
|
|
5471
|
+
</div>
|
|
5472
|
+
<div class="pf-c-menu__search">
|
|
5473
|
+
<div class="pf-c-menu__search-input">
|
|
5474
|
+
<div class="pf-c-search-input">
|
|
5475
|
+
<div class="pf-c-search-input__bar">
|
|
5476
|
+
<span class="pf-c-search-input__text">
|
|
5477
|
+
<span class="pf-c-search-input__icon">
|
|
5478
|
+
<i
|
|
5479
|
+
class="fas fa-search fa-fw"
|
|
5480
|
+
aria-hidden="true"
|
|
5481
|
+
></i>
|
|
5482
|
+
</span>
|
|
5483
|
+
<input
|
|
5484
|
+
class="pf-c-search-input__text-input"
|
|
5485
|
+
type="text"
|
|
5486
|
+
placeholder="Search"
|
|
5487
|
+
aria-label="Search"
|
|
5488
|
+
/>
|
|
5489
|
+
</span>
|
|
5490
|
+
</div>
|
|
5491
|
+
</div>
|
|
5492
|
+
</div>
|
|
5493
|
+
</div>
|
|
5494
|
+
<hr class="pf-c-divider" />
|
|
5495
|
+
<section class="pf-c-menu__group">
|
|
5496
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
5497
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5498
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5499
|
+
<a
|
|
5500
|
+
class="pf-c-menu__item"
|
|
5501
|
+
href="#"
|
|
5502
|
+
role="menuitem"
|
|
5503
|
+
>
|
|
5504
|
+
<span class="pf-c-menu__item-main">
|
|
5505
|
+
<span
|
|
5506
|
+
class="pf-c-menu__item-text"
|
|
5507
|
+
>Link 1</span>
|
|
5508
|
+
</span>
|
|
5509
|
+
</a>
|
|
5510
|
+
<button
|
|
5511
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
5512
|
+
type="button"
|
|
5513
|
+
aria-label="Starred"
|
|
5514
|
+
>
|
|
5515
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5516
|
+
<i
|
|
5517
|
+
class="fas fa-star"
|
|
5518
|
+
aria-hidden="true"
|
|
5519
|
+
></i>
|
|
5520
|
+
</span>
|
|
5521
|
+
</button>
|
|
5522
|
+
</li>
|
|
5523
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5524
|
+
<a
|
|
5525
|
+
class="pf-c-menu__item"
|
|
5526
|
+
href="#"
|
|
5527
|
+
role="menuitem"
|
|
5528
|
+
target="_blank"
|
|
5529
|
+
>
|
|
5530
|
+
<span class="pf-c-menu__item-main">
|
|
5531
|
+
<span
|
|
5532
|
+
class="pf-c-menu__item-text"
|
|
5533
|
+
>Link 2</span>
|
|
5534
|
+
<span
|
|
5535
|
+
class="pf-c-menu__item-external-icon"
|
|
5536
|
+
>
|
|
5537
|
+
<i
|
|
5538
|
+
class="fas fa-external-link-alt"
|
|
5539
|
+
aria-hidden="true"
|
|
5540
|
+
></i>
|
|
5541
|
+
</span>
|
|
5542
|
+
<span
|
|
5543
|
+
class="pf-screen-reader"
|
|
5544
|
+
>(opens new window)</span>
|
|
5545
|
+
</span>
|
|
5546
|
+
</a>
|
|
5547
|
+
<button
|
|
5548
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
5549
|
+
type="button"
|
|
5550
|
+
aria-label="Not starred"
|
|
5551
|
+
>
|
|
5552
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5553
|
+
<i
|
|
5554
|
+
class="fas fa-star"
|
|
5555
|
+
aria-hidden="true"
|
|
5556
|
+
></i>
|
|
5557
|
+
</span>
|
|
5558
|
+
</button>
|
|
5559
|
+
</li>
|
|
5560
|
+
</ul>
|
|
5561
|
+
</section>
|
|
5562
|
+
<hr class="pf-c-divider" />
|
|
5563
|
+
<section class="pf-c-menu__group">
|
|
5564
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
5565
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
5566
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5567
|
+
<a
|
|
5568
|
+
class="pf-c-menu__item"
|
|
5569
|
+
href="#"
|
|
5570
|
+
role="menuitem"
|
|
5571
|
+
>
|
|
5572
|
+
<span class="pf-c-menu__item-main">
|
|
5573
|
+
<span
|
|
5574
|
+
class="pf-c-menu__item-text"
|
|
5575
|
+
>Link 1</span>
|
|
5576
|
+
</span>
|
|
5577
|
+
</a>
|
|
5578
|
+
<button
|
|
5579
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
5580
|
+
type="button"
|
|
5581
|
+
aria-label="Not starred"
|
|
5582
|
+
>
|
|
5583
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5584
|
+
<i
|
|
5585
|
+
class="fas fa-star"
|
|
5586
|
+
aria-hidden="true"
|
|
5587
|
+
></i>
|
|
5588
|
+
</span>
|
|
5589
|
+
</button>
|
|
5590
|
+
</li>
|
|
5591
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
5592
|
+
<a
|
|
5593
|
+
class="pf-c-menu__item"
|
|
5594
|
+
href="#"
|
|
5595
|
+
role="menuitem"
|
|
5596
|
+
target="_blank"
|
|
5597
|
+
>
|
|
5598
|
+
<span class="pf-c-menu__item-main">
|
|
5599
|
+
<span
|
|
5600
|
+
class="pf-c-menu__item-text"
|
|
5601
|
+
>Link 2</span>
|
|
5602
|
+
<span
|
|
5603
|
+
class="pf-c-menu__item-external-icon"
|
|
5604
|
+
>
|
|
5605
|
+
<i
|
|
5606
|
+
class="fas fa-external-link-alt"
|
|
5607
|
+
aria-hidden="true"
|
|
5608
|
+
></i>
|
|
5609
|
+
</span>
|
|
5610
|
+
<span
|
|
5611
|
+
class="pf-screen-reader"
|
|
5612
|
+
>(opens new window)</span>
|
|
5613
|
+
</span>
|
|
5614
|
+
</a>
|
|
5615
|
+
<button
|
|
5616
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
5617
|
+
type="button"
|
|
5618
|
+
aria-label="Starred"
|
|
5619
|
+
>
|
|
5620
|
+
<span class="pf-c-menu__item-action-icon">
|
|
5621
|
+
<i
|
|
5622
|
+
class="fas fa-star"
|
|
5623
|
+
aria-hidden="true"
|
|
5624
|
+
></i>
|
|
5625
|
+
</span>
|
|
5626
|
+
</button>
|
|
5627
|
+
</li>
|
|
5628
|
+
</ul>
|
|
5629
|
+
</section>
|
|
5630
|
+
</div>
|
|
5631
|
+
</li>
|
|
5632
|
+
</ul>
|
|
5633
|
+
</section>
|
|
5634
|
+
</div>
|
|
5635
|
+
</div>
|
|
5636
|
+
</div>
|
|
5637
|
+
</div>
|
|
5638
|
+
</div>
|
|
5639
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
5640
|
+
<div
|
|
5641
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
5642
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
5643
|
+
>
|
|
5644
|
+
<button
|
|
5645
|
+
class="pf-c-dropdown__toggle"
|
|
5646
|
+
id="jump-links-drawer-expanded-masthead-profile-button"
|
|
5647
|
+
aria-expanded="false"
|
|
5648
|
+
type="button"
|
|
5649
|
+
>
|
|
5650
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
5651
|
+
<img
|
|
5652
|
+
class="pf-c-avatar"
|
|
5653
|
+
src="/assets/images/img_avatar.svg"
|
|
5654
|
+
alt="Avatar image"
|
|
5655
|
+
/>
|
|
5656
|
+
</span>
|
|
5657
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
5658
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
5659
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
5660
|
+
</span>
|
|
5661
|
+
</button>
|
|
5662
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
5663
|
+
<section class="pf-c-dropdown__group">
|
|
5664
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5665
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
5666
|
+
<div>123456789</div>
|
|
5667
|
+
</div>
|
|
5668
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
5669
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
5670
|
+
<div>mshaksho@redhat.com</div>
|
|
5671
|
+
</div>
|
|
5672
|
+
</section>
|
|
5673
|
+
<hr class="pf-c-divider" />
|
|
5674
|
+
<section class="pf-c-dropdown__group">
|
|
5675
|
+
<ul>
|
|
5676
|
+
<li>
|
|
5677
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
5678
|
+
</li>
|
|
5679
|
+
<li>
|
|
5680
|
+
<a
|
|
5681
|
+
class="pf-c-dropdown__menu-item"
|
|
5682
|
+
href="#"
|
|
5683
|
+
>User management</a>
|
|
5684
|
+
</li>
|
|
5685
|
+
<li>
|
|
5686
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
5687
|
+
</li>
|
|
5688
|
+
</ul>
|
|
5689
|
+
</section>
|
|
5690
|
+
</div>
|
|
5691
|
+
</div>
|
|
5692
|
+
</div>
|
|
5693
|
+
</div>
|
|
5694
|
+
</div>
|
|
5695
|
+
</div>
|
|
5696
|
+
</div>
|
|
5697
|
+
</header>
|
|
5698
|
+
<div class="pf-c-page__sidebar">
|
|
5699
|
+
<div class="pf-c-page__sidebar-body">
|
|
5700
|
+
<nav
|
|
5701
|
+
class="pf-c-nav"
|
|
5702
|
+
id="jump-links-drawer-expanded-primary-nav"
|
|
5703
|
+
aria-label="Global"
|
|
5704
|
+
>
|
|
5705
|
+
<ul class="pf-c-nav__list">
|
|
5706
|
+
<li class="pf-c-nav__item">
|
|
5707
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
5708
|
+
</li>
|
|
5709
|
+
<li class="pf-c-nav__item">
|
|
5710
|
+
<a
|
|
5711
|
+
href="#"
|
|
5712
|
+
class="pf-c-nav__link pf-m-current"
|
|
5713
|
+
aria-current="page"
|
|
5714
|
+
>Policy</a>
|
|
5715
|
+
</li>
|
|
5716
|
+
<li class="pf-c-nav__item">
|
|
5717
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
5718
|
+
</li>
|
|
5719
|
+
<li class="pf-c-nav__item">
|
|
5720
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
5721
|
+
</li>
|
|
5722
|
+
<li class="pf-c-nav__item">
|
|
5723
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
5724
|
+
</li>
|
|
5725
|
+
</ul>
|
|
5726
|
+
</nav>
|
|
5727
|
+
</div>
|
|
5728
|
+
</div>
|
|
5729
|
+
<main
|
|
5730
|
+
class="pf-c-page__main"
|
|
5731
|
+
tabindex="-1"
|
|
5732
|
+
id="main-content-jump-links-drawer-expanded"
|
|
5733
|
+
>
|
|
5734
|
+
<div class="pf-c-drawer pf-m-expanded">
|
|
5735
|
+
<div class="pf-c-drawer__main">
|
|
5736
|
+
<div
|
|
5737
|
+
class="pf-c-drawer__content"
|
|
5738
|
+
id="jump-links-drawer-expanded-drawer-scrollable-container"
|
|
5739
|
+
>
|
|
5740
|
+
<div class="pf-c-drawer__body">
|
|
5741
|
+
<div class="pf-c-drawer__body pf-m-padding">
|
|
5742
|
+
<div class="pf-c-sidebar">
|
|
5743
|
+
<div class="pf-c-sidebar__main">
|
|
5744
|
+
<div class="pf-c-sidebar__panel pf-m-sticky pf-m-gutter">
|
|
5745
|
+
<nav
|
|
5746
|
+
class="pf-c-jump-links pf-m-vertical pf-m-non-expandable-on-md pf-m-expandable"
|
|
5747
|
+
>
|
|
5748
|
+
<div class="pf-c-jump-links__label">Jump to section</div>
|
|
5749
|
+
<ul class="pf-c-jump-links__list">
|
|
5750
|
+
<li class="pf-c-jump-links__item pf-m-current">
|
|
5751
|
+
<a
|
|
5752
|
+
class="pf-c-jump-links__link"
|
|
5753
|
+
href="#jump-links-drawer-expanded-jump-links-first"
|
|
5754
|
+
>
|
|
5755
|
+
<span
|
|
5756
|
+
class="pf-c-jump-links__link-text"
|
|
5757
|
+
>First section</span>
|
|
5758
|
+
</a>
|
|
5759
|
+
</li>
|
|
5760
|
+
<li class="pf-c-jump-links__item">
|
|
5761
|
+
<a
|
|
5762
|
+
class="pf-c-jump-links__link"
|
|
5763
|
+
href="#jump-links-drawer-expanded-jump-links-second"
|
|
5764
|
+
>
|
|
5765
|
+
<span
|
|
5766
|
+
class="pf-c-jump-links__link-text"
|
|
5767
|
+
>Second section</span>
|
|
5768
|
+
</a>
|
|
5769
|
+
</li>
|
|
5770
|
+
<li class="pf-c-jump-links__item">
|
|
5771
|
+
<a
|
|
5772
|
+
class="pf-c-jump-links__link"
|
|
5773
|
+
href="#jump-links-drawer-expanded-jump-links-third"
|
|
5774
|
+
>
|
|
5775
|
+
<span
|
|
5776
|
+
class="pf-c-jump-links__link-text"
|
|
5777
|
+
>Third section</span>
|
|
5778
|
+
</a>
|
|
5779
|
+
</li>
|
|
5780
|
+
<li class="pf-c-jump-links__item">
|
|
5781
|
+
<a
|
|
5782
|
+
class="pf-c-jump-links__link"
|
|
5783
|
+
href="#jump-links-drawer-expanded-jump-links-fourth"
|
|
5784
|
+
>
|
|
5785
|
+
<span
|
|
5786
|
+
class="pf-c-jump-links__link-text"
|
|
5787
|
+
>Fourth section</span>
|
|
5788
|
+
</a>
|
|
5789
|
+
</li>
|
|
5790
|
+
<li class="pf-c-jump-links__item">
|
|
5791
|
+
<a
|
|
5792
|
+
class="pf-c-jump-links__link"
|
|
5793
|
+
href="#jump-links-drawer-expanded-jump-links-fifth"
|
|
5794
|
+
>
|
|
5795
|
+
<span
|
|
5796
|
+
class="pf-c-jump-links__link-text"
|
|
5797
|
+
>Fifth section</span>
|
|
5798
|
+
</a>
|
|
5799
|
+
</li>
|
|
5800
|
+
</ul>
|
|
5801
|
+
</nav>
|
|
5802
|
+
</div>
|
|
5803
|
+
<div class="pf-c-sidebar__content">
|
|
5804
|
+
<div class="pf-c-content">
|
|
5805
|
+
<p>
|
|
5806
|
+
<b>Note:</b> Jump links require javascript to look and function properly, so while clicking on the jump links in these demos may take you to anchors on the page, the full functionality isn't implemented. Refer to the react demos to see the intended design and functionality.
|
|
5807
|
+
</p>
|
|
5808
|
+
|
|
5809
|
+
<h2
|
|
5810
|
+
id="jump-links-drawer-expanded-jump-links-first"
|
|
5811
|
+
>First section</h2>
|
|
5812
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
5813
|
+
|
|
5814
|
+
<h2
|
|
5815
|
+
id="jump-links-drawer-expanded-jump-links-second"
|
|
5816
|
+
>Second section</h2>
|
|
5817
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
5818
|
+
|
|
5819
|
+
<h2
|
|
5820
|
+
id="jump-links-drawer-expanded-jump-links-third"
|
|
5821
|
+
>Third section</h2>
|
|
5822
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
5823
|
+
|
|
5824
|
+
<h2
|
|
5825
|
+
id="jump-links-drawer-expanded-jump-links-fourth"
|
|
5826
|
+
>Fourth section</h2>
|
|
5827
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
5828
|
+
|
|
5829
|
+
<h2
|
|
5830
|
+
id="jump-links-drawer-expanded-jump-links-fifth"
|
|
5831
|
+
>Fifth section</h2>
|
|
5832
|
+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas sed dui ullamcorper, dignissim purus eu, mattis leo. Curabitur eleifend turpis ipsum, aliquam pretium risus efficitur vel. Etiam eget enim vitae quam facilisis pharetra at eget diam. Suspendisse ut vulputate magna. Nunc viverra posuere orci sit amet pulvinar. Quisque dui justo, egestas ac accumsan suscipit, tristique eu risus. In aliquet libero ante, ac pulvinar lectus pretium in. Ut enim tellus, vulputate et lorem et, hendrerit rutrum diam. Cras pharetra dapibus elit vitae ullamcorper. Nulla facilisis euismod diam, at sodales sem laoreet hendrerit. Curabitur porttitor ex nulla. Proin ligula leo, egestas ac nibh a, pellentesque mollis augue. Donec nec augue vehicula eros pulvinar vehicula eget rutrum neque. Duis sit amet interdum lorem. Vivamus porttitor nec quam a accumsan. Nam pretium vitae leo vitae rhoncus.</p>
|
|
5833
|
+
</div>
|
|
5834
|
+
</div>
|
|
5835
|
+
</div>
|
|
5836
|
+
</div>
|
|
5837
|
+
</div>
|
|
5838
|
+
</div>
|
|
5839
|
+
</div>
|
|
5840
|
+
<div class="pf-c-drawer__panel">
|
|
5841
|
+
<div class="pf-c-drawer__body">
|
|
5842
|
+
<div class="pf-c-drawer__head">
|
|
5843
|
+
<span>drawer-panel</span>
|
|
5844
|
+
<div class="pf-c-drawer__actions">
|
|
5845
|
+
<div class="pf-c-drawer__close">
|
|
5846
|
+
<button
|
|
5847
|
+
class="pf-c-button pf-m-plain"
|
|
5848
|
+
type="button"
|
|
5849
|
+
aria-label="Close drawer panel"
|
|
5850
|
+
>
|
|
5851
|
+
<i class="fas fa-times" aria-hidden="true"></i>
|
|
5852
|
+
</button>
|
|
5853
|
+
</div>
|
|
5854
|
+
</div>
|
|
5855
|
+
</div>
|
|
5856
|
+
</div>
|
|
5857
|
+
</div>
|
|
5858
|
+
</div>
|
|
5859
|
+
</div>
|
|
5860
|
+
</main>
|
|
5861
|
+
</div>
|
|
5862
|
+
|
|
5863
|
+
```
|