@patternfly/patternfly 6.0.0-alpha.90 → 6.0.0-alpha.92
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/patternfly-common.css +10 -10
- package/base/patternfly-globals.css +3 -3
- package/base/patternfly-icons.css +1 -1
- package/base/patternfly-themes.css +53 -53
- package/base/patternfly-variables.css +236 -245
- package/base/tokens/_tokens-font.scss +0 -11
- package/components/AboutModalBox/about-modal-box.css +102 -102
- package/components/Accordion/accordion.css +118 -118
- package/components/ActionList/action-list.css +16 -16
- package/components/Alert/alert-group.css +50 -50
- package/components/Alert/alert.css +161 -161
- package/components/AppLauncher/app-launcher.css +167 -167
- package/components/Avatar/avatar.css +116 -116
- package/components/BackToTop/back-to-top.css +21 -21
- package/components/Backdrop/backdrop.css +9 -9
- package/components/BackgroundImage/background-image.css +15 -15
- package/components/Badge/badge.css +35 -35
- package/components/Banner/banner.css +114 -114
- package/components/Brand/brand.css +28 -28
- package/components/Breadcrumb/breadcrumb.css +62 -62
- package/components/Button/button.css +514 -514
- package/components/CalendarMonth/calendar-month.css +144 -144
- package/components/Card/card.css +230 -230
- package/components/Check/check.css +43 -43
- package/components/Chip/chip-group.css +60 -60
- package/components/Chip/chip.css +83 -83
- package/components/ClipboardCopy/clipboard-copy.css +71 -71
- package/components/CodeBlock/code-block.css +35 -35
- package/components/CodeEditor/code-editor.css +121 -121
- package/components/Content/content.css +216 -216
- package/components/ContextSelector/context-selector.css +251 -251
- package/components/DataList/data-list-grid.css +182 -182
- package/components/DataList/data-list.css +468 -468
- package/components/DatePicker/date-picker.css +35 -35
- package/components/DescriptionList/description-list-order.css +90 -90
- package/components/DescriptionList/description-list.css +193 -193
- package/components/Divider/divider.css +143 -143
- package/components/DragDrop/drag-drop.css +46 -46
- package/components/Drawer/drawer.css +474 -474
- package/components/Dropdown/dropdown.css +457 -457
- package/components/DualListSelector/dual-list-selector.css +199 -199
- package/components/EmptyState/empty-state.css +104 -104
- package/components/ExpandableSection/expandable-section.css +113 -113
- package/components/FileUpload/file-upload.css +32 -32
- package/components/Form/form.css +281 -281
- package/components/FormControl/form-control.css +197 -197
- package/components/HelperText/helper-text.css +51 -51
- package/components/Hint/hint.css +46 -46
- package/components/Icon/icon.css +218 -218
- package/components/InlineEdit/inline-edit.css +43 -43
- package/components/InputGroup/input-group.css +52 -52
- package/components/JumpLinks/jump-links.css +183 -183
- package/components/Label/label-group.css +86 -86
- package/components/Label/label.css +438 -438
- package/components/List/list.css +53 -53
- package/components/LogViewer/log-viewer.css +138 -138
- package/components/Login/login.css +139 -139
- package/components/Masthead/masthead.css +319 -319
- package/components/Menu/menu.css +415 -415
- package/components/MenuToggle/menu-toggle.css +275 -275
- package/components/ModalBox/modal-box.css +121 -121
- package/components/MultipleFileUpload/multiple-file-upload.css +163 -163
- package/components/Nav/nav.css +225 -225
- package/components/NotificationBadge/notification-badge.css +66 -66
- package/components/NotificationDrawer/notification-drawer.css +179 -179
- package/components/NumberInput/number-input.css +20 -20
- package/components/OptionsMenu/options-menu.css +190 -190
- package/components/OverflowMenu/overflow-menu.css +19 -19
- package/components/Page/page.css +598 -598
- package/components/Pagination/pagination.css +220 -220
- package/components/Panel/panel.css +72 -72
- package/components/Popover/popover.css +148 -148
- package/components/Progress/progress.css +80 -80
- package/components/ProgressStepper/progress-stepper.css +514 -514
- package/components/Radio/radio.css +44 -44
- package/components/Select/select.css +423 -423
- package/components/Sidebar/sidebar.css +166 -166
- package/components/SimpleList/simple-list.css +53 -53
- package/components/Skeleton/skeleton.css +112 -112
- package/components/SkipToContent/skip-to-content.css +8 -8
- package/components/Slider/slider.css +144 -144
- package/components/Spinner/spinner.css +36 -36
- package/components/Switch/switch.css +89 -89
- package/components/TabContent/tab-content.css +34 -34
- package/components/Table/table-grid.css +911 -911
- package/components/Table/table-scrollable.css +38 -38
- package/components/Table/table-tree-view.css +497 -497
- package/components/Table/table.css +660 -660
- package/components/Tabs/tabs.css +616 -616
- package/components/TextInputGroup/text-input-group.css +88 -88
- package/components/Tile/tile.css +68 -68
- package/components/Timestamp/timestamp.css +29 -29
- package/components/Title/title.css +87 -87
- package/components/ToggleGroup/toggle-group.css +86 -86
- package/components/Toolbar/toolbar.css +2279 -2279
- package/components/Tooltip/tooltip.css +85 -85
- package/components/TreeView/tree-view.css +363 -363
- package/components/Truncate/truncate.css +15 -15
- package/components/Wizard/wizard.css +272 -272
- package/docs/components/AboutModalBox/examples/AboutModalBox.md +11 -11
- package/docs/components/Accordion/examples/Accordion.md +188 -188
- package/docs/components/ActionList/examples/ActionList.md +55 -55
- package/docs/components/Alert/examples/Alert.md +222 -222
- package/docs/components/AppLauncher/deprecated/application-launcher.md +146 -146
- package/docs/components/Avatar/examples/Avatar.md +6 -6
- package/docs/components/BackToTop/examples/BackToTop.md +3 -3
- package/docs/components/Backdrop/examples/Backdrop.md +1 -1
- package/docs/components/BackgroundImage/examples/BackgroundImage.md +2 -2
- package/docs/components/Badge/examples/Badge.md +17 -17
- package/docs/components/Banner/examples/Banner.md +42 -42
- package/docs/components/Brand/examples/Brand.md +4 -4
- package/docs/components/Breadcrumb/examples/Breadcrumb.md +90 -90
- package/docs/components/Button/examples/Button.md +364 -364
- package/docs/components/CalendarMonth/examples/CalendarMonth.md +436 -436
- package/docs/components/Card/examples/Card.md +515 -515
- package/docs/components/Check/examples/Check.md +37 -37
- package/docs/components/Chip/examples/Chip.md +216 -216
- package/docs/components/ClipboardCopy/examples/ClipboardCopy.md +82 -82
- package/docs/components/CodeBlock/examples/CodeBlock.md +39 -39
- package/docs/components/CodeEditor/examples/CodeEditor.md +85 -85
- package/docs/components/Content/examples/Content.md +1 -1
- package/docs/components/ContextSelector/deprecated/context-selector.md +160 -160
- package/docs/components/DataList/examples/DataList.md +666 -666
- package/docs/components/DatePicker/examples/DatePicker.md +54 -54
- package/docs/components/DescriptionList/examples/DescriptionList.md +737 -737
- package/docs/components/Divider/examples/Divider.md +18 -18
- package/docs/components/DragDrop/examples/DragDrop.md +27 -27
- package/docs/components/Drawer/examples/Drawer.md +225 -225
- package/docs/components/Dropdown/deprecated/Dropdown.md +541 -541
- package/docs/components/DualListSelector/examples/DualListSelector.md +1012 -1012
- package/docs/components/EmptyState/examples/EmptyState.md +100 -100
- package/docs/components/ExpandableSection/examples/ExpandableSection.md +47 -47
- package/docs/components/FileUpload/examples/FileUpload.md +94 -94
- package/docs/components/Form/examples/Form.md +226 -226
- package/docs/components/FormControl/examples/FormControl.md +65 -65
- package/docs/components/HelperText/examples/HelperText.md +72 -72
- package/docs/components/Hint/examples/Hint.md +44 -44
- package/docs/components/Icon/examples/Icon.md +85 -85
- package/docs/components/InlineEdit/examples/InlineEdit.md +209 -209
- package/docs/components/InputGroup/examples/InputGroup.md +73 -73
- package/docs/components/JumpLinks/examples/JumpLinks.md +285 -285
- package/docs/components/Label/examples/Label.md +1717 -1717
- package/docs/components/List/examples/List.md +30 -30
- package/docs/components/LogViewer/examples/LogViewer.md +1785 -1785
- package/docs/components/Login/examples/Login.md +287 -287
- package/docs/components/Masthead/examples/masthead.md +39 -39
- package/docs/components/Menu/examples/Menu.md +2377 -2377
- package/docs/components/MenuToggle/examples/MenuToggle.md +242 -242
- package/docs/components/ModalBox/examples/ModalBox.md +119 -119
- package/docs/components/MultipleFileUpload/examples/MultipleFileUpload.md +192 -192
- package/docs/components/Nav/examples/Navigation.md +856 -856
- package/docs/components/NotificationBadge/examples/NotificationBadge.md +42 -42
- package/docs/components/NotificationDrawer/examples/NotificationDrawer.md +659 -659
- package/docs/components/NumberInput/examples/NumberInput.md +127 -127
- package/docs/components/OptionsMenu/deprecated/options-menu.md +178 -178
- package/docs/components/OverflowMenu/examples/overflow-menu.md +97 -97
- package/docs/components/Page/deprecated/PageHeader.md +85 -85
- package/docs/components/Page/examples/Page.md +90 -90
- package/docs/components/Pagination/examples/Pagination.md +285 -285
- package/docs/components/Panel/examples/Panel.md +38 -38
- package/docs/components/Popover/examples/Popover.md +169 -169
- package/docs/components/Progress/examples/Progress.md +145 -145
- package/docs/components/ProgressStepper/examples/ProgressStepper.md +295 -295
- package/docs/components/Radio/examples/Radio.md +33 -33
- package/docs/components/Select/deprecated/Select.md +736 -736
- package/docs/components/Sidebar/examples/Sidebar.md +65 -65
- package/docs/components/SimpleList/examples/SimpleList.md +39 -39
- package/docs/components/Skeleton/examples/Skeleton.md +29 -29
- package/docs/components/SkipToContent/examples/SkipToContent.md +3 -3
- package/docs/components/Slider/examples/Slider.md +213 -213
- package/docs/components/Spinner/examples/Spinner.md +14 -14
- package/docs/components/Switch/examples/Switch.md +58 -58
- package/docs/components/TabContent/examples/TabContent.md +24 -24
- package/docs/components/Table/examples/Table.md +6982 -6982
- package/docs/components/Tabs/examples/Tabs.md +2114 -2114
- package/docs/components/TextInputGroup/examples/TextInputGroup.md +373 -373
- package/docs/components/Tile/examples/Tile.md +131 -131
- package/docs/components/Timestamp/examples/Timestamp.md +10 -10
- package/docs/components/Title/examples/Title.md +12 -12
- package/docs/components/ToggleGroup/examples/toggle-group.md +116 -116
- package/docs/components/Toolbar/examples/Toolbar.md +611 -611
- package/docs/components/Tooltip/examples/Tooltip.md +27 -27
- package/docs/components/TreeView/examples/TreeView.md +1166 -1166
- package/docs/components/Truncate/examples/Truncate.md +7 -7
- package/docs/components/Wizard/examples/Wizard.md +522 -522
- package/docs/demos/AboutModal/examples/AboutModal.md +106 -106
- package/docs/demos/Alert/examples/Alert.md +391 -391
- package/docs/demos/BackToTop/examples/BackToTop.md +175 -175
- package/docs/demos/Banner/examples/Banner.md +364 -364
- package/docs/demos/Button/examples/Button.md +50 -50
- package/docs/demos/Card/examples/Card.md +1054 -1054
- package/docs/demos/CardView/examples/CardView.md +378 -378
- package/docs/demos/ContextSelector/examples/ContextSelector.md +449 -449
- package/docs/demos/Dashboard/examples/Dashboard.md +541 -541
- package/docs/demos/DataList/examples/DataList.md +1148 -1148
- package/docs/demos/DescriptionList/examples/DescriptionList.md +544 -544
- package/docs/demos/Drawer/examples/Drawer.md +531 -531
- package/docs/demos/Form/examples/BasicForms.md +444 -444
- package/docs/demos/HelperText/examples/HelperText.md +51 -51
- package/docs/demos/JumpLinks/examples/JumpLinks.md +596 -596
- package/docs/demos/Masthead/examples/Masthead.md +763 -763
- package/docs/demos/Modal/examples/Modal.md +645 -645
- package/docs/demos/Nav/examples/Nav.md +649 -649
- package/docs/demos/NotificationDrawer/examples/NotificationDrawer.md +1570 -1570
- package/docs/demos/Page/examples/Page.md +1330 -1330
- package/docs/demos/Page/examples/Penta.md +217 -217
- package/docs/demos/PasswordGenerator/examples/PasswordGenerator.md +23 -23
- package/docs/demos/PasswordStrength/examples/PasswordStrength.md +108 -108
- package/docs/demos/PrimaryDetail/examples/PrimaryDetail.md +1890 -1890
- package/docs/demos/Skeleton/examples/Skeleton.md +176 -176
- package/docs/demos/Table/examples/Table.md +4580 -4580
- package/docs/demos/Tabs/examples/Tabs.md +1040 -1040
- package/docs/demos/Toolbar/examples/Toolbar.md +961 -961
- package/docs/demos/Wizard/examples/Wizard.md +1574 -1574
- package/docs/layouts/Bullseye/examples/Bullseye.md +2 -2
- package/docs/layouts/Flex/examples/Flex.md +290 -290
- package/docs/layouts/Gallery/examples/Gallery.md +48 -48
- package/docs/layouts/Grid/examples/Grid.md +121 -121
- package/docs/layouts/Level/examples/Level.md +11 -11
- package/docs/layouts/Split/examples/Split.md +23 -23
- package/docs/layouts/Stack/examples/Stack.md +8 -8
- package/docs/utilities/Accessibility/examples/Accessibility.md +3 -3
- package/docs/utilities/Alignment/examples/Alignment.md +4 -4
- package/docs/utilities/Display/examples/Display.md +16 -16
- package/docs/utilities/Flex/examples/Flex.md +53 -53
- package/docs/utilities/Float/examples/Float.md +2 -2
- package/docs/utilities/Spacing/examples/Spacing.md +16 -16
- package/layouts/Bullseye/bullseye.css +3 -3
- package/layouts/Flex/flex.css +1276 -1276
- package/layouts/Gallery/gallery.css +34 -34
- package/layouts/Grid/grid.css +531 -531
- package/layouts/Level/level.css +4 -4
- package/layouts/Split/split.css +6 -6
- package/layouts/Stack/stack.css +5 -5
- package/package.json +5 -5
- package/patternfly-addons.css +2989 -2989
- package/patternfly-base-no-globals-theme-dark-unversioned.css +269 -278
- package/patternfly-base-no-globals.css +284 -293
- package/patternfly-base-theme-dark-unversioned.css +271 -280
- package/patternfly-base.css +286 -295
- package/patternfly-charts-theme-dark-unversioned.css +66 -66
- package/patternfly-charts-theme-dark.css +66 -66
- package/patternfly-charts.css +320 -320
- package/patternfly-no-globals.css +20217 -20226
- package/patternfly-theme-dark-unversioned.css +20209 -20218
- package/patternfly.css +20219 -20228
- package/patternfly.min.css +1 -1
- package/patternfly.min.css.map +1 -1
- package/sass-utilities/_init.scss +1 -1
- package/utilities/Accessibility/accessibility.css +18 -18
- package/utilities/Alignment/alignment.css +24 -24
- package/utilities/BackgroundColor/BackgroundColor.css +252 -252
- package/utilities/BoxShadow/box-shadow.css +42 -42
- package/utilities/Display/display.css +54 -54
- package/utilities/Flex/flex.css +228 -228
- package/utilities/Float/float.css +12 -12
- package/utilities/Sizing/sizing.css +216 -216
- package/utilities/Spacing/spacing.css +1512 -1512
- package/utilities/Text/text.css +631 -631
|
@@ -8,7 +8,7 @@ cssPrefix: pf-v5-c-avatar
|
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
10
|
<img
|
|
11
|
-
class="pf-
|
|
11
|
+
class="pf-v6-c-avatar"
|
|
12
12
|
alt="Avatar image"
|
|
13
13
|
src="/assets/images/img_avatar-light.svg"
|
|
14
14
|
/>
|
|
@@ -19,7 +19,7 @@ cssPrefix: pf-v5-c-avatar
|
|
|
19
19
|
|
|
20
20
|
```html
|
|
21
21
|
<img
|
|
22
|
-
class="pf-
|
|
22
|
+
class="pf-v6-c-avatar pf-m-bordered"
|
|
23
23
|
alt="Avatar image bordered"
|
|
24
24
|
src="/assets/images/img_avatar-light.svg"
|
|
25
25
|
/>
|
|
@@ -30,7 +30,7 @@ cssPrefix: pf-v5-c-avatar
|
|
|
30
30
|
|
|
31
31
|
```html
|
|
32
32
|
<img
|
|
33
|
-
class="pf-
|
|
33
|
+
class="pf-v6-c-avatar pf-m-sm"
|
|
34
34
|
alt="Avatar image small"
|
|
35
35
|
src="/assets/images/img_avatar-light.svg"
|
|
36
36
|
/>
|
|
@@ -41,7 +41,7 @@ cssPrefix: pf-v5-c-avatar
|
|
|
41
41
|
|
|
42
42
|
```html
|
|
43
43
|
<img
|
|
44
|
-
class="pf-
|
|
44
|
+
class="pf-v6-c-avatar pf-m-md"
|
|
45
45
|
alt="Avatar image medium"
|
|
46
46
|
src="/assets/images/img_avatar-light.svg"
|
|
47
47
|
/>
|
|
@@ -52,7 +52,7 @@ cssPrefix: pf-v5-c-avatar
|
|
|
52
52
|
|
|
53
53
|
```html
|
|
54
54
|
<img
|
|
55
|
-
class="pf-
|
|
55
|
+
class="pf-v6-c-avatar pf-m-lg"
|
|
56
56
|
alt="Avatar image large"
|
|
57
57
|
src="/assets/images/img_avatar-light.svg"
|
|
58
58
|
/>
|
|
@@ -63,7 +63,7 @@ cssPrefix: pf-v5-c-avatar
|
|
|
63
63
|
|
|
64
64
|
```html
|
|
65
65
|
<img
|
|
66
|
-
class="pf-
|
|
66
|
+
class="pf-v6-c-avatar pf-m-xl"
|
|
67
67
|
alt="Avatar image extra large"
|
|
68
68
|
src="/assets/images/img_avatar-light.svg"
|
|
69
69
|
/>
|
|
@@ -9,10 +9,10 @@ cssPrefix: pf-v5-c-back-to-top
|
|
|
9
9
|
### Basic
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<div class="pf-
|
|
13
|
-
<a class="pf-
|
|
12
|
+
<div class="pf-v6-c-back-to-top">
|
|
13
|
+
<a class="pf-v6-c-button pf-m-primary" href="#">
|
|
14
14
|
Back to top
|
|
15
|
-
<span class="pf-
|
|
15
|
+
<span class="pf-v6-c-button__icon pf-m-end">
|
|
16
16
|
<i class="fas fa-angle-up" aria-hidden="true"></i>
|
|
17
17
|
</span>
|
|
18
18
|
</a>
|
|
@@ -8,8 +8,8 @@ cssPrefix: pf-v5-c-background-image
|
|
|
8
8
|
|
|
9
9
|
```html isFullscreen
|
|
10
10
|
<div
|
|
11
|
-
class="pf-
|
|
12
|
-
style="--pf-
|
|
11
|
+
class="pf-v6-c-background-image"
|
|
12
|
+
style="--pf-v6-c-background-image--BackgroundImage: url(/assets/images/pf-background.svg)"
|
|
13
13
|
></div>
|
|
14
14
|
|
|
15
15
|
```
|
|
@@ -7,31 +7,31 @@ cssPrefix: pf-v5-c-badge
|
|
|
7
7
|
### Read
|
|
8
8
|
|
|
9
9
|
```html
|
|
10
|
-
<span class="pf-
|
|
11
|
-
<span class="pf-
|
|
12
|
-
<span class="pf-
|
|
13
|
-
<span class="pf-
|
|
10
|
+
<span class="pf-v6-c-badge pf-m-read">7</span>
|
|
11
|
+
<span class="pf-v6-c-badge pf-m-read">24</span>
|
|
12
|
+
<span class="pf-v6-c-badge pf-m-read">240</span>
|
|
13
|
+
<span class="pf-v6-c-badge pf-m-read">999+</span>
|
|
14
14
|
|
|
15
15
|
```
|
|
16
16
|
|
|
17
17
|
### Unread
|
|
18
18
|
|
|
19
19
|
```html
|
|
20
|
-
<span class="pf-
|
|
20
|
+
<span class="pf-v6-c-badge pf-m-unread">
|
|
21
21
|
7
|
|
22
|
-
<span class="pf-
|
|
22
|
+
<span class="pf-v6-screen-reader">unread messages</span>
|
|
23
23
|
</span>
|
|
24
|
-
<span class="pf-
|
|
24
|
+
<span class="pf-v6-c-badge pf-m-unread">
|
|
25
25
|
24
|
|
26
|
-
<span class="pf-
|
|
26
|
+
<span class="pf-v6-screen-reader">unread messages</span>
|
|
27
27
|
</span>
|
|
28
|
-
<span class="pf-
|
|
28
|
+
<span class="pf-v6-c-badge pf-m-unread">
|
|
29
29
|
240
|
|
30
|
-
<span class="pf-
|
|
30
|
+
<span class="pf-v6-screen-reader">unread messages</span>
|
|
31
31
|
</span>
|
|
32
|
-
<span class="pf-
|
|
32
|
+
<span class="pf-v6-c-badge pf-m-unread">
|
|
33
33
|
999+
|
|
34
|
-
<span class="pf-
|
|
34
|
+
<span class="pf-v6-screen-reader">unread messages</span>
|
|
35
35
|
</span>
|
|
36
36
|
|
|
37
37
|
```
|
|
@@ -39,17 +39,17 @@ cssPrefix: pf-v5-c-badge
|
|
|
39
39
|
### Badge as toggle
|
|
40
40
|
|
|
41
41
|
```html
|
|
42
|
-
<span class="pf-
|
|
42
|
+
<span class="pf-v6-c-badge pf-m-read">
|
|
43
43
|
7
|
|
44
|
-
<span class="pf-
|
|
44
|
+
<span class="pf-v6-c-badge__toggle-icon">
|
|
45
45
|
<i class="fas fa-caret-down"></i>
|
|
46
46
|
</span>
|
|
47
47
|
</span>
|
|
48
|
-
<span class="pf-
|
|
48
|
+
<span class="pf-v6-c-badge pf-m-unread">
|
|
49
49
|
7
|
|
50
|
-
<span class="pf-
|
|
50
|
+
<span class="pf-v6-screen-reader">unread messages</span>
|
|
51
51
|
|
|
52
|
-
<span class="pf-
|
|
52
|
+
<span class="pf-v6-c-badge__toggle-icon">
|
|
53
53
|
<i class="fas fa-caret-down"></i>
|
|
54
54
|
</span>
|
|
55
55
|
</span>
|
|
@@ -9,53 +9,53 @@ cssPrefix: pf-v5-c-banner
|
|
|
9
9
|
Banners can be styled with one of 9 different nonstatus colors. A nonstatus banner should only be used when the banner color does not represent status or severity.
|
|
10
10
|
|
|
11
11
|
```html
|
|
12
|
-
<div class="pf-
|
|
12
|
+
<div class="pf-v6-c-banner">Default banner</div>
|
|
13
13
|
|
|
14
14
|
<br />
|
|
15
15
|
|
|
16
|
-
<div class="pf-
|
|
16
|
+
<div class="pf-v6-c-banner pf-m-red">Red banner</div>
|
|
17
17
|
|
|
18
18
|
<br />
|
|
19
19
|
|
|
20
|
-
<div class="pf-
|
|
20
|
+
<div class="pf-v6-c-banner pf-m-orangered">Orangered banner</div>
|
|
21
21
|
|
|
22
22
|
<br />
|
|
23
23
|
|
|
24
|
-
<div class="pf-
|
|
24
|
+
<div class="pf-v6-c-banner pf-m-orange">Orange banner</div>
|
|
25
25
|
|
|
26
26
|
<br />
|
|
27
27
|
|
|
28
|
-
<div class="pf-
|
|
28
|
+
<div class="pf-v6-c-banner pf-m-gold">Gold banner</div>
|
|
29
29
|
|
|
30
30
|
<br />
|
|
31
31
|
|
|
32
|
-
<div class="pf-
|
|
32
|
+
<div class="pf-v6-c-banner pf-m-green">Green banner</div>
|
|
33
33
|
|
|
34
34
|
<br />
|
|
35
35
|
|
|
36
|
-
<div class="pf-
|
|
36
|
+
<div class="pf-v6-c-banner pf-m-cyan">Cyan banner</div>
|
|
37
37
|
|
|
38
38
|
<br />
|
|
39
39
|
|
|
40
|
-
<div class="pf-
|
|
40
|
+
<div class="pf-v6-c-banner pf-m-blue">Blue banner</div>
|
|
41
41
|
|
|
42
42
|
<br />
|
|
43
43
|
|
|
44
|
-
<div class="pf-
|
|
44
|
+
<div class="pf-v6-c-banner pf-m-purple">Purple banner</div>
|
|
45
45
|
|
|
46
46
|
```
|
|
47
47
|
|
|
48
48
|
### Banner with links
|
|
49
49
|
|
|
50
50
|
```html
|
|
51
|
-
<div class="pf-
|
|
51
|
+
<div class="pf-v6-c-banner">
|
|
52
52
|
Default banner with a
|
|
53
53
|
<a
|
|
54
54
|
href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
|
|
55
55
|
>link</a>
|
|
56
56
|
</div>
|
|
57
57
|
<br />
|
|
58
|
-
<div class="pf-
|
|
58
|
+
<div class="pf-v6-c-banner">
|
|
59
59
|
Default banner with a
|
|
60
60
|
<a
|
|
61
61
|
class="pf-m-disabled"
|
|
@@ -64,26 +64,26 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
|
|
|
64
64
|
>disabled link</a>
|
|
65
65
|
</div>
|
|
66
66
|
<br />
|
|
67
|
-
<div class="pf-
|
|
67
|
+
<div class="pf-v6-c-banner pf-m-blue">
|
|
68
68
|
Blue banner with an
|
|
69
69
|
<button
|
|
70
|
-
class="pf-
|
|
70
|
+
class="pf-v6-c-button pf-m-inline pf-m-link"
|
|
71
71
|
type="button"
|
|
72
72
|
>inline link button</button>
|
|
73
73
|
</div>
|
|
74
74
|
<br />
|
|
75
|
-
<div class="pf-
|
|
75
|
+
<div class="pf-v6-c-banner pf-m-gold">
|
|
76
76
|
Gold banner with an
|
|
77
77
|
<a
|
|
78
|
-
class="pf-
|
|
78
|
+
class="pf-v6-c-button pf-m-inline pf-m-link"
|
|
79
79
|
href="https://www.w3.org/TR/WCAG20-TECHS/ARIA8.html#ARIA8-examples"
|
|
80
80
|
>inline link button (anchor)</a>
|
|
81
81
|
</div>
|
|
82
82
|
<br />
|
|
83
|
-
<div class="pf-
|
|
83
|
+
<div class="pf-v6-c-banner pf-m-red">
|
|
84
84
|
Red banner with a
|
|
85
85
|
<button
|
|
86
|
-
class="pf-
|
|
86
|
+
class="pf-v6-c-button pf-m-link pf-m-inline"
|
|
87
87
|
type="button"
|
|
88
88
|
disabled
|
|
89
89
|
>disabled inline link button</button>
|
|
@@ -96,66 +96,66 @@ Banners can be styled with one of 9 different nonstatus colors. A nonstatus bann
|
|
|
96
96
|
When a banner is used to convey status, it is advised to add an icon that also conveys status visually, and to provide screen reader text using `.pf-v5-screen-reader` or an equivalent.
|
|
97
97
|
|
|
98
98
|
```html
|
|
99
|
-
<div class="pf-
|
|
100
|
-
<div class="pf-
|
|
101
|
-
<div class="pf-
|
|
102
|
-
<span class="pf-
|
|
99
|
+
<div class="pf-v6-c-banner pf-m-success">
|
|
100
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
101
|
+
<div class="pf-v6-l-flex__item">
|
|
102
|
+
<span class="pf-v6-screen-reader">Success banner:</span>
|
|
103
103
|
|
|
104
104
|
<i class="fas fa-check-circle" aria-hidden="true"></i>
|
|
105
105
|
</div>
|
|
106
|
-
<div class="pf-
|
|
106
|
+
<div class="pf-v6-l-flex__item">Success banner</div>
|
|
107
107
|
</div>
|
|
108
108
|
</div>
|
|
109
109
|
|
|
110
110
|
<br />
|
|
111
111
|
|
|
112
|
-
<div class="pf-
|
|
113
|
-
<div class="pf-
|
|
114
|
-
<div class="pf-
|
|
115
|
-
<span class="pf-
|
|
112
|
+
<div class="pf-v6-c-banner pf-m-warning">
|
|
113
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
114
|
+
<div class="pf-v6-l-flex__item">
|
|
115
|
+
<span class="pf-v6-screen-reader">Warning banner:</span>
|
|
116
116
|
|
|
117
117
|
<i class="fas fa-exclamation-triangle" aria-hidden="true"></i>
|
|
118
118
|
</div>
|
|
119
|
-
<div class="pf-
|
|
119
|
+
<div class="pf-v6-l-flex__item">Warning banner</div>
|
|
120
120
|
</div>
|
|
121
121
|
</div>
|
|
122
122
|
|
|
123
123
|
<br />
|
|
124
124
|
|
|
125
|
-
<div class="pf-
|
|
126
|
-
<div class="pf-
|
|
127
|
-
<div class="pf-
|
|
128
|
-
<span class="pf-
|
|
125
|
+
<div class="pf-v6-c-banner pf-m-danger">
|
|
126
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
127
|
+
<div class="pf-v6-l-flex__item">
|
|
128
|
+
<span class="pf-v6-screen-reader">Danger banner:</span>
|
|
129
129
|
|
|
130
130
|
<i class="fas fa-exclamation-circle" aria-hidden="true"></i>
|
|
131
131
|
</div>
|
|
132
|
-
<div class="pf-
|
|
132
|
+
<div class="pf-v6-l-flex__item">Danger banner</div>
|
|
133
133
|
</div>
|
|
134
134
|
</div>
|
|
135
135
|
|
|
136
136
|
<br />
|
|
137
137
|
|
|
138
|
-
<div class="pf-
|
|
139
|
-
<div class="pf-
|
|
140
|
-
<div class="pf-
|
|
141
|
-
<span class="pf-
|
|
138
|
+
<div class="pf-v6-c-banner pf-m-info">
|
|
139
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
140
|
+
<div class="pf-v6-l-flex__item">
|
|
141
|
+
<span class="pf-v6-screen-reader">Custom status banner:</span>
|
|
142
142
|
|
|
143
143
|
<i class="fas fa-info-circle" aria-hidden="true"></i>
|
|
144
144
|
</div>
|
|
145
|
-
<div class="pf-
|
|
145
|
+
<div class="pf-v6-l-flex__item">Info banner</div>
|
|
146
146
|
</div>
|
|
147
147
|
</div>
|
|
148
148
|
|
|
149
149
|
<br />
|
|
150
150
|
|
|
151
|
-
<div class="pf-
|
|
152
|
-
<div class="pf-
|
|
153
|
-
<div class="pf-
|
|
154
|
-
<span class="pf-
|
|
151
|
+
<div class="pf-v6-c-banner pf-m-custom">
|
|
152
|
+
<div class="pf-v6-l-flex pf-m-space-items-sm">
|
|
153
|
+
<div class="pf-v6-l-flex__item">
|
|
154
|
+
<span class="pf-v6-screen-reader">Custom status banner:</span>
|
|
155
155
|
|
|
156
156
|
<i class="fas fa-bell" aria-hidden="true"></i>
|
|
157
157
|
</div>
|
|
158
|
-
<div class="pf-
|
|
158
|
+
<div class="pf-v6-l-flex__item">Custom banner</div>
|
|
159
159
|
</div>
|
|
160
160
|
</div>
|
|
161
161
|
|
|
@@ -10,7 +10,7 @@ section: components
|
|
|
10
10
|
```html
|
|
11
11
|
<div class="show-light">
|
|
12
12
|
<img
|
|
13
|
-
class="pf-
|
|
13
|
+
class="pf-v6-c-brand"
|
|
14
14
|
src="/assets/images/PF-HorizontalLogo-Color.svg"
|
|
15
15
|
alt="PatternFly logo"
|
|
16
16
|
/>
|
|
@@ -18,7 +18,7 @@ section: components
|
|
|
18
18
|
|
|
19
19
|
<div class="show-dark">
|
|
20
20
|
<img
|
|
21
|
-
class="pf-
|
|
21
|
+
class="pf-v6-c-brand"
|
|
22
22
|
src="/assets/images/PF-HorizontalLogo-Reverse.svg"
|
|
23
23
|
alt="PatternFly logo"
|
|
24
24
|
/>
|
|
@@ -31,7 +31,7 @@ section: components
|
|
|
31
31
|
```html
|
|
32
32
|
<div class="show-light">
|
|
33
33
|
<picture
|
|
34
|
-
class="pf-
|
|
34
|
+
class="pf-v6-c-brand pf-m-picture"
|
|
35
35
|
style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
|
|
36
36
|
>
|
|
37
37
|
<source
|
|
@@ -48,7 +48,7 @@ section: components
|
|
|
48
48
|
|
|
49
49
|
<div class="show-dark">
|
|
50
50
|
<picture
|
|
51
|
-
class="pf-
|
|
51
|
+
class="pf-v6-c-brand pf-m-picture"
|
|
52
52
|
style="--pf-v5-c-brand--Width: 40px; --pf-v5-c-brand--Width-on-md: 220px;"
|
|
53
53
|
>
|
|
54
54
|
<source
|