@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
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/.astro/content-modules.mjs +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -42,99 +42,99 @@
|
|
|
42
42
|
animation-fill-mode: both;
|
|
43
43
|
animation-name: astroFadeIn; }</style><style>[data-astro-transition-scope="astro-2e6ke2uy-4"] { view-transition-name: astro-2e6ke2uy-4; }@layer astro { ::view-transition-old(astro-2e6ke2uy-4) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-2e6ke2uy-4) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-2e6ke2uy-4) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
44
44
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-2e6ke2uy-4"],
|
|
45
|
-
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="1pqNsA" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-457"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="ZXBeOf" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-153"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-458"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-459"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-153"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2584" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
45
|
+
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-2e6ke2uy-4"] { animation: none; mix-blend-mode: normal; }</style></head> <body> <div class="pf-v6-c-page"> <script>(()=>{var l=(n,t)=>{let i=async()=>{await(await n())()},e=typeof t.value=="object"?t.value:void 0,s={timeout:e==null?void 0:e.timeout};"requestIdleCallback"in window?window.requestIdleCallback(i,s):setTimeout(i,s.timeout||200)};(self.Astro||(self.Astro={})).idle=l;window.dispatchEvent(new Event("astro:idle"));})();</script><header class="pf-v6-c-masthead pf-m-display-inline-on-md"> <div class="pf-v6-c-masthead__main"> <span class="pf-v6-c-masthead__toggle"> <astro-island uid="Z26rir8" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-403"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 448 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M16 132h416c8.837 0 16-7.163 16-16V76c0-8.837-7.163-16-16-16H16C7.163 60 0 67.163 0 76v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16zm0 160h416c8.837 0 16-7.163 16-16v-40c0-8.837-7.163-16-16-16H16c-8.837 0-16 7.163-16 16v40c0 8.837 7.163 16 16 16z"></path></svg></span></button><!--astro:end--></astro-island> </span> <div class="pf-v6-c-masthead__brand"> <a class="pf-v6-c-masthead__logo" tabindex="0" href="/"> <img class="pf-v6-c-brand" style="--pf-v6-c-brand--Height:36px" src="/PF-HorizontalLogo-Color.svg" alt="PatternFly"/> </a> </div> </div> <div class="pf-v6-c-masthead__content"> <astro-island uid="Zixz9Y" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-135"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-action-group-plain pf-m-align-end pf-m-gap-none pf-m-gap-md-on-md"><div class="pf-v6-c-toolbar__item"></div><div class="pf-v6-c-toolbar__item"><div class="pf-v6-c-input-group ws-global-search"><div class="pf-v6-c-input-group__item"><button aria-expanded="false" aria-label="Expandable search input toggle" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-404"><span class="pf-v6-c-button__icon"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"></path></svg></span></button></div></div></div><div class="pf-v6-c-toolbar__item"><a href="//github.com/patternfly" target="top" aria-label="PatternFly GitHub page" class="pf-v6-c-button pf-m-plain" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-405"><span class="pf-v6-c-button__text"><svg class="pf-v6-svg" viewBox="0 0 496 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"></path></svg></span></a></div><div class="pf-v6-c-toolbar__item"><button class="pf-v6-c-menu-toggle" type="button" aria-expanded="false" data-ouia-component-type="PF6/MenuToggle" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-MenuToggle-135"><span class="pf-v6-c-menu-toggle__text">Release 6.1.0</span><span class="pf-v6-c-menu-toggle__controls"><span class="pf-v6-c-menu-toggle__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"></path></svg></span></span></button></div></div></div></div><div class="pf-v6-c-toolbar__content pf-m-hidden" hidden=""><div class="pf-v6-c-toolbar__group"></div></div></div><!--astro:end--></astro-island> </div> </header> <astro-island uid="2tEdvJ" component-url="/_astro/Navigation.B03CQhTw.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{"navData":[1,[[1,[[0,{"id":[0,"src/components/aboutmodal/examples/aboutmodal"],"data":[0,{"id":[0,"About modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/accordion/examples/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/actionlist/examples/actionlist"],"data":[0,{"id":[0,"Action list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/alert/examples/alert"],"data":[0,{"id":[0,"Alert"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/avatar/examples/avatar"],"data":[0,{"id":[0,"Avatar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backtotop/examples/backtotop"],"data":[0,{"id":[0,"Back to top"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backdrop/examples/backdrop"],"data":[0,{"id":[0,"Backdrop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/backgroundimage/examples/backgroundimage"],"data":[0,{"id":[0,"Background image"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/badge/examples/badge"],"data":[0,{"id":[0,"Badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/banner/examples/banner"],"data":[0,{"id":[0,"Banner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/brand/examples/brand"],"data":[0,{"id":[0,"Brand"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/breadcrumb/examples/breadcrumb"],"data":[0,{"id":[0,"Breadcrumb"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/button/examples/button"],"data":[0,{"id":[0,"Button"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/calendarmonth/examples/calendarmonth"],"data":[0,{"id":[0,"Calendar month"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/card/examples/card"],"data":[0,{"id":[0,"Card"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/checkbox/examples/checkbox"],"data":[0,{"id":[0,"Checkbox"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/chip/examples/chip"],"data":[0,{"id":[0,"Chip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/clipboardcopy/examples/clipboardcopy"],"data":[0,{"id":[0,"Clipboard copy"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/codeblock/examples/codeblock"],"data":[0,{"id":[0,"Code block"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/codeeditor/examples/codeeditor"],"data":[0,{"id":[0,"Code editor"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/content/examples/content"],"data":[0,{"id":[0,"Content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datalist/examples/datalist"],"data":[0,{"id":[0,"Data list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/datepicker/examples/datepicker"],"data":[0,{"id":[0,"Date picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/descriptionlist/examples/descriptionlist"],"data":[0,{"id":[0,"Description list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/divider/examples/divider"],"data":[0,{"id":[0,"Divider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/dragdrop/examples/dragdrop"],"data":[0,{"id":[0,"Drag and drop"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/drawer/examples/drawer"],"data":[0,{"id":[0,"Drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/dropdown/examples/dropdown"],"data":[0,{"id":[0,"Dropdown"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/duallistselector/examples/duallistselector"],"data":[0,{"id":[0,"Dual list selector"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/emptystate/examples/emptystate"],"data":[0,{"id":[0,"Empty state"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/expandablesection/examples/expandablesection"],"data":[0,{"id":[0,"Expandable section"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/form/examples/form"],"data":[0,{"id":[0,"Form"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/formcontrol/examples/formcontrol"],"data":[0,{"id":[0,"Form control"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/formselect/examples/formselect"],"data":[0,{"id":[0,"Form select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/helpertext/examples/helpertext"],"data":[0,{"id":[0,"Helper text"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/hint/examples/hint"],"data":[0,{"id":[0,"Hint"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/icon/examples/icon"],"data":[0,{"id":[0,"Icon"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/components/inlineedit/examples/inlineedit"],"data":[0,{"id":[0,"Inline edit"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/inputgroup/examples/inputgroup"],"data":[0,{"id":[0,"Input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/jumplinks/examples/jumplinks"],"data":[0,{"id":[0,"Jump links"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/label/examples/label"],"data":[0,{"id":[0,"Label"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/list/examples/list"],"data":[0,{"id":[0,"List"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/loginpage/examples/loginpage"],"data":[0,{"id":[0,"Login page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/masthead/examples/masthead"],"data":[0,{"id":[0,"Masthead"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menu/examples/menu"],"data":[0,{"id":[0,"Menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/menutoggle/examples/menutoggle"],"data":[0,{"id":[0,"Menu toggle"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/modal/examples/modal"],"data":[0,{"id":[0,"Modal"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/multiplefileupload/examples/multiplefileupload"],"data":[0,{"id":[0,"Multiple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/nav/examples/nav"],"data":[0,{"id":[0,"Navigation"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationbadge/examples/notificationbadge"],"data":[0,{"id":[0,"Notification badge"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/notificationdrawer/examples/notificationdrawer"],"data":[0,{"id":[0,"Notification drawer"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/numberinput/examples/numberinput"],"data":[0,{"id":[0,"Number input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/overflowmenu/examples/overflowmenu"],"data":[0,{"id":[0,"Overflow menu"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/page/examples/page"],"data":[0,{"id":[0,"Page"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/pagination/examples/pagination"],"data":[0,{"id":[0,"Pagination"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/panel/examples/panel"],"data":[0,{"id":[0,"Panel"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordgenerator/examples/passwordgenerator"],"data":[0,{"id":[0,"Password generator"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/passwordstrength/examples/passwordstrength"],"data":[0,{"id":[0,"Password strength"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/popover/examples/popover"],"data":[0,{"id":[0,"Popover"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progress/examples/progress"],"data":[0,{"id":[0,"Progress"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/progressstepper/examples/progressstepper"],"data":[0,{"id":[0,"Progress stepper"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/radio/examples/radio"],"data":[0,{"id":[0,"Radio"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/searchinput/examples/searchinput"],"data":[0,{"id":[0,"Search input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/select/examples/select"],"data":[0,{"id":[0,"Select"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/sidebar/examples/sidebar"],"data":[0,{"id":[0,"Sidebar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/fileupload/examples/fileupload"],"data":[0,{"id":[0,"Simple file upload"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/simplelist/examples/simplelist"],"data":[0,{"id":[0,"Simple list"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skeleton/examples/skeleton"],"data":[0,{"id":[0,"Skeleton"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/skiptocontent/examples/skiptocontent"],"data":[0,{"id":[0,"Skip to content"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/slider/examples/slider"],"data":[0,{"id":[0,"Slider"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/spinner/examples/spinner"],"data":[0,{"id":[0,"Spinner"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/switch/examples/switch"],"data":[0,{"id":[0,"Switch"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/table/examples/table"],"data":[0,{"id":[0,"Table"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tabs/examples/tabs"],"data":[0,{"id":[0,"Tabs"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textarea/examples/textarea"],"data":[0,{"id":[0,"Text area"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinput/examples/textinput"],"data":[0,{"id":[0,"Text input"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/textinputgroup/examples/textinputgroup"],"data":[0,{"id":[0,"Text input group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/deprecated/components/tile/examples/tile"],"data":[0,{"id":[0,"Tile"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timepicker/examples/timepicker"],"data":[0,{"id":[0,"Time picker"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/timestamp/examples/timestamp"],"data":[0,{"id":[0,"Timestamp"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/title/examples/title"],"data":[0,{"id":[0,"Title"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/togglegroup/examples/togglegroup"],"data":[0,{"id":[0,"Toggle group"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/toolbar/examples/toolbar"],"data":[0,{"id":[0,"Toolbar"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/tooltip/examples/tooltip"],"data":[0,{"id":[0,"Tooltip"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/treeview/examples/treeview"],"data":[0,{"id":[0,"Tree view"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/truncate/examples/truncate"],"data":[0,{"id":[0,"Truncate"],"section":[0,"components"],"sortValue":[0]}]}],[0,{"id":[0,"src/components/wizard/examples/wizard"],"data":[0,{"id":[0,"Wizard"],"section":[0,"components"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"dist/patternfly-docs/quick-starts/design-guidelines/design-guidelines"],"data":[0,{"id":[0,"Quick starts"],"section":[0,"extensions"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/layouts/bullseye/examples/bullseye"],"data":[0,{"id":[0,"Bullseye"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/gallery/examples/gallery"],"data":[0,{"id":[0,"Gallery"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/grid/examples/grid"],"data":[0,{"id":[0,"Grid"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/level/examples/level"],"data":[0,{"id":[0,"Level"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/split/examples/split"],"data":[0,{"id":[0,"Split"],"section":[0,"layouts"],"sortValue":[0]}]}],[0,{"id":[0,"docs/layouts/stack/examples/stack"],"data":[0,{"id":[0,"Stack"],"section":[0,"layouts"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/demos/cardview/examples/cardview"],"data":[0,{"id":[0,"Card view"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/dashboard/examples/dashboard"],"data":[0,{"id":[0,"Dashboard"],"section":[0,"patterns"],"sortValue":[0]}]}],[0,{"id":[0,"docs/demos/primarydetail/examples/primarydetail"],"data":[0,{"id":[0,"Primary-detail"],"section":[0,"patterns"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"docs/utilities/accessibility/examples/accessibility"],"data":[0,{"id":[0,"Accessibility"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/alignment/examples/alignment"],"data":[0,{"id":[0,"Alignment"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/backgroundcolor/examples/backgroundcolor"],"data":[0,{"id":[0,"Background color"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/boxshadow/examples/box-shadow"],"data":[0,{"id":[0,"Box shadow"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/display/examples/display"],"data":[0,{"id":[0,"Display"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/flex/examples/flex"],"data":[0,{"id":[0,"Flex"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/float/examples/float"],"data":[0,{"id":[0,"Float"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/sizing/examples/sizing"],"data":[0,{"id":[0,"Sizing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/spacing/examples/spacing"],"data":[0,{"id":[0,"Spacing"],"section":[0,"utility-classes"],"sortValue":[0]}]}],[0,{"id":[0,"docs/utilities/text/examples/text"],"data":[0,{"id":[0,"Text"],"section":[0,"utility-classes"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="ws-sticky-nav-tabs" class="pf-v6-c-page__main-tabs pf-m-sticky-top"><div class="pf-v6-c-page__main-body"> <div class="pf-v6-c-tabs pf-m-page-insets pf-m-no-border-bottom"> <ul class="pf-v6-c-tabs__list"> <li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/description-list/html-demos"> HTML demos </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2242" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
46
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2243" data-pf-content="true" class="pf-v6-c-content--h3">Default</h3>
|
|
47
47
|
|
|
48
48
|
<style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><script>(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="pvsVc" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
49
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
49
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2244" data-pf-content="true" class="pf-v6-c-content--h3">Term help text</h3>
|
|
50
50
|
|
|
51
51
|
<astro-island uid="1M73M4" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span\n class=\"pf-v6-c-description-list__text pf-m-help-text\"\n role=\"button\"\n type=\"button\"\n tabindex=\"0\"\n >Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span\n class=\"pf-v6-c-description-list__text pf-m-help-text\"\n role=\"button\"\n type=\"button\"\n tabindex=\"0\"\n >Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span\n class=\"pf-v6-c-description-list__text pf-m-help-text\"\n role=\"button\"\n type=\"button\"\n tabindex=\"0\"\n >Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span\n class=\"pf-v6-c-description-list__text pf-m-help-text\"\n role=\"button\"\n type=\"button\"\n tabindex=\"0\"\n >Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span\n class=\"pf-v6-c-description-list__text pf-m-help-text\"\n role=\"button\"\n type=\"button\"\n tabindex=\"0\"\n >Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
52
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
52
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2245" data-pf-content="true" class="pf-v6-c-content--h3">Default, two column</h3>
|
|
53
53
|
|
|
54
54
|
<astro-island uid="Z4YRWz" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-2-col\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >This is a long description that should wrap to multiple lines in a multi-column layout.</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
55
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
55
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2246" data-pf-content="true" class="pf-v6-c-content--h3">Default, three column on lg breakpoint</h3>
|
|
56
56
|
|
|
57
57
|
<astro-island uid="1gb9uX" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-3-col-on-lg\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
58
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
58
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2247" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal</h3>
|
|
59
59
|
|
|
60
60
|
<astro-island uid="INr2o" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-horizontal\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
61
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
61
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2248" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal, two column</h3>
|
|
62
62
|
|
|
63
63
|
<astro-island uid="5GOqz" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-horizontal pf-m-2-col\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
64
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
64
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2249" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal, three column on lg breakpoint</h3>
|
|
65
65
|
|
|
66
66
|
<astro-island uid="Z1PUAta" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-horizontal pf-m-3-col-on-lg\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
67
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
67
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2250" data-pf-content="true" class="pf-v6-c-content--h3">Compact</h3>
|
|
68
68
|
|
|
69
69
|
<astro-island uid="Ng8cM" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-compact\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
70
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
70
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2251" data-pf-content="true" class="pf-v6-c-content--h3">Compact horizontal</h3>
|
|
71
71
|
|
|
72
72
|
<astro-island uid="Z2wXL24" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-compact pf-m-horizontal pf-m-2-col\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
73
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
73
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2252" data-pf-content="true" class="pf-v6-c-content--h3">Fluid horizontal</h3>
|
|
74
74
|
|
|
75
75
|
<astro-island uid="ZfNrqs" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-horizontal pf-m-fluid pf-m-2-col\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
76
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
76
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2253" data-pf-content="true" class="pf-v6-c-content--h3">Column fill</h3>
|
|
77
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2282" data-pf-content="true" class="pf-v6-c-content--p">Column fill will modify the default placement of description list groups to fill from top to bottom using css column-count, instead of left to right. <strong>Note:</strong> using this modifier will change the layout so that horizontally adjacent groups are no longer aligned in the same row.</p>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="WSf2C" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl\n class=\"pf-v6-c-description-list pf-m-fill-columns pf-m-2-col pf-m-3-col-on-lg\"\n>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >This is a long description that should wrap to multiple lines in a multi-column layout.</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
80
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
81
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2254" data-pf-content="true" class="pf-v6-c-content--h2">Auto fit</h2>
|
|
81
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2255" data-pf-content="true" class="pf-v6-c-content--h3">Auto-fit basic</h3>
|
|
82
82
|
|
|
83
83
|
<astro-island uid="2lSW5f" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-auto-fit\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
84
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
84
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2256" data-pf-content="true" class="pf-v6-c-content--h3">Auto-fit, min width modified, grid template columns</h3>
|
|
85
85
|
|
|
86
86
|
<astro-island uid="1phjgQ" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl\n class=\"pf-v6-c-description-list pf-m-auto-fit\"\n style=\"--pf-v6-c-description-list--GridTemplateColumns--min: 200px;\"\n>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
87
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
87
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2257" data-pf-content="true" class="pf-v6-c-content--h3">Auto-fit, min width modified, responsive grid template columns</h3>
|
|
88
88
|
|
|
89
89
|
<astro-island uid="Z13d2Ia" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl\n class=\"pf-v6-c-description-list pf-m-auto-fit\"\n style=\"--pf-v6-c-description-list--GridTemplateColumns--min-on-md: 100px; --pf-v6-c-description-list--GridTemplateColumns--min-on-lg: 150px; --pf-v6-c-description-list--GridTemplateColumns--min-on-xl: 200px; --pf-v6-c-description-list--GridTemplateColumns--min-on-2xl: 300px;\"\n>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
90
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
91
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
90
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2258" data-pf-content="true" class="pf-v6-c-content--h2">Responsive column definitions</h2>
|
|
91
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2259" data-pf-content="true" class="pf-v6-c-content--h3">Default, responsive columns</h3>
|
|
92
92
|
|
|
93
93
|
<astro-island uid="25A6IO" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-2-col-on-lg pf-m-3-col-on-xl\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
94
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
94
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2260" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal, responsive columns</h3>
|
|
95
95
|
|
|
96
96
|
<astro-island uid="Z1D6ow2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl\n class=\"pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg pf-m-3-col-on-xl\"\n>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
97
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
97
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2261" data-pf-content="true" class="pf-v6-c-content--h3">Responsive, horizontal, vertical group layout</h3>
|
|
98
98
|
|
|
99
99
|
<astro-island uid="Z1ztwXs" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl\n class=\"pf-v6-c-description-list pf-m-horizontal pf-m-vertical-on-md pf-m-horizontal-on-lg pf-m-vertical-on-xl pf-m-horizontal-on-2xl\"\n>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
100
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
101
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
100
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2262" data-pf-content="true" class="pf-v6-c-content--h2">Auto-column-width</h2>
|
|
101
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2263" data-pf-content="true" class="pf-v6-c-content--h3">Default, auto columns width</h3>
|
|
102
102
|
|
|
103
103
|
<astro-island uid="ZuPv0J" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-auto-column-widths pf-m-3-col\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
104
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
104
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2264" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal, auto column width</h3>
|
|
105
105
|
|
|
106
106
|
<astro-island uid="ZFhswj" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl\n class=\"pf-v6-c-description-list pf-m-horizontal pf-m-auto-column-widths pf-m-2-col-on-lg\"\n>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
107
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
108
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
107
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2265" data-pf-content="true" class="pf-v6-c-content--h2">Inline grid</h2>
|
|
108
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2266" data-pf-content="true" class="pf-v6-c-content--h3">Default, inline grid</h3>
|
|
109
109
|
|
|
110
110
|
<astro-island uid="Z2bVnGg" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-3-col pf-m-inline-grid\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
111
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
111
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2267" data-pf-content="true" class="pf-v6-c-content--h3">Display variant</h3>
|
|
112
112
|
|
|
113
113
|
<astro-island uid="wFtC4" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
114
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
115
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
116
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
114
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2268" data-pf-content="true" class="pf-v6-c-content--h2">Card variants</h2>
|
|
115
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2269" data-pf-content="true" class="pf-v6-c-content--p">Cards can be used as description list group wrappers. Using cards in this way applies the card body padding directly to the card and enables the use of card modifiers within description list groups.</p>
|
|
116
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2270" data-pf-content="true" class="pf-v6-c-content--h3">Description list group wrapper as card</h3>
|
|
117
117
|
|
|
118
118
|
<astro-island uid="1x44Lo" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-2-col-on-lg\">\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
119
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
119
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2271" data-pf-content="true" class="pf-v6-c-content--h3">Display lg and card variant</h3>
|
|
120
120
|
|
|
121
121
|
<astro-island uid="Z1oB0CM" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-display-lg pf-m-2-col-on-lg\">\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
122
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
122
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2272" data-pf-content="true" class="pf-v6-c-content--h3">Display 2xl and card variant</h3>
|
|
123
123
|
|
|
124
124
|
<astro-island uid="1DffV2" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-display-2xl pf-m-2-col-on-lg\">\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
125
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
125
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2273" data-pf-content="true" class="pf-v6-c-content--h3">Display and card variant, three column on lg breakpoint</h3>
|
|
126
126
|
|
|
127
127
|
<astro-island uid="h9NAz" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list pf-m-3-col-on-lg pf-m-display-lg\">\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
128
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
128
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2274" data-pf-content="true" class="pf-v6-c-content--h3">Display and card variant, horizontal, modified term width</h3>
|
|
129
129
|
|
|
130
130
|
<astro-island uid="ZL69Dz" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl\n class=\"pf-v6-c-description-list pf-m-2-col-on-lg pf-m-display-lg pf-m-horizontal\"\n style=\"--pf-v6-c-description-list__term--width: 10ch;\"\n>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Name</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-card\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
131
131
|
|
|
132
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
133
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
132
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2275" data-pf-content="true" class="pf-v6-c-content--h2">With icons</h2>
|
|
133
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2276" data-pf-content="true" class="pf-v6-c-content--h3">Icons on terms</h3>
|
|
134
134
|
|
|
135
135
|
<astro-island uid="XTlLI" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<dl class=\"pf-v6-c-description-list\">\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__term-icon\">\n <i class=\"fas fa-cube\" aria-hidden=\"true\"></i>\n </span>\n <span\n class=\"pf-v6-c-description-list__text\"\n >This is a long description that should wrap to multiple lines in cases where the viewport is quite narrow.</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__term-icon\">\n <i class=\"fas fa-book\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-description-list__text\">Namespace</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">mary-test</a>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__term-icon\">\n <i class=\"fas fa-key\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-description-list__text\">Labels</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">example</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__term-icon\">\n <i class=\"fas fa-globe\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-description-list__text\">Pod selector</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <i class=\"fas fa-plus-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-button__text\">app=MyApp</span>\n </button>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">\n <span class=\"pf-v6-c-description-list__term-icon\">\n <i class=\"fas fa-flag\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-description-list__text\">Annotation</span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">2 Annotations</div>\n </dd>\n </div>\n</dl>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
136
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
137
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
136
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2277" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
137
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2278" data-pf-content="true" class="pf-v6-c-content--h3">Accessibility</h3>
|
|
138
138
|
|
|
139
139
|
|
|
140
140
|
|
|
@@ -156,7 +156,7 @@
|
|
|
156
156
|
|
|
157
157
|
|
|
158
158
|
<table><thead><tr><th>Attribute</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>title</code></td><td><code>.pf-v6-c-description-list</code></td><td>Provides an accessible title for the description list. <strong>Required</strong></td></tr><tr><td><code>tabindex="0"</code></td><td><code>.pf-v6-c-description-list__text.pf-m-help-text</code></td><td>Inserts the <code>.pf-v6-c-description-list__text</code> into the tab order of the page so that it is focusable. <strong>Required when the element is clickable</strong></td></tr></tbody></table>
|
|
159
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
159
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2279" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
160
160
|
|
|
161
161
|
|
|
162
162
|
|
|
@@ -262,7 +262,7 @@
|
|
|
262
262
|
|
|
263
263
|
|
|
264
264
|
|
|
265
|
-
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-description-list</code></td><td><code><dl></code></td><td>Initiates the description list component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__group</code></td><td><code><div></code></td><td>Initiates a description list component group. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__term</code></td><td><code><dt></code></td><td>Initiates a description list component term. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__description</code></td><td><code><dd></code></td><td>Initiates a description list component description. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__text</code></td><td><code><span></code>, <code><div></code></td><td>Initiates a description list component text element. Use a <code><span></code> when a child of <code>.pf-v6-c-description-list__term</code>. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__term-icon</code></td><td><code><span></code></td><td>Initiates a description list component term icon element.</td></tr><tr><td><code>.pf-m-compact</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list for compact horizontal and vertical spacing.</td></tr><tr><td><code>.pf-m-display-lg</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list to have large display styling.</td></tr><tr><td><code>.pf-m-display-2xl</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list to have 2xl display styling.</td></tr><tr><td><code>.pf-m-fluid</code></td><td><code>.pf-v6-c-description-list.pf-m-horizontal</code></td><td>Modifies the description list term width to be fluid.</td></tr><tr><td><code>.pf-m-help-text</code></td><td><code>.pf-v6-c-description-list__text</code></td><td>Indicates there is more information available for the description list component term text.</td></tr><tr><td><code>.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list component term and description pair to a horizontal layout.</td></tr><tr><td><code>.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list component term and description pair to a vertical layout.</td></tr><tr><td><code>.pf-m-fill-columns</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.</td></tr><tr><td><code>.pf-m-auto-column-widths</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list to format automatically.</td></tr><tr><td><code>.pf-m-inline-grid</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list display to inline-grid.</td></tr><tr><td><code>.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list number of columns.</td></tr><tr><td><code>--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the min value of the <code>grid-template-columns</code> declaration at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
266
|
-
<div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
265
|
+
<table><thead><tr><th>Class</th><th>Applied to</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-description-list</code></td><td><code><dl></code></td><td>Initiates the description list component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__group</code></td><td><code><div></code></td><td>Initiates a description list component group. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__term</code></td><td><code><dt></code></td><td>Initiates a description list component term. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__description</code></td><td><code><dd></code></td><td>Initiates a description list component description. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__text</code></td><td><code><span></code>, <code><div></code></td><td>Initiates a description list component text element. Use a <code><span></code> when a child of <code>.pf-v6-c-description-list__term</code>. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-description-list__term-icon</code></td><td><code><span></code></td><td>Initiates a description list component term icon element.</td></tr><tr><td><code>.pf-m-compact</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list for compact horizontal and vertical spacing.</td></tr><tr><td><code>.pf-m-display-lg</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list to have large display styling.</td></tr><tr><td><code>.pf-m-display-2xl</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list to have 2xl display styling.</td></tr><tr><td><code>.pf-m-fluid</code></td><td><code>.pf-v6-c-description-list.pf-m-horizontal</code></td><td>Modifies the description list term width to be fluid.</td></tr><tr><td><code>.pf-m-help-text</code></td><td><code>.pf-v6-c-description-list__text</code></td><td>Indicates there is more information available for the description list component term text.</td></tr><tr><td><code>.pf-m-horizontal{-on-[sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list component term and description pair to a horizontal layout.</td></tr><tr><td><code>.pf-m-vertical{-on-[sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list component term and description pair to a vertical layout.</td></tr><tr><td><code>.pf-m-fill-columns</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list groups to fill columns from top to bottom, instead of rows from left to right.</td></tr><tr><td><code>.pf-m-auto-column-widths</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list to format automatically.</td></tr><tr><td><code>.pf-m-inline-grid</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list display to inline-grid.</td></tr><tr><td><code>.pf-m-{1,2,3}-col{-on-[sm, md, lg, xl, 2xl]}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the description list number of columns.</td></tr><tr><td><code>--pf-v6-c-description-list--GridTemplateColumns--min{-on-[breakpoint]}: {width}</code></td><td><code>.pf-v6-c-description-list</code></td><td>Modifies the min value of the <code>grid-template-columns</code> declaration at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2280" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr><tr><td><code>--pf-v6-c-description-list--m-horizontal__term--width{-on-[breakpoint]}: {width}</code></td><td><code>.pf-v6-c-description-list.pf-m-horizontal</code></td><td>Modifies the description list term width at optional <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2281" data-pf-content="true" class="pf-v6-c-content--a">breakpoint</a>.</td></tr></tbody></table>
|
|
266
|
+
<div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2241" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
267
267
|
CSS variables
|
|
268
268
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="ceh1k" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-description-list"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|