@patternfly/patternfly 4.176.1 → 4.177.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/UPGRADE-GUIDE.md +3 -0
- package/components/Avatar/avatar.css +224 -0
- package/components/Avatar/avatar.scss +18 -0
- package/components/CodeEditor/code-editor.css +8 -0
- package/components/CodeEditor/code-editor.scss +11 -1
- package/components/Dropdown/dropdown.css +10 -9
- package/components/Dropdown/dropdown.scss +17 -16
- package/components/Nav/nav.css +11 -0
- package/components/Nav/nav.scss +14 -0
- package/components/Table/table.css +2 -1
- package/components/Table/table.scss +8 -5
- package/docs/components/Avatar/examples/Avatar.md +53 -5
- package/docs/components/Brand/examples/Brand.md +6 -6
- package/docs/components/CodeEditor/examples/CodeEditor.md +71 -10
- package/docs/components/DataList/examples/DataList.md +11 -11
- package/docs/components/DescriptionList/examples/DescriptionList.md +19 -19
- package/docs/components/Divider/examples/Divider.md +2 -2
- package/docs/components/Drawer/examples/Drawer.md +27 -27
- package/docs/components/Dropdown/examples/Dropdown.md +2 -2
- package/docs/components/JumpLinks/examples/JumpLinks.md +19 -19
- package/docs/components/LogViewer/examples/LogViewer.md +28 -28
- package/docs/components/Masthead/examples/masthead.md +10 -10
- package/docs/components/Menu/examples/Menu.md +45 -44
- package/docs/components/Nav/examples/Navigation.md +23 -44
- package/docs/components/Page/examples/Page.md +4 -4
- package/docs/components/Pagination/examples/Pagination.md +2 -2
- package/docs/components/Sidebar/examples/Sidebar.md +14 -14
- package/docs/components/Table/examples/Table.md +20 -9
- package/docs/components/Tabs/examples/Tabs.md +27 -27
- package/docs/components/Toolbar/examples/Toolbar.md +31 -31
- package/docs/demos/Alert/examples/Alert.md +1 -2
- package/docs/demos/BackToTop/examples/BackToTop.md +1 -202
- package/docs/demos/Card/examples/Card.md +42 -14
- package/docs/demos/ContextSelector/examples/ContextSelector.md +1166 -17
- package/docs/demos/Drawer/examples/Drawer.md +3 -3
- package/docs/demos/JumpLinks/examples/JumpLinks.md +4 -8
- package/docs/demos/Masthead/examples/Masthead.md +14 -6
- package/docs/demos/Nav/examples/Nav.md +8 -9
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +5 -5
- package/docs/demos/Page/examples/Page.md +4004 -989
- package/docs/demos/Table/examples/Table.md +16516 -12176
- package/docs/demos/Tabs/examples/Tabs.md +0 -94
- package/docs/demos/Toolbar/examples/Toolbar.md +1 -2
- package/docs/demos/Wizard/examples/Wizard.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +1 -1
- package/docs/layouts/Gallery/examples/Gallery.md +2 -2
- package/docs/layouts/Grid/examples/Grid.md +9 -9
- package/docs/utilities/Accessibility/examples/Accessibility.md +1 -1
- package/docs/utilities/Alignment/examples/Alignment.md +1 -1
- package/docs/utilities/BackgroundColor/examples/BackgroundColor.md +1 -1
- package/docs/utilities/Display/examples/Display.md +1 -1
- package/docs/utilities/Flex/examples/Flex.md +1 -1
- package/docs/utilities/Float/examples/Float.md +1 -1
- package/docs/utilities/Sizing/examples/Sizing.md +12 -0
- package/docs/utilities/Spacing/examples/Spacing.md +1 -1
- package/docs/utilities/Text/examples/Text.md +1 -1
- package/package.json +1 -1
- package/patternfly-no-reset.css +255 -10
- package/patternfly.css +255 -10
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
|
@@ -26,18 +26,18 @@ Toolbar relies on groups (`.pf-c-toolbar__group`) and items (`.pf-c-toolbar__ite
|
|
|
26
26
|
|
|
27
27
|
### Modifiers
|
|
28
28
|
|
|
29
|
-
| Class | Applied to | Outcome
|
|
30
|
-
| ------------------------------------- | ------------------- |
|
|
31
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional breakpoint. |
|
|
32
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional breakpoint. |
|
|
33
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint. |
|
|
34
|
-
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint. |
|
|
29
|
+
| Class | Applied to | Outcome |
|
|
30
|
+
| ------------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
31
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
32
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
33
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
34
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
35
35
|
|
|
36
36
|
### Special notes
|
|
37
37
|
|
|
38
38
|
Several components in the following examples do not include functional and/or accessibility specifications (for example `.pf-c-select`, `.pf-c-options-menu`). Rather, `.pf-c-toolbar` focuses on functionality and accessibility specifications that apply to it only.
|
|
39
39
|
|
|
40
|
-
**Available breakpoints are: `-on-sm
|
|
40
|
+
**Available [breakpoints](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes) are: `-on-sm`, `-on-md`, `-on-lg`, `-on-xl`, and `-on-2xl`.**
|
|
41
41
|
|
|
42
42
|
## Examples
|
|
43
43
|
|
|
@@ -167,9 +167,9 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
167
167
|
| Class | Applied to | Outcome |
|
|
168
168
|
| ----------------------------------------------------------- | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
169
169
|
| `.pf-m-page-insets` | `.pf-c-toolbar` | Modifies toolbar insets to match page section, table, page header or any other component whose inset shifts from `--pf-global--spacer--md` to `--pf-global--spacer--lg` at the `xl` breakpoint. |
|
|
170
|
-
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing.
|
|
171
|
-
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing.
|
|
172
|
-
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding.
|
|
170
|
+
| `.pf-m-spacer-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
171
|
+
| `.pf-m-space-items-{none, sm, md, lg}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
172
|
+
| `.pf-m-inset-{none, sm, md, lg, xl, 2xl}{-on-[breakpoint]}` | `.pf-c-toolbar` | Modifies toolbar horizontal padding at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
173
173
|
|
|
174
174
|
### Width control
|
|
175
175
|
|
|
@@ -195,10 +195,10 @@ In some instances, it may be necessary to adjust spacing explicitly where items
|
|
|
195
195
|
|
|
196
196
|
### Width control usage
|
|
197
197
|
|
|
198
|
-
| Class | Applied to | Outcome
|
|
199
|
-
| ----------------------------------------------------------- | --------------------- |
|
|
200
|
-
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item. |
|
|
201
|
-
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item. |
|
|
198
|
+
| Class | Applied to | Outcome |
|
|
199
|
+
| ----------------------------------------------------------- | --------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
200
|
+
| `--pf-c-toolbar__item--Width{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
201
|
+
| `--pf-c-toolbar__item--MinWidth{-on-[breakpoint]}: {width}` | `.pf-c-toolbar__item` | Modifies the min width value of a toolbar item at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
202
202
|
|
|
203
203
|
### Group types
|
|
204
204
|
|
|
@@ -1041,11 +1041,11 @@ The `.pf-m-toggle-group` controls when, and at which breakpoint, filters will be
|
|
|
1041
1041
|
|
|
1042
1042
|
### Usage
|
|
1043
1043
|
|
|
1044
|
-
| Class | Applied to | Outcome
|
|
1045
|
-
| ------------------------------ | ----------------------------------------------------------------------------- |
|
|
1046
|
-
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at breakpoint. This selector must be applied consistently to toggle group and expandable content. |
|
|
1047
|
-
| `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout.
|
|
1048
|
-
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state.
|
|
1044
|
+
| Class | Applied to | Outcome |
|
|
1045
|
+
| ------------------------------ | ----------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
1046
|
+
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element visibility at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
1047
|
+
| `.pf-m-chip-container` | `.pf-c-toolbar__content-section`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
1048
|
+
| `.pf-m-expanded` | `.pf-c-toolbar__expandable-content`, `.pf-c-toolbar__toggle` | Modifies the component for the expanded state. |
|
|
1049
1049
|
|
|
1050
1050
|
### Selected
|
|
1051
1051
|
|
|
@@ -4094,10 +4094,10 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4094
4094
|
| `.pf-m-button-group` | `.pf-c-toolbar__group` | Initiates button group spacing. |
|
|
4095
4095
|
| `.pf-m-icon-button-group` | `.pf-c-toolbar__group` | Initiates icon button group spacing. |
|
|
4096
4096
|
| `.pf-m-filter-group` | `.pf-c-toolbar__group` | Initiates filter group spacing. |
|
|
4097
|
-
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional breakpoint.
|
|
4098
|
-
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional breakpoint.
|
|
4099
|
-
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional breakpoint.
|
|
4100
|
-
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional breakpoint.
|
|
4097
|
+
| `.pf-m-hidden{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be hidden, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4098
|
+
| `.pf-m-visible{-on-[breakpoint]}` | `.pf-c-toolbar__content`, `.pf-c-toolbar__content-section`, `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies toolbar element to be shown, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4099
|
+
| `.pf-m-align-right{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align right, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4100
|
+
| `.pf-m-align-left{-on-[breakpoint]}` | `.pf-c-toolbar > *` | Modifies toolbar element to align left, at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4101
4101
|
| `.pf-m-label` | `.pf-c-toolbar__item` | Modifies toolbar item to label. |
|
|
4102
4102
|
| `.pf-m-chip-container` | `.pf-c-toolbar__content`, `.pf-c-toolbar__group` | Modifies the toolbar element for applied filters layout. |
|
|
4103
4103
|
| `.pf-m-overflow-container` | `.pf-c-toolbar__item`, `.pf-c-toolbar__group` | Modifies the toolbar element to hide overflow and respond to available space. Used for horizontal navigation. |
|
|
@@ -4119,14 +4119,14 @@ As the toolbar component is a hybrid layout and component, some of its elements
|
|
|
4119
4119
|
|
|
4120
4120
|
### Toggle group usage
|
|
4121
4121
|
|
|
4122
|
-
| Class | Applied to | Outcome
|
|
4123
|
-
| ------------------------------ | ----------------------------------------------------------------------------- |
|
|
4124
|
-
| `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached.
|
|
4125
|
-
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at breakpoint. This selector must be applied consistently to toggle group and expandable content.
|
|
4122
|
+
| Class | Applied to | Outcome |
|
|
4123
|
+
| ------------------------------ | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4124
|
+
| `.pf-m-toggle-group` | `.pf-c-toolbar__group` | Modifies toolbar group to control when, and at which breakpoint, filters will be hidden/shown. By default, all filters are hidden until the specified breakpoint is reached. |
|
|
4125
|
+
| `.pf-m-show{-on-[breakpoint]}` | `.pf-c-toolbar__group.pf-m-toggle-group`, `.pf-c-toolbar__expandable-content` | Modifies toolbar element to hidden at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). This selector must be applied consistently to toggle group and expandable content. |
|
|
4126
4126
|
|
|
4127
4127
|
### Spacer system
|
|
4128
4128
|
|
|
4129
|
-
| Class | Applied to | Outcome
|
|
4130
|
-
| ------------------------------------------------------------ | --------------------------------------------- |
|
|
4131
|
-
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing. |
|
|
4132
|
-
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing. |
|
|
4129
|
+
| Class | Applied to | Outcome |
|
|
4130
|
+
| ------------------------------------------------------------ | --------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
4131
|
+
| `.pf-m-spacer-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group`, `.pf-c-toolbar__item` | Modifies toolbar group or item spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
4132
|
+
| `.pf-m-space-items-{none, sm, md, lg, xl}{-on-[breakpoint]}` | `.pf-c-toolbar__group` | Modifies toolbar group child spacing at optional [breakpoint](/developer-resources/global-css-variables#breakpoint-variables-and-class-suffixes). |
|
|
@@ -33,7 +33,6 @@ section: components
|
|
|
33
33
|
/>
|
|
34
34
|
</a>
|
|
35
35
|
</div>
|
|
36
|
-
|
|
37
36
|
<div class="pf-c-page__header-tools">
|
|
38
37
|
<div class="pf-c-page__header-tools-group">
|
|
39
38
|
<div
|
|
@@ -236,7 +235,7 @@ section: components
|
|
|
236
235
|
<div class="pf-c-page__main-body">
|
|
237
236
|
<div class="pf-c-content">
|
|
238
237
|
<h1>Main title</h1>
|
|
239
|
-
<p>This is a
|
|
238
|
+
<p>This is a full page demo.</p>
|
|
240
239
|
</div>
|
|
241
240
|
</div>
|
|
242
241
|
</section>
|
|
@@ -34,7 +34,6 @@ cssPrefix: pf-d-back-to-top
|
|
|
34
34
|
/>
|
|
35
35
|
</a>
|
|
36
36
|
</div>
|
|
37
|
-
|
|
38
37
|
<div class="pf-c-page__header-tools">
|
|
39
38
|
<div class="pf-c-page__header-tools-group">
|
|
40
39
|
<div
|
|
@@ -237,7 +236,7 @@ cssPrefix: pf-d-back-to-top
|
|
|
237
236
|
<div class="pf-c-page__main-body">
|
|
238
237
|
<div class="pf-c-content">
|
|
239
238
|
<h1>Main title</h1>
|
|
240
|
-
<p>This is a
|
|
239
|
+
<p>This is a full page demo.</p>
|
|
241
240
|
</div>
|
|
242
241
|
</div>
|
|
243
242
|
</section>
|
|
@@ -294,206 +293,6 @@ cssPrefix: pf-d-back-to-top
|
|
|
294
293
|
<div class="pf-c-card__body">This is a card</div>
|
|
295
294
|
</div>
|
|
296
295
|
</div>
|
|
297
|
-
<div class="pf-l-gallery__item">
|
|
298
|
-
<div class="pf-c-card">
|
|
299
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
300
|
-
</div>
|
|
301
|
-
</div>
|
|
302
|
-
<div class="pf-l-gallery__item">
|
|
303
|
-
<div class="pf-c-card">
|
|
304
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
305
|
-
</div>
|
|
306
|
-
</div>
|
|
307
|
-
<div class="pf-l-gallery__item">
|
|
308
|
-
<div class="pf-c-card">
|
|
309
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
310
|
-
</div>
|
|
311
|
-
</div>
|
|
312
|
-
<div class="pf-l-gallery__item">
|
|
313
|
-
<div class="pf-c-card">
|
|
314
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
315
|
-
</div>
|
|
316
|
-
</div>
|
|
317
|
-
<div class="pf-l-gallery__item">
|
|
318
|
-
<div class="pf-c-card">
|
|
319
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
320
|
-
</div>
|
|
321
|
-
</div>
|
|
322
|
-
<div class="pf-l-gallery__item">
|
|
323
|
-
<div class="pf-c-card">
|
|
324
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
325
|
-
</div>
|
|
326
|
-
</div>
|
|
327
|
-
<div class="pf-l-gallery__item">
|
|
328
|
-
<div class="pf-c-card">
|
|
329
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
330
|
-
</div>
|
|
331
|
-
</div>
|
|
332
|
-
<div class="pf-l-gallery__item">
|
|
333
|
-
<div class="pf-c-card">
|
|
334
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
335
|
-
</div>
|
|
336
|
-
</div>
|
|
337
|
-
<div class="pf-l-gallery__item">
|
|
338
|
-
<div class="pf-c-card">
|
|
339
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
340
|
-
</div>
|
|
341
|
-
</div>
|
|
342
|
-
<div class="pf-l-gallery__item">
|
|
343
|
-
<div class="pf-c-card">
|
|
344
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
345
|
-
</div>
|
|
346
|
-
</div>
|
|
347
|
-
<div class="pf-l-gallery__item">
|
|
348
|
-
<div class="pf-c-card">
|
|
349
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
350
|
-
</div>
|
|
351
|
-
</div>
|
|
352
|
-
<div class="pf-l-gallery__item">
|
|
353
|
-
<div class="pf-c-card">
|
|
354
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
355
|
-
</div>
|
|
356
|
-
</div>
|
|
357
|
-
<div class="pf-l-gallery__item">
|
|
358
|
-
<div class="pf-c-card">
|
|
359
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
360
|
-
</div>
|
|
361
|
-
</div>
|
|
362
|
-
<div class="pf-l-gallery__item">
|
|
363
|
-
<div class="pf-c-card">
|
|
364
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
365
|
-
</div>
|
|
366
|
-
</div>
|
|
367
|
-
<div class="pf-l-gallery__item">
|
|
368
|
-
<div class="pf-c-card">
|
|
369
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
370
|
-
</div>
|
|
371
|
-
</div>
|
|
372
|
-
<div class="pf-l-gallery__item">
|
|
373
|
-
<div class="pf-c-card">
|
|
374
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
375
|
-
</div>
|
|
376
|
-
</div>
|
|
377
|
-
<div class="pf-l-gallery__item">
|
|
378
|
-
<div class="pf-c-card">
|
|
379
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
380
|
-
</div>
|
|
381
|
-
</div>
|
|
382
|
-
<div class="pf-l-gallery__item">
|
|
383
|
-
<div class="pf-c-card">
|
|
384
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
385
|
-
</div>
|
|
386
|
-
</div>
|
|
387
|
-
<div class="pf-l-gallery__item">
|
|
388
|
-
<div class="pf-c-card">
|
|
389
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
390
|
-
</div>
|
|
391
|
-
</div>
|
|
392
|
-
<div class="pf-l-gallery__item">
|
|
393
|
-
<div class="pf-c-card">
|
|
394
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
395
|
-
</div>
|
|
396
|
-
</div>
|
|
397
|
-
<div class="pf-l-gallery__item">
|
|
398
|
-
<div class="pf-c-card">
|
|
399
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
400
|
-
</div>
|
|
401
|
-
</div>
|
|
402
|
-
<div class="pf-l-gallery__item">
|
|
403
|
-
<div class="pf-c-card">
|
|
404
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
405
|
-
</div>
|
|
406
|
-
</div>
|
|
407
|
-
<div class="pf-l-gallery__item">
|
|
408
|
-
<div class="pf-c-card">
|
|
409
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
410
|
-
</div>
|
|
411
|
-
</div>
|
|
412
|
-
<div class="pf-l-gallery__item">
|
|
413
|
-
<div class="pf-c-card">
|
|
414
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
415
|
-
</div>
|
|
416
|
-
</div>
|
|
417
|
-
<div class="pf-l-gallery__item">
|
|
418
|
-
<div class="pf-c-card">
|
|
419
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
420
|
-
</div>
|
|
421
|
-
</div>
|
|
422
|
-
<div class="pf-l-gallery__item">
|
|
423
|
-
<div class="pf-c-card">
|
|
424
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
425
|
-
</div>
|
|
426
|
-
</div>
|
|
427
|
-
<div class="pf-l-gallery__item">
|
|
428
|
-
<div class="pf-c-card">
|
|
429
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
430
|
-
</div>
|
|
431
|
-
</div>
|
|
432
|
-
<div class="pf-l-gallery__item">
|
|
433
|
-
<div class="pf-c-card">
|
|
434
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
435
|
-
</div>
|
|
436
|
-
</div>
|
|
437
|
-
<div class="pf-l-gallery__item">
|
|
438
|
-
<div class="pf-c-card">
|
|
439
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
440
|
-
</div>
|
|
441
|
-
</div>
|
|
442
|
-
<div class="pf-l-gallery__item">
|
|
443
|
-
<div class="pf-c-card">
|
|
444
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
445
|
-
</div>
|
|
446
|
-
</div>
|
|
447
|
-
<div class="pf-l-gallery__item">
|
|
448
|
-
<div class="pf-c-card">
|
|
449
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
450
|
-
</div>
|
|
451
|
-
</div>
|
|
452
|
-
<div class="pf-l-gallery__item">
|
|
453
|
-
<div class="pf-c-card">
|
|
454
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
455
|
-
</div>
|
|
456
|
-
</div>
|
|
457
|
-
<div class="pf-l-gallery__item">
|
|
458
|
-
<div class="pf-c-card">
|
|
459
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
460
|
-
</div>
|
|
461
|
-
</div>
|
|
462
|
-
<div class="pf-l-gallery__item">
|
|
463
|
-
<div class="pf-c-card">
|
|
464
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
465
|
-
</div>
|
|
466
|
-
</div>
|
|
467
|
-
<div class="pf-l-gallery__item">
|
|
468
|
-
<div class="pf-c-card">
|
|
469
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
470
|
-
</div>
|
|
471
|
-
</div>
|
|
472
|
-
<div class="pf-l-gallery__item">
|
|
473
|
-
<div class="pf-c-card">
|
|
474
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
475
|
-
</div>
|
|
476
|
-
</div>
|
|
477
|
-
<div class="pf-l-gallery__item">
|
|
478
|
-
<div class="pf-c-card">
|
|
479
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
480
|
-
</div>
|
|
481
|
-
</div>
|
|
482
|
-
<div class="pf-l-gallery__item">
|
|
483
|
-
<div class="pf-c-card">
|
|
484
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
485
|
-
</div>
|
|
486
|
-
</div>
|
|
487
|
-
<div class="pf-l-gallery__item">
|
|
488
|
-
<div class="pf-c-card">
|
|
489
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
490
|
-
</div>
|
|
491
|
-
</div>
|
|
492
|
-
<div class="pf-l-gallery__item">
|
|
493
|
-
<div class="pf-c-card">
|
|
494
|
-
<div class="pf-c-card__body">This is a card</div>
|
|
495
|
-
</div>
|
|
496
|
-
</div>
|
|
497
296
|
</div>
|
|
498
297
|
</div>
|
|
499
298
|
</section>
|
|
@@ -1793,16 +1793,24 @@ wrapperTag: div
|
|
|
1793
1793
|
### Utilization card 3
|
|
1794
1794
|
|
|
1795
1795
|
```html
|
|
1796
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
1797
|
+
<code>baseline</code> alignment.
|
|
1798
|
+
<br />
|
|
1799
|
+
<br />
|
|
1796
1800
|
<div
|
|
1797
1801
|
class="pf-l-gallery pf-m-gutter"
|
|
1798
1802
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
1799
1803
|
>
|
|
1800
1804
|
<div class="pf-c-card" id="utilization-card-3-example">
|
|
1801
|
-
<div class="pf-c-card__header">
|
|
1802
|
-
<div
|
|
1805
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
1806
|
+
<div
|
|
1807
|
+
class="pf-c-card__title"
|
|
1808
|
+
id="utilization-card-3-example-title1"
|
|
1809
|
+
style="padding-top: 3px;"
|
|
1810
|
+
>
|
|
1803
1811
|
<h2 class="pf-c-title pf-m-lg">Recommendations</h2>
|
|
1804
1812
|
</div>
|
|
1805
|
-
<div class="pf-c-card__actions">
|
|
1813
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
1806
1814
|
<div class="pf-c-select">
|
|
1807
1815
|
<span
|
|
1808
1816
|
id="utilization-card-3-example-select-dropdown-label"
|
|
@@ -1810,7 +1818,7 @@ wrapperTag: div
|
|
|
1810
1818
|
>Choose one</span>
|
|
1811
1819
|
|
|
1812
1820
|
<button
|
|
1813
|
-
class="pf-c-select__toggle"
|
|
1821
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
1814
1822
|
type="button"
|
|
1815
1823
|
id="utilization-card-3-example-select-dropdown-toggle"
|
|
1816
1824
|
aria-haspopup="true"
|
|
@@ -2551,6 +2559,10 @@ wrapperTag: div
|
|
|
2551
2559
|
### Trend card 1
|
|
2552
2560
|
|
|
2553
2561
|
```html
|
|
2562
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2563
|
+
<code>baseline</code> alignment.
|
|
2564
|
+
<br />
|
|
2565
|
+
<br />
|
|
2554
2566
|
<div
|
|
2555
2567
|
class="pf-l-gallery pf-m-gutter"
|
|
2556
2568
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
@@ -2563,7 +2575,7 @@ wrapperTag: div
|
|
|
2563
2575
|
</div>
|
|
2564
2576
|
<span class="pf-u-color-200">Workload</span>
|
|
2565
2577
|
</div>
|
|
2566
|
-
<div class="pf-c-card__actions">
|
|
2578
|
+
<div class="pf-c-card__actions pf-m-no-offset" style="padding-top: 1px;">
|
|
2567
2579
|
<div class="pf-c-select">
|
|
2568
2580
|
<span
|
|
2569
2581
|
id="trend-card-1-example-select-dropdown-label"
|
|
@@ -2571,7 +2583,7 @@ wrapperTag: div
|
|
|
2571
2583
|
>Choose one</span>
|
|
2572
2584
|
|
|
2573
2585
|
<button
|
|
2574
|
-
class="pf-c-select__toggle"
|
|
2586
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2575
2587
|
type="button"
|
|
2576
2588
|
id="trend-card-1-example-select-dropdown-toggle"
|
|
2577
2589
|
aria-haspopup="true"
|
|
@@ -2672,13 +2684,17 @@ wrapperTag: div
|
|
|
2672
2684
|
### Log view
|
|
2673
2685
|
|
|
2674
2686
|
```html
|
|
2687
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2688
|
+
<code>baseline</code> alignment.
|
|
2689
|
+
<br />
|
|
2690
|
+
<br />
|
|
2675
2691
|
<div
|
|
2676
2692
|
class="pf-l-gallery pf-m-gutter"
|
|
2677
2693
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
2678
2694
|
>
|
|
2679
2695
|
<div class="pf-c-card" id="card-log-view-example">
|
|
2680
|
-
<div class="pf-c-card__header">
|
|
2681
|
-
<div class="pf-c-card__actions">
|
|
2696
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
2697
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
2682
2698
|
<div class="pf-c-select">
|
|
2683
2699
|
<span
|
|
2684
2700
|
id="card-log-view-example-select-dropdown-label"
|
|
@@ -2686,7 +2702,7 @@ wrapperTag: div
|
|
|
2686
2702
|
>Choose one</span>
|
|
2687
2703
|
|
|
2688
2704
|
<button
|
|
2689
|
-
class="pf-c-select__toggle"
|
|
2705
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2690
2706
|
type="button"
|
|
2691
2707
|
id="card-log-view-example-select-dropdown-toggle"
|
|
2692
2708
|
aria-haspopup="true"
|
|
@@ -2737,7 +2753,11 @@ wrapperTag: div
|
|
|
2737
2753
|
</ul>
|
|
2738
2754
|
</div>
|
|
2739
2755
|
</div>
|
|
2740
|
-
<div
|
|
2756
|
+
<div
|
|
2757
|
+
class="pf-c-card__title"
|
|
2758
|
+
id="card-log-view-example-title1"
|
|
2759
|
+
style="padding-top: 3px;"
|
|
2760
|
+
>
|
|
2741
2761
|
<h2 class="pf-c-title pf-m-lg">Activity</h2>
|
|
2742
2762
|
</div>
|
|
2743
2763
|
</div>
|
|
@@ -2809,13 +2829,17 @@ wrapperTag: div
|
|
|
2809
2829
|
### Events view
|
|
2810
2830
|
|
|
2811
2831
|
```html
|
|
2832
|
+
<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to
|
|
2833
|
+
<code>baseline</code> alignment.
|
|
2834
|
+
<br />
|
|
2835
|
+
<br />
|
|
2812
2836
|
<div
|
|
2813
2837
|
class="pf-l-gallery pf-m-gutter"
|
|
2814
2838
|
style="--pf-l-gallery--GridTemplateColumns--min: 360px;"
|
|
2815
2839
|
>
|
|
2816
2840
|
<div class="pf-c-card" id="card-events-view-example">
|
|
2817
|
-
<div class="pf-c-card__header">
|
|
2818
|
-
<div class="pf-c-card__actions">
|
|
2841
|
+
<div class="pf-c-card__header pf-u-align-items-flex-start">
|
|
2842
|
+
<div class="pf-c-card__actions pf-m-no-offset">
|
|
2819
2843
|
<div class="pf-c-select">
|
|
2820
2844
|
<span
|
|
2821
2845
|
id="card-events-view-example-select-dropdown-label"
|
|
@@ -2823,7 +2847,7 @@ wrapperTag: div
|
|
|
2823
2847
|
>Choose one</span>
|
|
2824
2848
|
|
|
2825
2849
|
<button
|
|
2826
|
-
class="pf-c-select__toggle"
|
|
2850
|
+
class="pf-c-select__toggle pf-m-plain"
|
|
2827
2851
|
type="button"
|
|
2828
2852
|
id="card-events-view-example-select-dropdown-toggle"
|
|
2829
2853
|
aria-haspopup="true"
|
|
@@ -2874,7 +2898,11 @@ wrapperTag: div
|
|
|
2874
2898
|
</ul>
|
|
2875
2899
|
</div>
|
|
2876
2900
|
</div>
|
|
2877
|
-
<div
|
|
2901
|
+
<div
|
|
2902
|
+
class="pf-c-card__title"
|
|
2903
|
+
id="card-events-view-example-title1"
|
|
2904
|
+
style="padding-top: 3px;"
|
|
2905
|
+
>
|
|
2878
2906
|
<h2 class="pf-c-title pf-m-lg">Events</h2>
|
|
2879
2907
|
</div>
|
|
2880
2908
|
</div>
|