@patternfly/patternfly 4.206.3 → 4.208.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/base/_base.scss +2 -0
- package/base/_common.scss +3 -1
- package/base/_fonts.scss +1 -1
- package/base/patternfly-common.css +1 -1
- package/components/Button/button.css +20 -0
- package/components/Button/button.scss +23 -0
- package/components/Button/themes/dark/button.scss +1 -0
- package/components/Check/check.css +9 -0
- package/components/Check/check.scss +11 -0
- package/components/ContextSelector/context-selector.css +6 -0
- package/components/ContextSelector/context-selector.scss +7 -1
- package/components/Dropdown/dropdown.css +6 -0
- package/components/Dropdown/dropdown.scss +7 -0
- package/components/ExpandableSection/expandable-section.css +18 -1
- package/components/ExpandableSection/expandable-section.scss +25 -1
- package/components/InputGroup/input-group.css +3 -0
- package/components/InputGroup/input-group.scss +4 -0
- package/components/Masthead/masthead.css +6 -3
- package/components/Masthead/masthead.scss +4 -0
- package/components/Menu/menu.css +0 -4
- package/components/Menu/menu.scss +0 -4
- package/components/Page/page.css +4 -0
- package/components/Page/page.scss +6 -0
- package/components/Select/select.css +6 -0
- package/components/Select/select.scss +7 -0
- package/components/Wizard/themes/dark/wizard.scss +2 -2
- package/components/Wizard/wizard.css +2 -2
- package/docs/components/Avatar/examples/Avatar.md +10 -10
- package/docs/components/Button/examples/Button.md +19 -0
- package/docs/components/Card/examples/Card.css +3 -3
- package/docs/components/Check/examples/Check.md +33 -12
- package/docs/components/CodeBlock/examples/CodeBlock.md +8 -6
- package/docs/components/Dropdown/examples/Dropdown.md +2 -1
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +51 -13
- package/docs/components/InputGroup/examples/InputGroup.md +1 -0
- package/docs/components/Masthead/examples/masthead.md +5 -6
- package/docs/components/MenuToggle/examples/MenuToggle.md +6 -6
- package/docs/components/Page/examples/Page.md +1 -0
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +38 -0
- package/docs/demos/AboutModal/examples/AboutModal.md +1 -1
- package/docs/demos/Alert/examples/Alert.md +3 -3
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -1
- package/docs/demos/Banner/examples/Banner.md +2 -2
- package/docs/demos/CardView/examples/CardView.md +1 -1
- package/docs/demos/ContextSelector/examples/ContextSelector.md +3 -3
- package/docs/demos/Dashboard/examples/Dashboard.md +1 -1
- package/docs/demos/DataList/examples/DataList.md +4 -4
- package/docs/demos/DescriptionList/examples/DescriptionList.md +3 -3
- package/docs/demos/Drawer/examples/Drawer.md +5 -5
- package/docs/demos/JumpLinks/examples/JumpLinks.md +6 -6
- package/docs/demos/Masthead/examples/Masthead.md +388 -2
- package/docs/demos/Modal/examples/Modal.md +6 -6
- package/docs/demos/Nav/examples/Nav.md +8 -8
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +933 -9
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +7 -7
- package/docs/demos/Skeleton/examples/Skeleton.md +1 -1
- package/docs/demos/Table/examples/Table.md +14 -14
- package/docs/demos/Tabs/examples/Tabs.md +8 -8
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -1
- package/docs/demos/Wizard/examples/Wizard.md +8 -8
- package/package.json +3 -3
- package/patternfly-base-no-reset.css +1 -1
- package/patternfly-base.css +1 -1
- package/patternfly-no-reset.css +81 -11
- package/patternfly.css +81 -11
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -760,8 +760,8 @@ wrapperTag: div
|
|
|
760
760
|
<span class="pf-c-dropdown__toggle-image">
|
|
761
761
|
<img
|
|
762
762
|
class="pf-c-avatar"
|
|
763
|
-
src="/assets/images/img_avatar.svg"
|
|
764
763
|
alt="Avatar image"
|
|
764
|
+
src="/assets/images/img_avatar-light.svg"
|
|
765
765
|
/>
|
|
766
766
|
</span>
|
|
767
767
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -922,6 +922,930 @@ wrapperTag: div
|
|
|
922
922
|
|
|
923
923
|
```
|
|
924
924
|
|
|
925
|
+
### Full height page
|
|
926
|
+
|
|
927
|
+
Using the `.pf-m-full-height` modifier class on the page component eliminates the need to ensure that the `<html>` and `<body>` tags, and any other ancestors of `.pf-c-page`, have height set to 100%.
|
|
928
|
+
|
|
929
|
+
```html isFullscreen isBeta
|
|
930
|
+
<div class="pf-c-page pf-m-full-height" id="page-demo-full-height">
|
|
931
|
+
<a
|
|
932
|
+
class="pf-c-skip-to-content pf-c-button pf-m-primary"
|
|
933
|
+
href="#main-content-page-demo-full-height"
|
|
934
|
+
>Skip to content</a>
|
|
935
|
+
<header class="pf-c-masthead" id="page-demo-full-height-masthead">
|
|
936
|
+
<span class="pf-c-masthead__toggle">
|
|
937
|
+
<button
|
|
938
|
+
class="pf-c-button pf-m-plain"
|
|
939
|
+
type="button"
|
|
940
|
+
aria-label="Global navigation"
|
|
941
|
+
>
|
|
942
|
+
<i class="fas fa-bars" aria-hidden="true"></i>
|
|
943
|
+
</button>
|
|
944
|
+
</span>
|
|
945
|
+
<div class="pf-c-masthead__main">
|
|
946
|
+
<a class="pf-c-masthead__brand" href="#">
|
|
947
|
+
<picture
|
|
948
|
+
class="pf-c-brand pf-m-picture"
|
|
949
|
+
style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
|
|
950
|
+
>
|
|
951
|
+
<source
|
|
952
|
+
media="(min-width: 768px)"
|
|
953
|
+
srcset="/assets/images/logo__pf--reverse-on-md.svg"
|
|
954
|
+
/>
|
|
955
|
+
<source srcset="/assets/images/logo__pf--reverse--base.svg" />
|
|
956
|
+
<img
|
|
957
|
+
src="/assets/images/logo__pf--reverse--base.png"
|
|
958
|
+
alt="Fallback patternFly default logo"
|
|
959
|
+
/>
|
|
960
|
+
</picture>
|
|
961
|
+
</a>
|
|
962
|
+
</div>
|
|
963
|
+
<div class="pf-c-masthead__content">
|
|
964
|
+
<div
|
|
965
|
+
class="pf-c-toolbar pf-m-full-height pf-m-static"
|
|
966
|
+
id="page-demo-full-height-masthead-toolbar"
|
|
967
|
+
>
|
|
968
|
+
<div class="pf-c-toolbar__content">
|
|
969
|
+
<div class="pf-c-toolbar__content-section">
|
|
970
|
+
<div
|
|
971
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
|
|
972
|
+
>
|
|
973
|
+
<div class="pf-c-toolbar__item">
|
|
974
|
+
<button
|
|
975
|
+
class="pf-c-button pf-m-plain"
|
|
976
|
+
type="button"
|
|
977
|
+
aria-label="Notifications"
|
|
978
|
+
>
|
|
979
|
+
<span class="pf-c-notification-badge">
|
|
980
|
+
<i class="pf-icon-bell" aria-hidden="true"></i>
|
|
981
|
+
</span>
|
|
982
|
+
</button>
|
|
983
|
+
</div>
|
|
984
|
+
<div
|
|
985
|
+
class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
|
|
986
|
+
>
|
|
987
|
+
<div class="pf-c-toolbar__item">
|
|
988
|
+
<nav
|
|
989
|
+
class="pf-c-app-launcher"
|
|
990
|
+
aria-label="Application launcher"
|
|
991
|
+
id="page-demo-full-height-masthead-icon-group--app-launcher"
|
|
992
|
+
>
|
|
993
|
+
<button
|
|
994
|
+
class="pf-c-app-launcher__toggle"
|
|
995
|
+
type="button"
|
|
996
|
+
id="page-demo-full-height-masthead-application-launcher-button"
|
|
997
|
+
aria-expanded="false"
|
|
998
|
+
aria-label="Application launcher"
|
|
999
|
+
>
|
|
1000
|
+
<i class="fas fa-th" aria-hidden="true"></i>
|
|
1001
|
+
</button>
|
|
1002
|
+
<div
|
|
1003
|
+
class="pf-c-app-launcher__menu pf-m-align-right"
|
|
1004
|
+
hidden
|
|
1005
|
+
>
|
|
1006
|
+
<div class="pf-c-app-launcher__menu-search">
|
|
1007
|
+
<div class="pf-c-search-input">
|
|
1008
|
+
<div class="pf-c-search-input__bar">
|
|
1009
|
+
<span class="pf-c-search-input__text">
|
|
1010
|
+
<span class="pf-c-search-input__icon">
|
|
1011
|
+
<i
|
|
1012
|
+
class="fas fa-search fa-fw"
|
|
1013
|
+
aria-hidden="true"
|
|
1014
|
+
></i>
|
|
1015
|
+
</span>
|
|
1016
|
+
<input
|
|
1017
|
+
class="pf-c-search-input__text-input"
|
|
1018
|
+
type="text"
|
|
1019
|
+
placeholder="Filter by name"
|
|
1020
|
+
aria-label="Filter by name"
|
|
1021
|
+
/>
|
|
1022
|
+
</span>
|
|
1023
|
+
</div>
|
|
1024
|
+
</div>
|
|
1025
|
+
</div>
|
|
1026
|
+
<section class="pf-c-app-launcher__group">
|
|
1027
|
+
<h1 class="pf-c-app-launcher__group-title">Favorites</h1>
|
|
1028
|
+
<ul>
|
|
1029
|
+
<li
|
|
1030
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1031
|
+
>
|
|
1032
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1033
|
+
Link 1
|
|
1034
|
+
<span
|
|
1035
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1036
|
+
>
|
|
1037
|
+
<i
|
|
1038
|
+
class="fas fa-external-link-alt"
|
|
1039
|
+
aria-hidden="true"
|
|
1040
|
+
></i>
|
|
1041
|
+
</span>
|
|
1042
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1043
|
+
</a>
|
|
1044
|
+
<button
|
|
1045
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1046
|
+
type="button"
|
|
1047
|
+
aria-label="Favorite"
|
|
1048
|
+
>
|
|
1049
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1050
|
+
</button>
|
|
1051
|
+
</li>
|
|
1052
|
+
<li
|
|
1053
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1054
|
+
>
|
|
1055
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1056
|
+
Link 2
|
|
1057
|
+
<span
|
|
1058
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1059
|
+
>
|
|
1060
|
+
<i
|
|
1061
|
+
class="fas fa-external-link-alt"
|
|
1062
|
+
aria-hidden="true"
|
|
1063
|
+
></i>
|
|
1064
|
+
</span>
|
|
1065
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1066
|
+
</a>
|
|
1067
|
+
<button
|
|
1068
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1069
|
+
type="button"
|
|
1070
|
+
aria-label="Favorite"
|
|
1071
|
+
>
|
|
1072
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1073
|
+
</button>
|
|
1074
|
+
</li>
|
|
1075
|
+
</ul>
|
|
1076
|
+
</section>
|
|
1077
|
+
<hr class="pf-c-divider" />
|
|
1078
|
+
<section class="pf-c-app-launcher__group">
|
|
1079
|
+
<h1 class="pf-c-app-launcher__group-title">Group 1</h1>
|
|
1080
|
+
<ul>
|
|
1081
|
+
<li
|
|
1082
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external"
|
|
1083
|
+
>
|
|
1084
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1085
|
+
Link 1
|
|
1086
|
+
<span
|
|
1087
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1088
|
+
>
|
|
1089
|
+
<i
|
|
1090
|
+
class="fas fa-external-link-alt"
|
|
1091
|
+
aria-hidden="true"
|
|
1092
|
+
></i>
|
|
1093
|
+
</span>
|
|
1094
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1095
|
+
</a>
|
|
1096
|
+
<button
|
|
1097
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1098
|
+
type="button"
|
|
1099
|
+
aria-label="Favorite"
|
|
1100
|
+
>
|
|
1101
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1102
|
+
</button>
|
|
1103
|
+
</li>
|
|
1104
|
+
<li
|
|
1105
|
+
class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
|
|
1106
|
+
>
|
|
1107
|
+
<a class="pf-c-app-launcher__menu-item">
|
|
1108
|
+
Link 2
|
|
1109
|
+
<span
|
|
1110
|
+
class="pf-c-app-launcher__menu-item-external-icon"
|
|
1111
|
+
>
|
|
1112
|
+
<i
|
|
1113
|
+
class="fas fa-external-link-alt"
|
|
1114
|
+
aria-hidden="true"
|
|
1115
|
+
></i>
|
|
1116
|
+
</span>
|
|
1117
|
+
<span class="pf-screen-reader">(opens new window)</span>
|
|
1118
|
+
</a>
|
|
1119
|
+
<button
|
|
1120
|
+
class="pf-c-app-launcher__menu-item pf-m-action"
|
|
1121
|
+
type="button"
|
|
1122
|
+
aria-label="Favorite"
|
|
1123
|
+
>
|
|
1124
|
+
<i class="fas fa-star" aria-hidden="true"></i>
|
|
1125
|
+
</button>
|
|
1126
|
+
</li>
|
|
1127
|
+
</ul>
|
|
1128
|
+
</section>
|
|
1129
|
+
</div>
|
|
1130
|
+
</nav>
|
|
1131
|
+
</div>
|
|
1132
|
+
<div class="pf-c-toolbar__item">
|
|
1133
|
+
<div class="pf-c-dropdown">
|
|
1134
|
+
<button
|
|
1135
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1136
|
+
id="page-demo-full-height-masthead-settings-button"
|
|
1137
|
+
aria-expanded="false"
|
|
1138
|
+
type="button"
|
|
1139
|
+
aria-label="Settings"
|
|
1140
|
+
>
|
|
1141
|
+
<i class="fas fa-cog" aria-hidden="true"></i>
|
|
1142
|
+
</button>
|
|
1143
|
+
<ul
|
|
1144
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1145
|
+
aria-labelledby="page-demo-full-height-masthead-settings-button"
|
|
1146
|
+
hidden
|
|
1147
|
+
>
|
|
1148
|
+
<li>
|
|
1149
|
+
<button
|
|
1150
|
+
class="pf-c-dropdown__menu-item"
|
|
1151
|
+
type="button"
|
|
1152
|
+
>Settings</button>
|
|
1153
|
+
</li>
|
|
1154
|
+
<li>
|
|
1155
|
+
<button
|
|
1156
|
+
class="pf-c-dropdown__menu-item"
|
|
1157
|
+
type="button"
|
|
1158
|
+
>Use the beta release</button>
|
|
1159
|
+
</li>
|
|
1160
|
+
</ul>
|
|
1161
|
+
</div>
|
|
1162
|
+
</div>
|
|
1163
|
+
<div class="pf-c-toolbar__item">
|
|
1164
|
+
<div class="pf-c-dropdown">
|
|
1165
|
+
<button
|
|
1166
|
+
class="pf-c-dropdown__toggle pf-m-plain"
|
|
1167
|
+
id="page-demo-full-height-masthead-help-button"
|
|
1168
|
+
aria-expanded="false"
|
|
1169
|
+
type="button"
|
|
1170
|
+
aria-label="Help"
|
|
1171
|
+
>
|
|
1172
|
+
<i class="fas fa-question-circle" aria-hidden="true"></i>
|
|
1173
|
+
</button>
|
|
1174
|
+
<ul
|
|
1175
|
+
class="pf-c-dropdown__menu pf-m-align-right"
|
|
1176
|
+
aria-labelledby="page-demo-full-height-masthead-help-button"
|
|
1177
|
+
hidden
|
|
1178
|
+
>
|
|
1179
|
+
<li>
|
|
1180
|
+
<button
|
|
1181
|
+
class="pf-c-dropdown__menu-item"
|
|
1182
|
+
type="button"
|
|
1183
|
+
>Support options</button>
|
|
1184
|
+
</li>
|
|
1185
|
+
<li>
|
|
1186
|
+
<button
|
|
1187
|
+
class="pf-c-dropdown__menu-item"
|
|
1188
|
+
type="button"
|
|
1189
|
+
>Open support case</button>
|
|
1190
|
+
</li>
|
|
1191
|
+
<li>
|
|
1192
|
+
<button
|
|
1193
|
+
class="pf-c-dropdown__menu-item"
|
|
1194
|
+
type="button"
|
|
1195
|
+
>API documentation</button>
|
|
1196
|
+
</li>
|
|
1197
|
+
</ul>
|
|
1198
|
+
</div>
|
|
1199
|
+
</div>
|
|
1200
|
+
</div>
|
|
1201
|
+
<div class="pf-c-toolbar__item pf-m-hidden-on-lg">
|
|
1202
|
+
<div class="pf-c-dropdown">
|
|
1203
|
+
<button
|
|
1204
|
+
class="pf-c-menu-toggle pf-m-plain"
|
|
1205
|
+
type="button"
|
|
1206
|
+
aria-expanded="false"
|
|
1207
|
+
aria-label="Actions"
|
|
1208
|
+
>
|
|
1209
|
+
<i class="fas fa-ellipsis-v" aria-hidden="true"></i>
|
|
1210
|
+
</button>
|
|
1211
|
+
<div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
|
|
1212
|
+
<div class="pf-c-menu__content">
|
|
1213
|
+
<section class="pf-c-menu__group pf-m-hidden-on-sm">
|
|
1214
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1215
|
+
<li
|
|
1216
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1217
|
+
role="none"
|
|
1218
|
+
>
|
|
1219
|
+
<button
|
|
1220
|
+
class="pf-c-menu__item"
|
|
1221
|
+
type="button"
|
|
1222
|
+
disabled
|
|
1223
|
+
role="menuitem"
|
|
1224
|
+
>
|
|
1225
|
+
<span class="pf-c-menu__item-description">
|
|
1226
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1227
|
+
<div class="pf-u-font-size-md">ned_username</div>
|
|
1228
|
+
</span>
|
|
1229
|
+
</button>
|
|
1230
|
+
</li>
|
|
1231
|
+
<li
|
|
1232
|
+
class="pf-c-menu__list-item pf-m-disabled"
|
|
1233
|
+
role="none"
|
|
1234
|
+
>
|
|
1235
|
+
<button
|
|
1236
|
+
class="pf-c-menu__item"
|
|
1237
|
+
type="button"
|
|
1238
|
+
disabled
|
|
1239
|
+
role="menuitem"
|
|
1240
|
+
>
|
|
1241
|
+
<span class="pf-c-menu__item-description">
|
|
1242
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1243
|
+
<div class="pf-u-font-size-md">123456789</div>
|
|
1244
|
+
</span>
|
|
1245
|
+
</button>
|
|
1246
|
+
</li>
|
|
1247
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1248
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1249
|
+
<button
|
|
1250
|
+
class="pf-c-menu__item"
|
|
1251
|
+
type="button"
|
|
1252
|
+
role="menuitem"
|
|
1253
|
+
>
|
|
1254
|
+
<span class="pf-c-menu__item-main">
|
|
1255
|
+
<span class="pf-c-menu__item-text">My profile</span>
|
|
1256
|
+
</span>
|
|
1257
|
+
</button>
|
|
1258
|
+
</li>
|
|
1259
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1260
|
+
<button
|
|
1261
|
+
class="pf-c-menu__item"
|
|
1262
|
+
type="button"
|
|
1263
|
+
role="menuitem"
|
|
1264
|
+
>
|
|
1265
|
+
<span class="pf-c-menu__item-main">
|
|
1266
|
+
<span
|
|
1267
|
+
class="pf-c-menu__item-text"
|
|
1268
|
+
>User management</span>
|
|
1269
|
+
</span>
|
|
1270
|
+
</button>
|
|
1271
|
+
</li>
|
|
1272
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1273
|
+
<button
|
|
1274
|
+
class="pf-c-menu__item"
|
|
1275
|
+
type="button"
|
|
1276
|
+
role="menuitem"
|
|
1277
|
+
>
|
|
1278
|
+
<span class="pf-c-menu__item-main">
|
|
1279
|
+
<span class="pf-c-menu__item-text">Logout</span>
|
|
1280
|
+
</span>
|
|
1281
|
+
</button>
|
|
1282
|
+
</li>
|
|
1283
|
+
</ul>
|
|
1284
|
+
</section>
|
|
1285
|
+
<hr class="pf-c-divider pf-m-hidden-on-sm" />
|
|
1286
|
+
<section class="pf-c-menu__group">
|
|
1287
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1288
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1289
|
+
<button
|
|
1290
|
+
class="pf-c-menu__item"
|
|
1291
|
+
type="button"
|
|
1292
|
+
role="menuitem"
|
|
1293
|
+
aria-expanded="false"
|
|
1294
|
+
>
|
|
1295
|
+
<span class="pf-c-menu__item-main">
|
|
1296
|
+
<span class="pf-c-menu__item-icon">
|
|
1297
|
+
<i
|
|
1298
|
+
class="fas fa-fw fa-cog"
|
|
1299
|
+
aria-hidden="true"
|
|
1300
|
+
></i>
|
|
1301
|
+
</span>
|
|
1302
|
+
<span class="pf-c-menu__item-text">Settings</span>
|
|
1303
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1304
|
+
<i class="fas fa-angle-right"></i>
|
|
1305
|
+
</span>
|
|
1306
|
+
</span>
|
|
1307
|
+
</button>
|
|
1308
|
+
<div class="pf-c-menu" hidden>
|
|
1309
|
+
<div class="pf-c-menu__content">
|
|
1310
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1311
|
+
<li
|
|
1312
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1313
|
+
role="none"
|
|
1314
|
+
>
|
|
1315
|
+
<button
|
|
1316
|
+
class="pf-c-menu__item"
|
|
1317
|
+
type="button"
|
|
1318
|
+
role="menuitem"
|
|
1319
|
+
>
|
|
1320
|
+
<span class="pf-c-menu__item-main">
|
|
1321
|
+
<span
|
|
1322
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1323
|
+
>
|
|
1324
|
+
<i class="fas fa-angle-left"></i>
|
|
1325
|
+
</span>
|
|
1326
|
+
<span class="pf-c-menu__item-icon">
|
|
1327
|
+
<i
|
|
1328
|
+
class="fas fa-fw fa-cog"
|
|
1329
|
+
aria-hidden="true"
|
|
1330
|
+
></i>
|
|
1331
|
+
</span>
|
|
1332
|
+
<span
|
|
1333
|
+
class="pf-c-menu__item-text"
|
|
1334
|
+
>Settings</span>
|
|
1335
|
+
</span>
|
|
1336
|
+
</button>
|
|
1337
|
+
</li>
|
|
1338
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1339
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1340
|
+
<a
|
|
1341
|
+
class="pf-c-menu__item"
|
|
1342
|
+
href="#"
|
|
1343
|
+
role="menuitem"
|
|
1344
|
+
>
|
|
1345
|
+
<span class="pf-c-menu__item-main">
|
|
1346
|
+
<span
|
|
1347
|
+
class="pf-c-menu__item-text"
|
|
1348
|
+
>Customer support</span>
|
|
1349
|
+
</span>
|
|
1350
|
+
</a>
|
|
1351
|
+
</li>
|
|
1352
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1353
|
+
<a
|
|
1354
|
+
class="pf-c-menu__item"
|
|
1355
|
+
href="#"
|
|
1356
|
+
role="menuitem"
|
|
1357
|
+
>
|
|
1358
|
+
<span class="pf-c-menu__item-main">
|
|
1359
|
+
<span class="pf-c-menu__item-text">About</span>
|
|
1360
|
+
</span>
|
|
1361
|
+
</a>
|
|
1362
|
+
</li>
|
|
1363
|
+
</ul>
|
|
1364
|
+
</div>
|
|
1365
|
+
</div>
|
|
1366
|
+
</li>
|
|
1367
|
+
|
|
1368
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1369
|
+
<button
|
|
1370
|
+
class="pf-c-menu__item"
|
|
1371
|
+
type="button"
|
|
1372
|
+
role="menuitem"
|
|
1373
|
+
aria-expanded="false"
|
|
1374
|
+
>
|
|
1375
|
+
<span class="pf-c-menu__item-main">
|
|
1376
|
+
<span class="pf-c-menu__item-icon">
|
|
1377
|
+
<i
|
|
1378
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1379
|
+
aria-hidden="true"
|
|
1380
|
+
></i>
|
|
1381
|
+
</span>
|
|
1382
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1383
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1384
|
+
<i class="fas fa-angle-right"></i>
|
|
1385
|
+
</span>
|
|
1386
|
+
</span>
|
|
1387
|
+
</button>
|
|
1388
|
+
<div class="pf-c-menu" hidden>
|
|
1389
|
+
<div class="pf-c-menu__content">
|
|
1390
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1391
|
+
<li
|
|
1392
|
+
class="pf-c-menu__list-item pf-m-drill-up"
|
|
1393
|
+
role="none"
|
|
1394
|
+
>
|
|
1395
|
+
<button
|
|
1396
|
+
class="pf-c-menu__item"
|
|
1397
|
+
type="button"
|
|
1398
|
+
role="menuitem"
|
|
1399
|
+
>
|
|
1400
|
+
<span class="pf-c-menu__item-main">
|
|
1401
|
+
<span
|
|
1402
|
+
class="pf-c-menu__item-toggle-icon"
|
|
1403
|
+
>
|
|
1404
|
+
<i class="fas fa-angle-left"></i>
|
|
1405
|
+
</span>
|
|
1406
|
+
<span class="pf-c-menu__item-icon">
|
|
1407
|
+
<i
|
|
1408
|
+
class="fas fa-fw fa-pf-icon pf-icon-help"
|
|
1409
|
+
aria-hidden="true"
|
|
1410
|
+
></i>
|
|
1411
|
+
</span>
|
|
1412
|
+
<span class="pf-c-menu__item-text">Help</span>
|
|
1413
|
+
</span>
|
|
1414
|
+
</button>
|
|
1415
|
+
</li>
|
|
1416
|
+
<li class="pf-c-divider" role="separator"></li>
|
|
1417
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1418
|
+
<a
|
|
1419
|
+
class="pf-c-menu__item"
|
|
1420
|
+
href="#"
|
|
1421
|
+
role="menuitem"
|
|
1422
|
+
>
|
|
1423
|
+
<span class="pf-c-menu__item-main">
|
|
1424
|
+
<span
|
|
1425
|
+
class="pf-c-menu__item-text"
|
|
1426
|
+
>Support options</span>
|
|
1427
|
+
</span>
|
|
1428
|
+
</a>
|
|
1429
|
+
</li>
|
|
1430
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1431
|
+
<a
|
|
1432
|
+
class="pf-c-menu__item"
|
|
1433
|
+
href="#"
|
|
1434
|
+
role="menuitem"
|
|
1435
|
+
>
|
|
1436
|
+
<span class="pf-c-menu__item-main">
|
|
1437
|
+
<span
|
|
1438
|
+
class="pf-c-menu__item-text"
|
|
1439
|
+
>Open support case</span>
|
|
1440
|
+
</span>
|
|
1441
|
+
</a>
|
|
1442
|
+
</li>
|
|
1443
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1444
|
+
<a
|
|
1445
|
+
class="pf-c-menu__item"
|
|
1446
|
+
href="#"
|
|
1447
|
+
role="menuitem"
|
|
1448
|
+
>
|
|
1449
|
+
<span class="pf-c-menu__item-main">
|
|
1450
|
+
<span
|
|
1451
|
+
class="pf-c-menu__item-text"
|
|
1452
|
+
>API documentation</span>
|
|
1453
|
+
</span>
|
|
1454
|
+
</a>
|
|
1455
|
+
</li>
|
|
1456
|
+
</ul>
|
|
1457
|
+
</div>
|
|
1458
|
+
</div>
|
|
1459
|
+
</li>
|
|
1460
|
+
|
|
1461
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1462
|
+
<button
|
|
1463
|
+
class="pf-c-menu__item"
|
|
1464
|
+
type="button"
|
|
1465
|
+
role="menuitem"
|
|
1466
|
+
>
|
|
1467
|
+
<span class="pf-c-menu__item-main">
|
|
1468
|
+
<span class="pf-c-menu__item-icon">
|
|
1469
|
+
<i class="fas fa-fw fa-th" aria-hidden="true"></i>
|
|
1470
|
+
</span>
|
|
1471
|
+
<span
|
|
1472
|
+
class="pf-c-menu__item-text"
|
|
1473
|
+
>Application launcher</span>
|
|
1474
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1475
|
+
<i class="fas fa-angle-right"></i>
|
|
1476
|
+
</span>
|
|
1477
|
+
</span>
|
|
1478
|
+
</button>
|
|
1479
|
+
<div class="pf-c-menu" hidden>
|
|
1480
|
+
<div class="pf-c-menu__header">
|
|
1481
|
+
<button
|
|
1482
|
+
class="pf-c-menu__item"
|
|
1483
|
+
type="button"
|
|
1484
|
+
role="menuitem"
|
|
1485
|
+
>
|
|
1486
|
+
<span class="pf-c-menu__item-main">
|
|
1487
|
+
<span class="pf-c-menu__item-toggle-icon">
|
|
1488
|
+
<i class="fas fa-angle-left"></i>
|
|
1489
|
+
</span>
|
|
1490
|
+
<span class="pf-c-menu__item-icon">
|
|
1491
|
+
<i
|
|
1492
|
+
class="fas fa-fw fa-th"
|
|
1493
|
+
aria-hidden="true"
|
|
1494
|
+
></i>
|
|
1495
|
+
</span>
|
|
1496
|
+
<span
|
|
1497
|
+
class="pf-c-menu__item-text"
|
|
1498
|
+
>Application launcher</span>
|
|
1499
|
+
</span>
|
|
1500
|
+
</button>
|
|
1501
|
+
</div>
|
|
1502
|
+
<div class="pf-c-menu__search">
|
|
1503
|
+
<div class="pf-c-menu__search-input">
|
|
1504
|
+
<div class="pf-c-search-input">
|
|
1505
|
+
<div class="pf-c-search-input__bar">
|
|
1506
|
+
<span class="pf-c-search-input__text">
|
|
1507
|
+
<span class="pf-c-search-input__icon">
|
|
1508
|
+
<i
|
|
1509
|
+
class="fas fa-search fa-fw"
|
|
1510
|
+
aria-hidden="true"
|
|
1511
|
+
></i>
|
|
1512
|
+
</span>
|
|
1513
|
+
<input
|
|
1514
|
+
class="pf-c-search-input__text-input"
|
|
1515
|
+
type="text"
|
|
1516
|
+
placeholder="Search"
|
|
1517
|
+
aria-label="Search"
|
|
1518
|
+
/>
|
|
1519
|
+
</span>
|
|
1520
|
+
</div>
|
|
1521
|
+
</div>
|
|
1522
|
+
</div>
|
|
1523
|
+
</div>
|
|
1524
|
+
<hr class="pf-c-divider" />
|
|
1525
|
+
<section class="pf-c-menu__group">
|
|
1526
|
+
<h1 class="pf-c-menu__group-title">Favorites</h1>
|
|
1527
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1528
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1529
|
+
<a
|
|
1530
|
+
class="pf-c-menu__item"
|
|
1531
|
+
href="#"
|
|
1532
|
+
role="menuitem"
|
|
1533
|
+
>
|
|
1534
|
+
<span class="pf-c-menu__item-main">
|
|
1535
|
+
<span
|
|
1536
|
+
class="pf-c-menu__item-text"
|
|
1537
|
+
>Link 1</span>
|
|
1538
|
+
</span>
|
|
1539
|
+
</a>
|
|
1540
|
+
<button
|
|
1541
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1542
|
+
type="button"
|
|
1543
|
+
aria-label="Starred"
|
|
1544
|
+
>
|
|
1545
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1546
|
+
<i
|
|
1547
|
+
class="fas fa-star"
|
|
1548
|
+
aria-hidden="true"
|
|
1549
|
+
></i>
|
|
1550
|
+
</span>
|
|
1551
|
+
</button>
|
|
1552
|
+
</li>
|
|
1553
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1554
|
+
<a
|
|
1555
|
+
class="pf-c-menu__item"
|
|
1556
|
+
href="#"
|
|
1557
|
+
role="menuitem"
|
|
1558
|
+
target="_blank"
|
|
1559
|
+
>
|
|
1560
|
+
<span class="pf-c-menu__item-main">
|
|
1561
|
+
<span
|
|
1562
|
+
class="pf-c-menu__item-text"
|
|
1563
|
+
>Link 2</span>
|
|
1564
|
+
<span
|
|
1565
|
+
class="pf-c-menu__item-external-icon"
|
|
1566
|
+
>
|
|
1567
|
+
<i
|
|
1568
|
+
class="fas fa-external-link-alt"
|
|
1569
|
+
aria-hidden="true"
|
|
1570
|
+
></i>
|
|
1571
|
+
</span>
|
|
1572
|
+
<span
|
|
1573
|
+
class="pf-screen-reader"
|
|
1574
|
+
>(opens new window)</span>
|
|
1575
|
+
</span>
|
|
1576
|
+
</a>
|
|
1577
|
+
<button
|
|
1578
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1579
|
+
type="button"
|
|
1580
|
+
aria-label="Not starred"
|
|
1581
|
+
>
|
|
1582
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1583
|
+
<i
|
|
1584
|
+
class="fas fa-star"
|
|
1585
|
+
aria-hidden="true"
|
|
1586
|
+
></i>
|
|
1587
|
+
</span>
|
|
1588
|
+
</button>
|
|
1589
|
+
</li>
|
|
1590
|
+
</ul>
|
|
1591
|
+
</section>
|
|
1592
|
+
<hr class="pf-c-divider" />
|
|
1593
|
+
<section class="pf-c-menu__group">
|
|
1594
|
+
<h1 class="pf-c-menu__group-title">Group 1</h1>
|
|
1595
|
+
<ul class="pf-c-menu__list" role="menu">
|
|
1596
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1597
|
+
<a
|
|
1598
|
+
class="pf-c-menu__item"
|
|
1599
|
+
href="#"
|
|
1600
|
+
role="menuitem"
|
|
1601
|
+
>
|
|
1602
|
+
<span class="pf-c-menu__item-main">
|
|
1603
|
+
<span
|
|
1604
|
+
class="pf-c-menu__item-text"
|
|
1605
|
+
>Link 1</span>
|
|
1606
|
+
</span>
|
|
1607
|
+
</a>
|
|
1608
|
+
<button
|
|
1609
|
+
class="pf-c-menu__item-action pf-m-favorite"
|
|
1610
|
+
type="button"
|
|
1611
|
+
aria-label="Not starred"
|
|
1612
|
+
>
|
|
1613
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1614
|
+
<i
|
|
1615
|
+
class="fas fa-star"
|
|
1616
|
+
aria-hidden="true"
|
|
1617
|
+
></i>
|
|
1618
|
+
</span>
|
|
1619
|
+
</button>
|
|
1620
|
+
</li>
|
|
1621
|
+
<li class="pf-c-menu__list-item" role="none">
|
|
1622
|
+
<a
|
|
1623
|
+
class="pf-c-menu__item"
|
|
1624
|
+
href="#"
|
|
1625
|
+
role="menuitem"
|
|
1626
|
+
target="_blank"
|
|
1627
|
+
>
|
|
1628
|
+
<span class="pf-c-menu__item-main">
|
|
1629
|
+
<span
|
|
1630
|
+
class="pf-c-menu__item-text"
|
|
1631
|
+
>Link 2</span>
|
|
1632
|
+
<span
|
|
1633
|
+
class="pf-c-menu__item-external-icon"
|
|
1634
|
+
>
|
|
1635
|
+
<i
|
|
1636
|
+
class="fas fa-external-link-alt"
|
|
1637
|
+
aria-hidden="true"
|
|
1638
|
+
></i>
|
|
1639
|
+
</span>
|
|
1640
|
+
<span
|
|
1641
|
+
class="pf-screen-reader"
|
|
1642
|
+
>(opens new window)</span>
|
|
1643
|
+
</span>
|
|
1644
|
+
</a>
|
|
1645
|
+
<button
|
|
1646
|
+
class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
|
|
1647
|
+
type="button"
|
|
1648
|
+
aria-label="Starred"
|
|
1649
|
+
>
|
|
1650
|
+
<span class="pf-c-menu__item-action-icon">
|
|
1651
|
+
<i
|
|
1652
|
+
class="fas fa-star"
|
|
1653
|
+
aria-hidden="true"
|
|
1654
|
+
></i>
|
|
1655
|
+
</span>
|
|
1656
|
+
</button>
|
|
1657
|
+
</li>
|
|
1658
|
+
</ul>
|
|
1659
|
+
</section>
|
|
1660
|
+
</div>
|
|
1661
|
+
</li>
|
|
1662
|
+
</ul>
|
|
1663
|
+
</section>
|
|
1664
|
+
</div>
|
|
1665
|
+
</div>
|
|
1666
|
+
</div>
|
|
1667
|
+
</div>
|
|
1668
|
+
</div>
|
|
1669
|
+
<div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
|
|
1670
|
+
<div
|
|
1671
|
+
class="pf-c-dropdown pf-m-full-height"
|
|
1672
|
+
style="--pf-c-dropdown--MaxWidth: 20ch;"
|
|
1673
|
+
>
|
|
1674
|
+
<button
|
|
1675
|
+
class="pf-c-dropdown__toggle"
|
|
1676
|
+
id="page-demo-full-height-masthead-profile-button"
|
|
1677
|
+
aria-expanded="false"
|
|
1678
|
+
type="button"
|
|
1679
|
+
>
|
|
1680
|
+
<span class="pf-c-dropdown__toggle-image">
|
|
1681
|
+
<img
|
|
1682
|
+
class="pf-c-avatar"
|
|
1683
|
+
alt="Avatar image"
|
|
1684
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1685
|
+
/>
|
|
1686
|
+
</span>
|
|
1687
|
+
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
1688
|
+
<span class="pf-c-dropdown__toggle-icon">
|
|
1689
|
+
<i class="fas fa-caret-down" aria-hidden="true"></i>
|
|
1690
|
+
</span>
|
|
1691
|
+
</button>
|
|
1692
|
+
<div class="pf-c-dropdown__menu" hidden>
|
|
1693
|
+
<section class="pf-c-dropdown__group">
|
|
1694
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1695
|
+
<div class="pf-u-font-size-sm">Account number:</div>
|
|
1696
|
+
<div>123456789</div>
|
|
1697
|
+
</div>
|
|
1698
|
+
<div class="pf-c-dropdown__menu-item pf-m-text">
|
|
1699
|
+
<div class="pf-u-font-size-sm">Username:</div>
|
|
1700
|
+
<div>mshaksho@redhat.com</div>
|
|
1701
|
+
</div>
|
|
1702
|
+
</section>
|
|
1703
|
+
<hr class="pf-c-divider" />
|
|
1704
|
+
<section class="pf-c-dropdown__group">
|
|
1705
|
+
<ul>
|
|
1706
|
+
<li>
|
|
1707
|
+
<a class="pf-c-dropdown__menu-item" href="#">My profile</a>
|
|
1708
|
+
</li>
|
|
1709
|
+
<li>
|
|
1710
|
+
<a
|
|
1711
|
+
class="pf-c-dropdown__menu-item"
|
|
1712
|
+
href="#"
|
|
1713
|
+
>User management</a>
|
|
1714
|
+
</li>
|
|
1715
|
+
<li>
|
|
1716
|
+
<a class="pf-c-dropdown__menu-item" href="#">Logout</a>
|
|
1717
|
+
</li>
|
|
1718
|
+
</ul>
|
|
1719
|
+
</section>
|
|
1720
|
+
</div>
|
|
1721
|
+
</div>
|
|
1722
|
+
</div>
|
|
1723
|
+
</div>
|
|
1724
|
+
</div>
|
|
1725
|
+
</div>
|
|
1726
|
+
</div>
|
|
1727
|
+
</header>
|
|
1728
|
+
<div class="pf-c-page__sidebar">
|
|
1729
|
+
<div class="pf-c-page__sidebar-body">
|
|
1730
|
+
<nav
|
|
1731
|
+
class="pf-c-nav"
|
|
1732
|
+
id="page-demo-full-height-primary-nav"
|
|
1733
|
+
aria-label="Global"
|
|
1734
|
+
>
|
|
1735
|
+
<ul class="pf-c-nav__list">
|
|
1736
|
+
<li class="pf-c-nav__item">
|
|
1737
|
+
<a href="#" class="pf-c-nav__link">System panel</a>
|
|
1738
|
+
</li>
|
|
1739
|
+
<li class="pf-c-nav__item">
|
|
1740
|
+
<a
|
|
1741
|
+
href="#"
|
|
1742
|
+
class="pf-c-nav__link pf-m-current"
|
|
1743
|
+
aria-current="page"
|
|
1744
|
+
>Policy</a>
|
|
1745
|
+
</li>
|
|
1746
|
+
<li class="pf-c-nav__item">
|
|
1747
|
+
<a href="#" class="pf-c-nav__link">Authentication</a>
|
|
1748
|
+
</li>
|
|
1749
|
+
<li class="pf-c-nav__item">
|
|
1750
|
+
<a href="#" class="pf-c-nav__link">Network services</a>
|
|
1751
|
+
</li>
|
|
1752
|
+
<li class="pf-c-nav__item">
|
|
1753
|
+
<a href="#" class="pf-c-nav__link">Server</a>
|
|
1754
|
+
</li>
|
|
1755
|
+
</ul>
|
|
1756
|
+
</nav>
|
|
1757
|
+
</div>
|
|
1758
|
+
</div>
|
|
1759
|
+
<main
|
|
1760
|
+
class="pf-c-page__main"
|
|
1761
|
+
tabindex="-1"
|
|
1762
|
+
id="main-content-page-demo-full-height"
|
|
1763
|
+
>
|
|
1764
|
+
<section class="pf-c-page__main-breadcrumb pf-m-limit-width">
|
|
1765
|
+
<div class="pf-c-page__main-body">
|
|
1766
|
+
<nav class="pf-c-breadcrumb" aria-label="breadcrumb">
|
|
1767
|
+
<ol class="pf-c-breadcrumb__list">
|
|
1768
|
+
<li class="pf-c-breadcrumb__item">
|
|
1769
|
+
<a href="#" class="pf-c-breadcrumb__link">Section home</a>
|
|
1770
|
+
</li>
|
|
1771
|
+
<li class="pf-c-breadcrumb__item">
|
|
1772
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1773
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1774
|
+
</span>
|
|
1775
|
+
|
|
1776
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1777
|
+
</li>
|
|
1778
|
+
<li class="pf-c-breadcrumb__item">
|
|
1779
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1780
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1781
|
+
</span>
|
|
1782
|
+
|
|
1783
|
+
<a href="#" class="pf-c-breadcrumb__link">Section title</a>
|
|
1784
|
+
</li>
|
|
1785
|
+
<li class="pf-c-breadcrumb__item">
|
|
1786
|
+
<span class="pf-c-breadcrumb__item-divider">
|
|
1787
|
+
<i class="fas fa-angle-right" aria-hidden="true"></i>
|
|
1788
|
+
</span>
|
|
1789
|
+
|
|
1790
|
+
<a
|
|
1791
|
+
href="#"
|
|
1792
|
+
class="pf-c-breadcrumb__link pf-m-current"
|
|
1793
|
+
aria-current="page"
|
|
1794
|
+
>Section landing</a>
|
|
1795
|
+
</li>
|
|
1796
|
+
</ol>
|
|
1797
|
+
</nav>
|
|
1798
|
+
</div>
|
|
1799
|
+
</section>
|
|
1800
|
+
<section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
|
|
1801
|
+
<div class="pf-c-page__main-body">
|
|
1802
|
+
<div class="pf-c-content">
|
|
1803
|
+
<h1>Main title</h1>
|
|
1804
|
+
<p>This is a full page demo.</p>
|
|
1805
|
+
</div>
|
|
1806
|
+
</div>
|
|
1807
|
+
</section>
|
|
1808
|
+
<section class="pf-c-page__main-section pf-m-limit-width">
|
|
1809
|
+
<div class="pf-c-page__main-body">
|
|
1810
|
+
<div class="pf-l-gallery pf-m-gutter">
|
|
1811
|
+
<div class="pf-c-card">
|
|
1812
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1813
|
+
</div>
|
|
1814
|
+
<div class="pf-c-card">
|
|
1815
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1816
|
+
</div>
|
|
1817
|
+
<div class="pf-c-card">
|
|
1818
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1819
|
+
</div>
|
|
1820
|
+
<div class="pf-c-card">
|
|
1821
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1822
|
+
</div>
|
|
1823
|
+
<div class="pf-c-card">
|
|
1824
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1825
|
+
</div>
|
|
1826
|
+
<div class="pf-c-card">
|
|
1827
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1828
|
+
</div>
|
|
1829
|
+
<div class="pf-c-card">
|
|
1830
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1831
|
+
</div>
|
|
1832
|
+
<div class="pf-c-card">
|
|
1833
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1834
|
+
</div>
|
|
1835
|
+
<div class="pf-c-card">
|
|
1836
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1837
|
+
</div>
|
|
1838
|
+
<div class="pf-c-card">
|
|
1839
|
+
<div class="pf-c-card__body">This is a card</div>
|
|
1840
|
+
</div>
|
|
1841
|
+
</div>
|
|
1842
|
+
</div>
|
|
1843
|
+
</section>
|
|
1844
|
+
</main>
|
|
1845
|
+
</div>
|
|
1846
|
+
|
|
1847
|
+
```
|
|
1848
|
+
|
|
925
1849
|
### Sticky horizontal subnav
|
|
926
1850
|
|
|
927
1851
|
```html isFullscreen
|
|
@@ -1681,8 +2605,8 @@ wrapperTag: div
|
|
|
1681
2605
|
<span class="pf-c-dropdown__toggle-image">
|
|
1682
2606
|
<img
|
|
1683
2607
|
class="pf-c-avatar"
|
|
1684
|
-
src="/assets/images/img_avatar.svg"
|
|
1685
2608
|
alt="Avatar image"
|
|
2609
|
+
src="/assets/images/img_avatar-light.svg"
|
|
1686
2610
|
/>
|
|
1687
2611
|
</span>
|
|
1688
2612
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -2763,8 +3687,8 @@ wrapperTag: div
|
|
|
2763
3687
|
<span class="pf-c-dropdown__toggle-image">
|
|
2764
3688
|
<img
|
|
2765
3689
|
class="pf-c-avatar"
|
|
2766
|
-
src="/assets/images/img_avatar.svg"
|
|
2767
3690
|
alt="Avatar image"
|
|
3691
|
+
src="/assets/images/img_avatar-light.svg"
|
|
2768
3692
|
/>
|
|
2769
3693
|
</span>
|
|
2770
3694
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -3807,8 +4731,8 @@ wrapperTag: div
|
|
|
3807
4731
|
<span class="pf-c-dropdown__toggle-image">
|
|
3808
4732
|
<img
|
|
3809
4733
|
class="pf-c-avatar"
|
|
3810
|
-
src="/assets/images/img_avatar.svg"
|
|
3811
4734
|
alt="Avatar image"
|
|
4735
|
+
src="/assets/images/img_avatar-light.svg"
|
|
3812
4736
|
/>
|
|
3813
4737
|
</span>
|
|
3814
4738
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -4854,8 +5778,8 @@ wrapperTag: div
|
|
|
4854
5778
|
<span class="pf-c-dropdown__toggle-image">
|
|
4855
5779
|
<img
|
|
4856
5780
|
class="pf-c-avatar"
|
|
4857
|
-
src="/assets/images/img_avatar.svg"
|
|
4858
5781
|
alt="Avatar image"
|
|
5782
|
+
src="/assets/images/img_avatar-light.svg"
|
|
4859
5783
|
/>
|
|
4860
5784
|
</span>
|
|
4861
5785
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -5898,8 +6822,8 @@ wrapperTag: div
|
|
|
5898
6822
|
<span class="pf-c-dropdown__toggle-image">
|
|
5899
6823
|
<img
|
|
5900
6824
|
class="pf-c-avatar"
|
|
5901
|
-
src="/assets/images/img_avatar.svg"
|
|
5902
6825
|
alt="Avatar image"
|
|
6826
|
+
src="/assets/images/img_avatar-light.svg"
|
|
5903
6827
|
/>
|
|
5904
6828
|
</span>
|
|
5905
6829
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -6947,8 +7871,8 @@ wrapperTag: div
|
|
|
6947
7871
|
<span class="pf-c-dropdown__toggle-image">
|
|
6948
7872
|
<img
|
|
6949
7873
|
class="pf-c-avatar"
|
|
6950
|
-
src="/assets/images/img_avatar.svg"
|
|
6951
7874
|
alt="Avatar image"
|
|
7875
|
+
src="/assets/images/img_avatar-light.svg"
|
|
6952
7876
|
/>
|
|
6953
7877
|
</span>
|
|
6954
7878
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -8001,8 +8925,8 @@ wrapperTag: div
|
|
|
8001
8925
|
<span class="pf-c-dropdown__toggle-image">
|
|
8002
8926
|
<img
|
|
8003
8927
|
class="pf-c-avatar"
|
|
8004
|
-
src="/assets/images/img_avatar.svg"
|
|
8005
8928
|
alt="Avatar image"
|
|
8929
|
+
src="/assets/images/img_avatar-light.svg"
|
|
8006
8930
|
/>
|
|
8007
8931
|
</span>
|
|
8008
8932
|
<span class="pf-c-dropdown__toggle-text">Ned Username</span>
|
|
@@ -8155,4 +9079,4 @@ wrapperTag: div
|
|
|
8155
9079
|
|
|
8156
9080
|
## Documentation
|
|
8157
9081
|
|
|
8158
|
-
To make the page component
|
|
9082
|
+
To make the page component fill the full height of the viewport, it is recommended to add `height: 100%;` to all ancestor elements of the page component. Alternatively, use the `.pf-m-full-height` modifier class on the page component.
|