@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
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.15.9"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.QW52Ox2j.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
|
|
2
|
-
<link rel="stylesheet" href="/_astro/
|
|
3
|
-
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
2
|
+
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
4
3
|
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
5
|
-
<link rel="stylesheet" href="/_astro/
|
|
4
|
+
<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
|
|
5
|
+
<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
6
6
|
[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
|
|
7
7
|
[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
|
|
8
8
|
animation-duration: 180ms;
|
|
@@ -42,65 +42,65 @@
|
|
|
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="Z2hiQwg" prefix="r4" 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-286"><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="ZCknEI" prefix="r6" 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-96"><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-287"><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-288"><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-96"><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/card/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/card/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/card/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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1693" data-pf-content="true" class="pf-v6-c-content--p">import ’./Card.css’</p>
|
|
46
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
47
|
-
<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="Z28Ni4J" prefix="r4" 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-265"><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="ZpLQfO" prefix="r6" 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-89"><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-266"><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-267"><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-89"><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/card/react"> React </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/card/html"> HTML </a> </li><li class="pf-v6-c-tabs__item"> <a class="pf-v6-c-tabs__link" href="/components/card/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"> <p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1608" data-pf-content="true" class="pf-v6-c-content--p">import ’./Card.css’</p>
|
|
46
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1609" data-pf-content="true" class="pf-v6-c-content--h2">Demos</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1610" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal grid collapsed</h3>
|
|
48
48
|
|
|
49
49
|
<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="ZRpaaK" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"card-demo-horizontal-grid-collapsed-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"card-demo-horizontal-grid-collapsed-example-toggle\"\n type=\"button\"\n aria-labelledby=\"card-demo-horizontal-grid-collapsed-example-title card-demo-horizontal-grid-collapsed-example-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__actions\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-l-split pf-m-gutter pf-m-wrap\">\n <div class=\"pf-v6-c-card__title\">\n <h2\n class=\"pf-v6-c-card__title-text\"\n id=\"card-demo-horizontal-grid-collapsed-example-title\"\n >Getting started</h2>\n </div>\n <div class=\"pf-v6-c-label-group\">\n <div class=\"pf-v6-c-label-group__main\">\n <ul\n class=\"pf-v6-c-label-group__list\"\n role=\"list\"\n aria-label=\"Group of labels\"\n >\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Set up your cluster</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Guided tours</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <span class=\"pf-v6-c-label pf-m-compact pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Quick starts</span>\n </span>\n </span>\n </li>\n <li class=\"pf-v6-c-label-group__list-item\">\n <button\n class=\"pf-v6-c-label pf-m-compact pf-m-overflow\"\n type=\"button\"\n >\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__text\">1 more</span>\n </span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
50
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
50
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1611" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal grid expanded</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="qBo67" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-c-card pf-m-expanded\"\n id=\"card-demo-horizontal-grid-expanded-example\"\n>\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"card-demo-horizontal-grid-expanded-example-toggle\"\n type=\"button\"\n aria-labelledby=\"card-demo-horizontal-grid-expanded-example-title card-demo-horizontal-grid-expanded-example-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__actions\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain\"\n type=\"button\"\n aria-expanded=\"false\"\n aria-label=\"Menu toggle\"\n id=\"card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned\"\n >\n <span class=\"pf-v6-c-menu-toggle__icon\">\n <i class=\"fas fa-ellipsis-v\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-c-card__title\">\n <h2\n class=\"pf-v6-c-card__title-text\"\n id=\"card-demo-horizontal-grid-expanded-example-title\"\n >Getting started</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__expandable-content\">\n <div class=\"pf-v6-c-card__body\">\n <div\n class=\"pf-v6-l-grid pf-m-all-6-col-on-md pf-m-all-3-col-on-lg pf-m-gutter\"\n >\n <div\n class=\"pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start\"\n >\n <div\n class=\"pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow\"\n >\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Set up your cluster</span>\n </span>\n </span>\n <p>Continue setting up your cluster to access all you can in the Console</p>\n <ul class=\"pf-v6-c-list pf-m-plain\" role=\"list\">\n <li>\n <a href=\"#\">Add identity provider</a>\n </li>\n <li>\n <a href=\"#\">Configure alert receivers</a>\n </li>\n <li>\n <a href=\"#\">Configure default ingress certificate</a>\n </li>\n </ul>\n </div>\n <a class=\"pf-v6-c-button pf-m-inline pf-m-link\" href=\"#\">\n <span class=\"pf-v6-c-button__text\">View all set up cluster steps</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </a>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start\"\n >\n <div\n class=\"pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow\"\n >\n <span class=\"pf-v6-c-label pf-m-purple\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Guided tours</span>\n </span>\n </span>\n <p>Tour some of the key features around the console</p>\n <ul class=\"pf-v6-c-list pf-m-plain\" role=\"list\">\n <li>\n <a href=\"#\">Tour the console</a>\n </li>\n <li>\n <a href=\"#\">Explore the Developer perspective</a>\n </li>\n </ul>\n </div>\n <a class=\"pf-v6-c-button pf-m-inline pf-m-link\" href=\"#\">\n <span class=\"pf-v6-c-button__text\">View all guided tours</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </a>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start\"\n >\n <div\n class=\"pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow\"\n >\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Quick starts</span>\n </span>\n </span>\n <p>Get started with features using our step-by-step documentation</p>\n <ul class=\"pf-v6-c-list pf-m-plain\" role=\"list\">\n <li>\n <a href=\"#\">Getting started with Serverless</a>\n </li>\n <li>\n <a href=\"#\">Explore virtualization</a>\n </li>\n <li>\n <a href=\"#\">Build pipelines</a>\n </li>\n </ul>\n </div>\n <a class=\"pf-v6-c-button pf-m-inline pf-m-link\" href=\"#\">\n <span class=\"pf-v6-c-button__text\">View all quick starts</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </a>\n </div>\n <div\n class=\"pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start\"\n >\n <div\n class=\"pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow\"\n >\n <span class=\"pf-v6-c-label pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">Learning resources</span>\n </span>\n </span>\n <p>Learn about new features within the Console and get started with demo apps</p>\n <ul class=\"pf-v6-c-list pf-m-plain\" role=\"list\">\n <li>\n <a href=\"#\">See what's possible with the Explore page</a>\n </li>\n <li>\n <a href=\"#\">\n OpenShift 4.5: Top Tasks\n <i class=\"fas fa-external-link-alt\" aria-hidden=\"true\"></i>\n </a>\n </li>\n <li>\n <a href=\"#\">Try a demo app</a>\n </li>\n </ul>\n </div>\n <a class=\"pf-v6-c-button pf-m-inline pf-m-link\" href=\"#\">\n <span class=\"pf-v6-c-button__text\">View all learning resources</span>\n <span class=\"pf-v6-c-button__icon pf-m-end\">\n <i class=\"fas fa-arrow-right\" aria-hidden=\"true\"></i>\n </span>\n </a>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
53
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
53
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1612" data-pf-content="true" class="pf-v6-c-content--h3">Horizontal split</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="1d714J" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"card-demo-horizontal-split-example\">\n <div class=\"pf-v6-l-grid pf-m-all-6-col-on-md\">\n <div\n class=\"pf-v6-l-grid__item\"\n style=\"min-height: 200px; background: no-repeat bottom right / auto 75% url(/assets/images/pf-background.svg) black;\"\n ></div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Headline</h2>\n </div>\n <div\n class=\"pf-v6-c-card__body\"\n >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.</div>\n <div class=\"pf-v6-c-card__footer\">\n <button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Call to action</span>\n </button>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
56
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
56
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1613" data-pf-content="true" class="pf-v6-c-content--h3">Details card</h3>
|
|
57
57
|
|
|
58
58
|
<astro-island uid="65yv4" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 260px;\"\n>\n <div class=\"pf-v6-c-card\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-title pf-m-xl\">Details</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <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\">Cluster API Address</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">https://api1.devcluster.openshift.com</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\">Cluster ID</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >63b97ac1-b850-41d9-8820-239becde9e86</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">Provider</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">AWS</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">OpenShift Version</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >4.5.0.ci-2020-06-16-015028</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">Update Channel</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">stable-4.5</div>\n </dd>\n </div>\n </dl>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">View Settings</a>\n </div>\n </div>\n <div class=\"pf-v6-c-card\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-title pf-m-xl\">Details</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <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\">Cluster API Address</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">https://api2.devcluster.openshift.com</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\">Cluster ID</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >08908908-b850-41d9-8820-239becde9e86</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">Provider</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">Azure</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">OpenShift Version</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >4.5.0.ci-2020-06-16-015026</div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">Update Channel</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">stable-4.4</div>\n </dd>\n </div>\n </dl>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">View Settings</a>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
59
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
59
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1614" data-pf-content="true" class="pf-v6-c-content--h3">Aggregate status card</h3>
|
|
60
60
|
|
|
61
61
|
<astro-island uid="Z1a3vHc" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-gallery pf-m-gutter\">\n <div class=\"pf-v6-c-card pf-v6-u-text-align-center\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">5 Clusters</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-card pf-v6-u-text-align-center\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">15 Clusters</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-warning\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n </div>\n <div class=\"pf-v6-c-card pf-v6-u-text-align-center\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">3 Clusters</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-danger\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-gallery pf-m-gutter\">\n <div class=\"pf-v6-c-card pf-v6-u-text-align-center\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">10 Hosts</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">2</a>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-warning\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">1</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card pf-v6-u-text-align-center\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">50 Hosts</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">5</a>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-danger\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">12</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card pf-v6-u-text-align-center\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">12 Hosts</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-warning\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">2</a>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-m-vertical\" />\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-danger\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">7</a>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 260px;\"\n >\n <div class=\"pf-v6-c-card\">\n <div class=\"pf-v6-c-card__title\">\n <h2\n class=\"pf-v6-c-card__title-text pf-v6-u-text-align-center\"\n >13 Hosts</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div\n class=\"pf-v6-l-flex pf-m-justify-content-center pf-m-space-items-md\"\n >\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-danger\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">2 errors</a>\n <span>subtitle</span>\n </div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-warning\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">1 warnings</a>\n <span>subtitle</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card\">\n <div class=\"pf-v6-c-card__title pf-v6-u-text-align-center\">\n <h2 class=\"pf-v6-c-card__title-text\">3 Hosts</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div\n class=\"pf-v6-l-flex pf-m-justify-content-center pf-m-space-items-md\"\n >\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">2 successes</a>\n <span>subtitle</span>\n </div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-warning\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">3 warnings</a>\n <span>subtitle</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card\">\n <div class=\"pf-v6-c-card__title pf-v6-u-text-align-center\">\n <h2 class=\"pf-v6-c-card__title-text\">50 Hosts</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div\n class=\"pf-v6-l-flex pf-m-justify-content-center pf-m-space-items-md\"\n >\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-warning\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">7 warnings</a>\n <span>subtitle</span>\n </div>\n </div>\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-danger\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">1 error</a>\n <span>subtitle</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
62
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
62
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1615" data-pf-content="true" class="pf-v6-c-content--h3">Status, tabbed card</h3>
|
|
63
63
|
|
|
64
64
|
<astro-island uid="xv7OX" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Status</h2>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-c-tabs pf-m-fill\" role=\"region\" id=\"status-tabs\">\n <ul class=\"pf-v6-c-tabs__list\" role=\"tablist\">\n <li class=\"pf-v6-c-tabs__item pf-m-current\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"status-tabs-object-1-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Object 1</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"status-tabs-object-2-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Object 2</span>\n </button>\n </li>\n <li class=\"pf-v6-c-tabs__item\" role=\"presentation\">\n <button\n type=\"button\"\n class=\"pf-v6-c-tabs__link\"\n role=\"tab\"\n id=\"status-tabs-object-3-link\"\n >\n <span class=\"pf-v6-c-tabs__item-text\">Object 3</span>\n </button>\n </li>\n </ul>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <section\n class=\"pf-v6-c-tab-content\"\n id=\"-tab1-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n >\n <div class=\"pf-v6-c-tab-content__body\">\n <dl class=\"pf-v6-c-description-list pf-m-horizontal 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\">\n <div class=\"pf-v6-l-grid\">\n <div class=\"pf-v6-l-grid__item pf-m-3-col\">\n <svg\n class=\"pf-v6-c-spinner pf-m-inline\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Loading\"\n >\n <circle\n class=\"pf-v6-c-spinner__path\"\n cx=\"50\"\n cy=\"50\"\n r=\"45\"\n fill=\"none\"\n />\n </svg>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-9-col\">\n <h3 class=\"pf-v6-c-title pf-m-md\">Running</h3>\n </div>\n </div>\n </span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">Resource name that is long and can wrap</a>\n </div>\n <div class=\"pf-v6-c-description-list__text\">121 systems</div>\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\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <h3 class=\"pf-v6-c-title pf-m-md\">Ready</h3>\n </div>\n </div>\n </span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">Resource name</a>\n </div>\n <div class=\"pf-v6-c-description-list__text\">121 systems</div>\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\">\n <div class=\"pf-v6-l-grid\">\n <div class=\"pf-v6-l-grid__item pf-m-3-col\">\n <svg\n class=\"pf-v6-c-spinner pf-m-inline\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Loading\"\n >\n <circle\n class=\"pf-v6-c-spinner__path\"\n cx=\"50\"\n cy=\"50\"\n r=\"45\"\n fill=\"none\"\n />\n </svg>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-9-col\">\n <h3 class=\"pf-v6-c-title pf-m-md\">Running</h3>\n </div>\n </div>\n </span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">Resource name that is long and can wrap</a>\n </div>\n <div class=\"pf-v6-c-description-list__text\">121 systems</div>\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\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <h3 class=\"pf-v6-c-title pf-m-md\">Ready</h3>\n </div>\n </div>\n </span>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <div class=\"pf-v6-c-description-list__text\">\n <a href=\"#\">Resource name that is long and can wrap</a>\n </div>\n <div class=\"pf-v6-c-description-list__text\">121 systems</div>\n </div>\n </dd>\n </div>\n </dl>\n </div>\n </section>\n <section\n class=\"pf-v6-c-tab-content\"\n id=\"-tab2-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n >\n <div class=\"pf-v6-c-tab-content__body\">Panel 2</div>\n </section>\n <section\n class=\"pf-v6-c-tab-content\"\n id=\"-tab3-panel\"\n role=\"tabpanel\"\n tabindex=\"0\"\n hidden\n >\n <div class=\"pf-v6-c-tab-content__body\">Panel 3</div>\n </section>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
65
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
65
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1616" data-pf-content="true" class="pf-v6-c-content--h3">Status card</h3>
|
|
66
66
|
|
|
67
67
|
<astro-island uid="ZOxdmU" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"status-card-default-example\">\n <div class=\"pf-v6-c-card__header\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Status</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div\n class=\"pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-3-col-on-lg pf-m-gutter\"\n >\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span>Cluster</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-exclamation-circle pf-v6-u-danger-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"popover-parent\">\n <a href=\"#\">Control Panel</a>\n </span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-exclamation-circle pf-v6-u-danger-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none\">\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">Operators</a>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-u-color-400\">1 degraged</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none\">\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">Image Vulnerabilities</a>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-u-color-400\">0 vulnerable images</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-notification-drawer\">\n <div class=\"pf-v6-c-notification-drawer__body\">\n <section class=\"pf-v6-c-notification-drawer__group\">\n <button\n class=\"pf-v6-c-notification-drawer__group-toggle\"\n aria-expanded=\"false\"\n >\n <div class=\"pf-v6-c-notification-drawer__group-toggle-title\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-c-notification-drawer__group-toggle-title\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item pf-m-spacer-md\">\n <span>Notifications</span>\n </div>\n <span class=\"pf-v6-c-label pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i\n class=\"fas fa-fw fa-exclamation-circle\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"pf-v6-c-label__text\">1</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i\n class=\"fas fa-fw fa-exclamation-triangle\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n </div>\n </div>\n </div>\n </div>\n <span class=\"pf-v6-c-notification-drawer__group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n <ul class=\"pf-v6-c-notification-drawer__list\" role=\"list\" hidden>\n <li\n class=\"pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger\"\n tabindex=\"0\"\n >\n <div class=\"pf-v6-c-notification-drawer__list-item-header\">\n <span class=\"pf-v6-c-notification-drawer__list-item-header-icon\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <h2 class=\"pf-v6-c-notification-drawer__list-item-header-title\">\n <span class=\"pf-v6-screen-reader\">Danger notification:</span>\n Critical alert regarding control plane\n </h2>\n </div>\n <div\n class=\"pf-v6-c-notification-drawer__list-item-description\"\n >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>\n </li>\n <li\n class=\"pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning\"\n tabindex=\"0\"\n >\n <div class=\"pf-v6-c-notification-drawer__list-item-header\">\n <span class=\"pf-v6-c-notification-drawer__list-item-header-icon\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <h2 class=\"pf-v6-c-notification-drawer__list-item-header-title\">\n <span class=\"pf-v6-screen-reader\">Warning notification:</span>\n Warning alert\n </h2>\n </div>\n <div\n class=\"pf-v6-c-notification-drawer__list-item-description\"\n >This is a warning notification description.</div>\n </li>\n </ul>\n </section>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
68
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
68
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1617" data-pf-content="true" class="pf-v6-c-content--h3">Status card expanded notifications</h3>
|
|
69
69
|
|
|
70
70
|
<astro-island uid="Z4xSKk" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"status-card-expanded-example\">\n <div class=\"pf-v6-c-card__header\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Status</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div\n class=\"pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-3-col-on-lg pf-m-gutter\"\n >\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span>Cluster</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-exclamation-circle pf-v6-u-danger-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"popover-parent\">\n <a href=\"#\">Control Panel</a>\n </span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-exclamation-circle pf-v6-u-danger-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none\">\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">Operators</a>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-u-color-400\">1 degraged</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none\">\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">Image Vulnerabilities</a>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-u-color-400\">0 vulnerable images</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-notification-drawer\">\n <div class=\"pf-v6-c-notification-drawer__body\">\n <section class=\"pf-v6-c-notification-drawer__group pf-m-expanded\">\n <button\n class=\"pf-v6-c-notification-drawer__group-toggle\"\n aria-expanded=\"true\"\n >\n <div class=\"pf-v6-c-notification-drawer__group-toggle-title\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-c-notification-drawer__group-toggle-title\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item pf-m-spacer-md\">\n <span>Notifications</span>\n </div>\n <span class=\"pf-v6-c-label pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i\n class=\"fas fa-fw fa-exclamation-circle\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"pf-v6-c-label__text\">1</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i\n class=\"fas fa-fw fa-exclamation-triangle\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n </div>\n </div>\n </div>\n </div>\n <span class=\"pf-v6-c-notification-drawer__group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n <ul class=\"pf-v6-c-notification-drawer__list\" role=\"list\">\n <li\n class=\"pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger\"\n tabindex=\"0\"\n >\n <div class=\"pf-v6-c-notification-drawer__list-item-header\">\n <span class=\"pf-v6-c-notification-drawer__list-item-header-icon\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <h2 class=\"pf-v6-c-notification-drawer__list-item-header-title\">\n <span class=\"pf-v6-screen-reader\">Danger notification:</span>\n Critical alert regarding control plane\n </h2>\n </div>\n <div\n class=\"pf-v6-c-notification-drawer__list-item-description\"\n >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>\n </li>\n <li\n class=\"pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning\"\n tabindex=\"0\"\n >\n <div class=\"pf-v6-c-notification-drawer__list-item-header\">\n <span class=\"pf-v6-c-notification-drawer__list-item-header-icon\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <h2 class=\"pf-v6-c-notification-drawer__list-item-header-title\">\n <span class=\"pf-v6-screen-reader\">Warning notification:</span>\n Warning alert\n </h2>\n </div>\n <div\n class=\"pf-v6-c-notification-drawer__list-item-description\"\n >This is a warning notification description.</div>\n </li>\n </ul>\n </section>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
71
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
71
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1618" data-pf-content="true" class="pf-v6-c-content--h3">Status card expanded with popover</h3>
|
|
72
72
|
|
|
73
73
|
<astro-island uid="ZL7Fd7" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"status-card-expanded-with-popover-example\">\n <div class=\"pf-v6-c-card__header\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Status</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div\n class=\"pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-3-col-on-lg pf-m-gutter\"\n >\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span>Cluster</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-exclamation-circle pf-v6-u-danger-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"popover-parent\">\n <a href=\"#\">Control Panel</a>\n <div\n class=\"pf-v6-c-popover pf-m-right\"\n role=\"dialog\"\n aria-modal=\"true\"\n aria-labelledby=\"status-card-expanded-with-popover-example-popover-popover-right-header\"\n aria-describedby=\"status-card-expanded-with-popover-example-popover-popover-right-body\"\n style=\"--pf-v6-c-popover--MinWidth: 400px;\"\n >\n <div class=\"pf-v6-c-popover__arrow\"></div>\n <div class=\"pf-v6-c-popover__content\">\n <div class=\"pf-v6-c-popover__close\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n type=\"button\"\n aria-label=\"Close\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <i class=\"fas fa-times\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </div>\n <header class=\"pf-v6-c-popover__header\">\n <div\n class=\"pf-v6-c-popover__title\"\n id=\"status-card-expanded-with-popover-example-popover-popover-right-header\"\n >\n <h1\n class=\"pf-v6-c-popover__title-text\"\n >Control Panel Status</h1>\n </div>\n </header>\n <div\n class=\"pf-v6-c-popover__body\"\n id=\"status-card-expanded-with-popover-example-popover-popover-right-body\"\n >Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.</div>\n <div class=\"pf-v6-c-popover__body\">\n <table\n class=\"pf-v6-c-table pf-m-expandable pf-m-compact\"\n aria-label=\"Control panel table\"\n id=\"status-card-expanded-with-popover-example-popover-table\"\n >\n <thead class=\"pf-v6-c-table__thead\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <th\n class=\"pf-v6-c-table__th pf-v6-c-table__cell-empty\"\n role=\"columnheader\"\n scope=\"col\"\n >\n <span class=\"pf-v6-screen-reader\">Actions</span>\n </th>\n\n <th class=\"pf-v6-c-table__th\" scope=\"col\">Components</th>\n\n <th\n class=\"pf-v6-c-table__th pf-m-fit-content\"\n scope=\"col\"\n >Response rate</th>\n </tr>\n </thead>\n\n <tbody class=\"pf-v6-c-table__tbody pf-m-expanded\">\n <tr class=\"pf-v6-c-table__tr pf-m-expanded\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-expanded pf-m-plain\"\n id=\"status-card-expanded-with-popover-example-popover-table-expandable-toggle-1\"\n type=\"button\"\n aria-expanded=\"true\"\n aria-controls=\"status-card-expanded-with-popover-example-popover-table-content-1\"\n aria-labelledby=\"status-card-expanded-with-popover-example-popover-table-node-1\"\n aria-label=\"Toggle row\"\n aria-describedby=\"true\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i\n class=\"fas fa-angle-down\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </span>\n </button>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n id=\"status-card-expanded-with-popover-example-popover-table-node1\"\n data-label=\"Branches\"\n >\n <span class=\"pf-v6-c-table__text\">API Servers</span>\n </td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <span class=\"pf-v6-c-table__text\">\n 20%&nbsp;\n <i\n class=\"fas fa-exclamation-circle pf-v6-u-danger-color-200\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row pf-m-expanded\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"3\"\n id=\"status-card-expanded-with-popover-example-popover-table-content-1\"\n >\n <div class=\"pf-v6-c-table__expandable-row-content\">\n <div\n class=\"pf-v6-c-alert pf-m-danger pf-m-inline\"\n aria-label=\"Inline danger alert\"\n >\n <div class=\"pf-v6-c-alert__icon\">\n <i\n class=\"fas fa-fw fa-exclamation-circle\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <p class=\"pf-v6-c-alert__title\">\n <span\n class=\"pf-v6-screen-reader\"\n >Danger alert:</span>\n This is a critical alert that can be associated with the control panel.\n </p>\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"status-card-expanded-with-popover-example-popover-table-expandable-toggle-2\"\n type=\"button\"\n aria-controls=\"status-card-expanded-with-popover-example-popover-table-content-2\"\n aria-labelledby=\"status-card-expanded-with-popover-example-popover-table-node-2\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i\n class=\"fas fa-angle-down\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </span>\n </button>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n id=\"{{table--id}}-node2\"\n data-label=\"Branches\"\n >\n <span\n class=\"pf-v6-c-table__text\"\n >Controller Managers</span>\n </td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <span class=\"pf-v6-c-table__text\">\n 100%&nbsp;\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-200\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"3\"\n id=\"status-card-expanded-with-popover-example-popover-table-content-2\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >This is message</div>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"status-card-expanded-with-popover-example-popover-table-expandable-toggle-3\"\n type=\"button\"\n aria-controls=\"status-card-expanded-with-popover-example-popover-table-content-3\"\n aria-labelledby=\"status-card-expanded-with-popover-example-popover-table-node-3\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i\n class=\"fas fa-angle-down\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </span>\n </button>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n id=\"{{table--id}}-node3\"\n data-label=\"Branches\"\n >\n <span class=\"pf-v6-c-table__text\">Schedulers</span>\n </td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <span class=\"pf-v6-c-table__text\">\n 100%&nbsp;\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-200\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"3\"\n id=\"status-card-expanded-with-popover-example-popover-table-content-3\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >This is the message</div>\n </td>\n </tr>\n </tbody>\n\n <tbody class=\"pf-v6-c-table__tbody\">\n <tr class=\"pf-v6-c-table__tr\" role=\"row\">\n <td\n class=\"pf-v6-c-table__td pf-v6-c-table__toggle\"\n aria-label=\"Row expansion\"\n >\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"status-card-expanded-with-popover-example-popover-table-expandable-toggle-4\"\n type=\"button\"\n aria-controls=\"status-card-expanded-with-popover-example-popover-table-content-4\"\n aria-labelledby=\"status-card-expanded-with-popover-example-popover-table-node-4\"\n aria-label=\"Toggle row\"\n >\n <span class=\"pf-v6-c-button__icon\">\n <div class=\"pf-v6-c-table__toggle-icon\">\n <i\n class=\"fas fa-angle-down\"\n aria-hidden=\"true\"\n ></i>\n </div>\n </span>\n </button>\n </td>\n\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n id=\"{{table--id}}-node4\"\n data-label=\"Branches\"\n >\n <span class=\"pf-v6-c-table__text\">etcd</span>\n </td>\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n data-label=\"Pull requests\"\n >\n <span class=\"pf-v6-c-table__text\">\n 91%&nbsp;\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-200\"\n aria-hidden=\"true\"\n ></i>\n </span>\n </td>\n </tr>\n\n <tr\n class=\"pf-v6-c-table__tr pf-v6-c-table__expandable-row\"\n role=\"row\"\n >\n <td\n class=\"pf-v6-c-table__td\"\n role=\"cell\"\n colspan=\"3\"\n id=\"status-card-expanded-with-popover-example-popover-table-content-4\"\n >\n <div\n class=\"pf-v6-c-table__expandable-row-content\"\n >This is the message</div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n </div>\n </div>\n </span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-exclamation-circle pf-v6-u-danger-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none\">\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">Operators</a>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-u-color-400\">1 degraged</span>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <i\n class=\"fas fa-check-circle pf-v6-u-success-color-100\"\n aria-hidden=\"true\"\n ></i>\n </div>\n <div class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none\">\n <div class=\"pf-v6-l-flex__item\">\n <a href=\"#\">Image Vulnerabilities</a>\n </div>\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-u-color-400\">0 vulnerable images</span>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-notification-drawer\">\n <div class=\"pf-v6-c-notification-drawer__body\">\n <section class=\"pf-v6-c-notification-drawer__group pf-m-expanded\">\n <button\n class=\"pf-v6-c-notification-drawer__group-toggle\"\n aria-expanded=\"true\"\n >\n <div class=\"pf-v6-c-notification-drawer__group-toggle-title\">\n <div class=\"pf-v6-l-flex\">\n <div class=\"pf-v6-c-notification-drawer__group-toggle-title\">\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item pf-m-spacer-md\">\n <span>Notifications</span>\n </div>\n <span class=\"pf-v6-c-label pf-m-red\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i\n class=\"fas fa-fw fa-exclamation-circle\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"pf-v6-c-label__text\">1</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-orange\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i\n class=\"fas fa-fw fa-exclamation-triangle\"\n aria-hidden=\"true\"\n ></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-green\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-blue\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-info-circle\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n <span class=\"pf-v6-c-label pf-m-teal\">\n <span class=\"pf-v6-c-label__content\">\n <span class=\"pf-v6-c-label__icon\">\n <i class=\"fas fa-fw fa-bell\" aria-hidden=\"true\"></i>\n </span>\n <span class=\"pf-v6-c-label__text\">3</span>\n </span>\n </span>\n </div>\n </div>\n </div>\n </div>\n <span class=\"pf-v6-c-notification-drawer__group-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n <ul class=\"pf-v6-c-notification-drawer__list\" role=\"list\">\n <li\n class=\"pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger\"\n tabindex=\"0\"\n >\n <div class=\"pf-v6-c-notification-drawer__list-item-header\">\n <span class=\"pf-v6-c-notification-drawer__list-item-header-icon\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n <h2 class=\"pf-v6-c-notification-drawer__list-item-header-title\">\n <span class=\"pf-v6-screen-reader\">Danger notification:</span>\n Critical alert regarding control plane\n </h2>\n </div>\n <div\n class=\"pf-v6-c-notification-drawer__list-item-description\"\n >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div>\n </li>\n <li\n class=\"pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning\"\n tabindex=\"0\"\n >\n <div class=\"pf-v6-c-notification-drawer__list-item-header\">\n <span class=\"pf-v6-c-notification-drawer__list-item-header-icon\">\n <i class=\"fas fa-exclamation-triangle\" aria-hidden=\"true\"></i>\n </span>\n <h2 class=\"pf-v6-c-notification-drawer__list-item-header-title\">\n <span class=\"pf-v6-screen-reader\">Warning notification:</span>\n Warning alert\n </h2>\n </div>\n <div\n class=\"pf-v6-c-notification-drawer__list-item-description\"\n >This is a warning notification description.</div>\n </li>\n </ul>\n </section>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
74
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
74
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1619" data-pf-content="true" class="pf-v6-c-content--h3">Utilization card 1</h3>
|
|
75
75
|
|
|
76
76
|
<astro-island uid="Z1KB4rd" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"utilization-card-1-example\">\n <div class=\"pf-v6-c-card__title\" id=\"utilization-card-1-example-title1\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Top Utilized Clusters</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-stack\">\n <b>Cluster-1204</b>\n <span>27.3 cores available</span>\n </div>\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_line-chart-1.png\" alt=\"Line Chart\" />\n </div>\n <a href=\"#\">View details</a>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-stack\">\n <b>Abcdef-1204</b>\n <span>50.6 cores available</span>\n </div>\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_line-chart-1.png\" alt=\"Line Chart\" />\n </div>\n <a href=\"#\">View details</a>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">View all clusters</a>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
77
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
77
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1620" data-pf-content="true" class="pf-v6-c-content--h3">Utilization card 2</h3>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="DGYe9" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"utilization-card-2-example\">\n <div class=\"pf-v6-c-card__title\" id=\"utilization-card-2-example-title1\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Top Utilized Clusters</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">Cluster-1204</a>\n <span>27.3 cores available</span>\n </div>\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_line-chart-1.png\" alt=\"Line Chart\" />\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <div class=\"pf-v6-l-stack\">\n <a href=\"#\">Abcdef-1204</a>\n <span>50.6 cores available</span>\n </div>\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_line-chart-1.png\" alt=\"Line Chart\" />\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">View all clusters</a>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
80
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
80
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1621" data-pf-content="true" class="pf-v6-c-content--h3">Utilization card 3</h3>
|
|
81
81
|
|
|
82
82
|
<astro-island uid="Z2vO3VS" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to\n<code>baseline</code> alignment.\n<br />\n<br />\n<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"utilization-card-3-example\">\n <div class=\"pf-v6-c-card__header pf-v6-u-align-items-flex-start\">\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-c-card__title\" id=\"utilization-card-3-example-title1\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Recommendations</h2>\n </div>\n </div>\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"utilization-card-3-example-select-dropdown\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Filter</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-flex pf-m-column\">\n <span>System</span>\n <div class=\"pf-v6-l-flex pf-m-space-items-sm\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-danger\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n <a hfer=\"#\">25 incidents detected</a>\n </div>\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_chart-stack.png\" alt=\"Stack chart\" />\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">See details</a>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
83
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
83
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1622" data-pf-content="true" class="pf-v6-c-content--h3">Utilization card 4</h3>
|
|
84
84
|
|
|
85
85
|
<astro-island uid="obJtB" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"utilization-card-4-example\">\n <div class=\"pf-v6-c-card__title\" id=\"utilization-card-4-example-title1\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">CPU Usage</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_chart-threshold.png\" alt=\"Threshold chart\" />\n </div>\n </div>\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">See details</a>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
86
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
86
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1623" data-pf-content="true" class="pf-v6-c-content--h3">Nested cards with expand toggle on the right</h3>
|
|
87
87
|
|
|
88
88
|
<astro-island uid="255IWO" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"nested-cards-toggle-right-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"nested-cards-toggle-right-example-title\"\n >\n <h2 class=\"pf-v6-c-title pf-m-lg\">Hardware Monitor</h2>\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-card pf-m-plain pf-m-expanded\"\n id=\"nested-cards-toggle-right-example-group-1\"\n >\n <div class=\"pf-v6-c-card__header pf-m-toggle-right\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-cards-toggle-right-example-group-1-toggle\"\n type=\"button\"\n aria-labelledby=\"nested-cards-toggle-right-example-group-1-title nested-cards-toggle-right-example-group-1-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"nested-cards-toggle-right-example-group-1-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">CPU 1</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__expandable-content\">\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Temperature</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>64C</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">100C</div>\n <div class=\"pf-v6-l-flex__item\">50C</div>\n <div class=\"pf-v6-l-flex__item\">0C</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-v6-u-hidden-on-md\" />\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Speed</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>2.3Ghz</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">36hz</div>\n <div class=\"pf-v6-l-flex__item\">1.5Ghz</div>\n <div class=\"pf-v6-l-flex__item\">0Ghz</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-card pf-m-plain\"\n id=\"nested-cards-toggle-right-example-group-2\"\n >\n <div class=\"pf-v6-c-card__header pf-m-toggle-right\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-cards-toggle-right-example-group-2-toggle\"\n type=\"button\"\n aria-labelledby=\"nested-cards-toggle-right-example-group-2-title nested-cards-toggle-right-example-group-2-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"nested-cards-toggle-right-example-group-2-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">CPU 2</h2>\n </div>\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-card pf-m-plain\"\n id=\"nested-cards-toggle-right-example-group-3\"\n >\n <div class=\"pf-v6-c-card__header pf-m-toggle-right\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-cards-toggle-right-example-group-3-toggle\"\n type=\"button\"\n aria-labelledby=\"nested-cards-toggle-right-example-group-3-title nested-cards-toggle-right-example-group-3-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"nested-cards-toggle-right-example-group-3-title&quot;\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">CPU 3</h2>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
89
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
89
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1624" data-pf-content="true" class="pf-v6-c-content--h3">Nested cards with expand toggle</h3>
|
|
90
90
|
|
|
91
91
|
<astro-island uid="Ital6" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"nested-cards-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-c-card__title\" id=\"nested-cards-example-title\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Hardware Monitor</h2>\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-card pf-m-plain pf-m-expanded\"\n id=\"nested-cards-example-group-1\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-cards-example-group-1-toggle\"\n type=\"button\"\n aria-labelledby=\"nested-cards-example-group-1-title nested-cards-example-group-1-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"nested-cards-example-group-1-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">CPU 1</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__expandable-content\">\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Temperature</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>64C</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">100C</div>\n <div class=\"pf-v6-l-flex__item\">50C</div>\n <div class=\"pf-v6-l-flex__item\">0C</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-v6-u-hidden-on-md\" />\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Speed</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>2.3Ghz</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">36hz</div>\n <div class=\"pf-v6-l-flex__item\">1.5Ghz</div>\n <div class=\"pf-v6-l-flex__item\">0Ghz</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card pf-m-plain\" id=\"nested-cards-example-group-2\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-cards-example-group-2-toggle\"\n type=\"button\"\n aria-labelledby=\"nested-cards-example-group-2-title nested-cards-example-group-2-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"nested-cards-example-group-2-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">CPU 2</h2>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card pf-m-plain\" id=\"nested-cards-example-group-3\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"nested-cards-example-group-3-toggle\"\n type=\"button\"\n aria-labelledby=\"nested-cards-example-group-3-title nested-cards-example-group-3-toggle\"\n aria-label=\"Details\"\n >\n <span class=\"pf-v6-c-button__icon pf-m-start\">\n <span class=\"pf-v6-c-card__header-toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"nested-cards-example-group-3-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">CPU 3</h2>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
92
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
92
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1625" data-pf-content="true" class="pf-v6-c-content--h3">With accordion</h3>
|
|
93
93
|
|
|
94
94
|
<astro-island uid="10MUwe" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div class=\"pf-v6-c-card\" id=\"with-accordion-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-c-card__title\" id=\"with-accordion-example-title\">\n <h2 class=\"pf-v6-c-title pf-m-lg\">Hardware Monitor</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"pf-v6-c-accordion\">\n <h3>\n <button\n class=\"pf-v6-c-accordion__toggle\"\n type=\"button\"\n aria-expanded=\"true\"\n >\n <span class=\"pf-v6-c-accordion__toggle-text\">CPU 1</span>\n <span class=\"pf-v6-c-accordion__toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </h3>\n <div class=\"pf-v6-c-accordion__expandable-content\" hidden>\n <div class=\"pf-v6-c-accordion__expandable-content-body\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Temperature</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>64C</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">100C</div>\n <div class=\"pf-v6-l-flex__item\">50C</div>\n <div class=\"pf-v6-l-flex__item\">0C</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-v6-u-hidden-on-md\" />\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Speed</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>2.3Ghz</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">36hz</div>\n <div class=\"pf-v6-l-flex__item\">1.5Ghz</div>\n <div class=\"pf-v6-l-flex__item\">0Ghz</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <h3>\n <button\n class=\"pf-v6-c-accordion__toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-accordion__toggle-text\">CPU 2</span>\n <span class=\"pf-v6-c-accordion__toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </h3>\n <div class=\"pf-v6-c-accordion__expandable-content\" hidden>\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Temperature</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>64C</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">100C</div>\n <div class=\"pf-v6-l-flex__item\">50C</div>\n <div class=\"pf-v6-l-flex__item\">0C</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-v6-u-hidden-on-md\" />\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Speed</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>2.3Ghz</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">36hz</div>\n <div class=\"pf-v6-l-flex__item\">1.5Ghz</div>\n <div class=\"pf-v6-l-flex__item\">0Ghz</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n\n <h3>\n <button\n class=\"pf-v6-c-accordion__toggle\"\n type=\"button\"\n aria-expanded=\"false\"\n >\n <span class=\"pf-v6-c-accordion__toggle-text\">CPU 3</span>\n <span class=\"pf-v6-c-accordion__toggle-icon\">\n <i class=\"fas fa-angle-right\" aria-hidden=\"true\"></i>\n </span>\n </button>\n </h3>\n <div class=\"pf-v6-c-accordion__expandable-content\" hidden>\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Temperature</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>64C</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">100C</div>\n <div class=\"pf-v6-l-flex__item\">50C</div>\n <div class=\"pf-v6-l-flex__item\">0C</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n <hr class=\"pf-v6-c-divider pf-v6-u-hidden-on-md\" />\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-4-col-on-md\">\n <div\n class=\"pf-v6-l-flex pf-m-column-on-md pf-m-space-items-none-on-md pf-m-justify-content-center-on-md pf-v6-u-h-100-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">\n <b>Speed</b>\n </div>\n <hr\n class=\"pf-v6-c-divider pf-m-vertical pf-m-inset-sm pf-v6-u-hidden-on-md\"\n />\n <div class=\"pf-v6-l-flex__item\">\n <span>2.3Ghz</span>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-8-col-on-md\">\n <div class=\"pf-v6-l-grid pf-m-gutter\">\n <div class=\"pf-v6-l-grid__item pf-m-2-col\">\n <div\n class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none pf-m-align-items-flex-end-on-md\"\n >\n <div class=\"pf-v6-l-flex__item\">36hz</div>\n <div class=\"pf-v6-l-flex__item\">1.5Ghz</div>\n <div class=\"pf-v6-l-flex__item\">0Ghz</div>\n </div>\n </div>\n <div class=\"pf-v6-l-grid__item pf-m-10-col\">\n <div class=\"ws-chart\">\n <img\n src=\"/assets/images/img_line-chart-2.png\"\n alt=\"Line chart\"\n />\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
95
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
95
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1626" data-pf-content="true" class="pf-v6-c-content--h3">Trend card 1</h3>
|
|
96
96
|
|
|
97
97
|
<astro-island uid="ZVBY0S" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to\n<code>baseline</code> alignment.\n<br />\n<br />\n<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"trend-card-1-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-c-card__title\" id=\"trend-card-1-example-title\">\n <h1 class=\"pf-v6-c-title pf-m-2xl\">1,050,765 IOPS</h1>\n </div>\n <span>Workload</span>\n </div>\n <div\n class=\"pf-v6-c-card__actions pf-m-no-offset\"\n style=\"padding-block-start: 1px;\"\n >\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"trend-card-1-example-select-dropdown\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Filter</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_line-chart-1.png\" alt=\"Line Chart\" />\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
98
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
98
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1627" data-pf-content="true" class="pf-v6-c-content--h3">Trend card 2</h3>
|
|
99
99
|
|
|
100
100
|
<astro-island uid="ZrcN6P" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"trend-card-2-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-l-flex pf-m-align-items-center\">\n <div class=\"pf-v6-l-flex__item pf-m-flex-none\">\n <div class=\"pf-v6-l-flex pf-m-column pf-m-space-items-none\">\n <div class=\"pf-v6-c-card__title\" id=\"trend-card-2-example-title\">\n <h1 class=\"pf-v6-c-title pf-m-2xl\">842 TB</h1>\n </div>\n <span>Storage capacity</span>\n </div>\n </div>\n <div class=\"pf-v6-l-flex__item pf-m-flex-1\">\n <div class=\"ws-chart\">\n <img src=\"/assets/images/img_line-chart-1.png\" alt=\"Line Chart\" />\n </div>\n </div>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__footer\">\n <div class=\"pf-v6-l-flex\">\n <a href=\"#\">Action 1</a>\n <a href=\"#\">Action 2</a>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
101
|
-
<h3 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-1628" data-pf-content="true" class="pf-v6-c-content--h3">Log view</h3>
|
|
102
102
|
|
|
103
103
|
<astro-island uid="1guBSj" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to\n<code>baseline</code> alignment.\n<br />\n<br />\n<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"card-log-view-example\">\n <div class=\"pf-v6-c-card__header pf-v6-u-align-items-flex-start\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"card-log-view-example-select-dropdown\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Most recent</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-log-view-example-title1\"\n style=\"padding-block-start: 3px;\"\n >\n <h2 class=\"pf-v6-c-title pf-m-lg\">Activity</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <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\">Readiness probe failed</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-21T21:38\"\n >Thursday, 21 January 2019, 9:38 PM EST</time>\n </span>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">Successful assignment</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-21T21:34\"\n >Thursday, 21 January 2019, 9:34 PM EST</time>\n </span>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">Pulling image</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Pulling image \"openshift/hello-openshift\"</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-20T21:14\"\n >Thursday, 21 January 2019, 8:14 PM EST</time>\n </span>\n </div>\n </dd>\n </div>\n <div class=\"pf-v6-c-description-list__group\">\n <dt class=\"pf-v6-c-description-list__term\">Created container</dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Created container hello-openshift</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-21T19:18\"\n >Thursday, 21 January 2019, 7:18 PM EST</time>\n </span>\n </div>\n </dd>\n </div>\n </dl>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">View all activity</a>\n </div>\n </div>\n</div>\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-1629" data-pf-content="true" class="pf-v6-c-content--h3">Events view</h3>
|
|
105
105
|
|
|
106
106
|
<astro-island uid="Z1RYlq" component-url="/_astro/LiveExample.LDgudiOh.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{"src":[0],"html":[0,"<b>Note:</b> Custom CSS is used in this demo to align the card title and select toggle text to\n<code>baseline</code> alignment.\n<br />\n<br />\n<div\n class=\"pf-v6-l-gallery pf-m-gutter\"\n style=\"--pf-v6-l-gallery--GridTemplateColumns--min: 360px;\"\n>\n <div class=\"pf-v6-c-card\" id=\"card-events-view-example\">\n <div class=\"pf-v6-c-card__header pf-v6-u-align-items-flex-start\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <button\n class=\"pf-v6-c-menu-toggle pf-m-plain pf-m-text\"\n type=\"button\"\n aria-expanded=\"false\"\n id=\"card-events-view-example-select-dropdown\"\n >\n <span class=\"pf-v6-c-menu-toggle__text\">Status</span>\n <span class=\"pf-v6-c-menu-toggle__controls\">\n <span class=\"pf-v6-c-menu-toggle__toggle-icon\">\n <i class=\"fas fa-caret-down fa-fw\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-events-view-example-title1\"\n style=\"padding-block-start: 3px;\"\n >\n <h2 class=\"pf-v6-c-title pf-m-lg\">Events</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">\n <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 <div class=\"pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-danger\">\n <i class=\"fas fa-exclamation-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">Readiness probe failed</div>\n </div>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Readiness probe failed: Get https://10.131.0.7:5000/healthz: dial tcp 10.131.0.7:5000: connect: connection refused</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-21T21:38\"\n >Thursday, 21 January 2019, 9:38 PM EST</time>\n </span>\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 <div class=\"pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">Successful assignment</div>\n </div>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Successfully assigned default/example to ip-10-0-130-149.ec2.internal</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-21T21:34\"\n >Thursday, 21 January 2019, 9:34 PM EST</time>\n </span>\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 <div class=\"pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <svg\n class=\"pf-v6-c-spinner pf-m-inline\"\n role=\"progressbar\"\n viewBox=\"0 0 100 100\"\n aria-label=\"Loading\"\n >\n <circle\n class=\"pf-v6-c-spinner__path\"\n cx=\"50\"\n cy=\"50\"\n r=\"45\"\n fill=\"none\"\n />\n </svg>\n </div>\n <div class=\"pf-v6-l-flex__item\">Pulling image</div>\n </div>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Pulling image \"openshift/hello-openshift\"</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-21T20:14\"\n >Thursday, 21 January 2019, 8:14 PM EST</time>\n </span>\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 <div class=\"pf-v6-l-flex pf-m-nowrap pf-m-space-items-sm\">\n <div class=\"pf-v6-l-flex__item\">\n <span class=\"pf-v6-c-icon pf-m-inline\">\n <span class=\"pf-v6-c-icon__content pf-m-success\">\n <i class=\"fas fa-check-circle\" aria-hidden=\"true\"></i>\n </span>\n </span>\n </div>\n <div class=\"pf-v6-l-flex__item\">Created container</div>\n </div>\n </dt>\n <dd class=\"pf-v6-c-description-list__description\">\n <div\n class=\"pf-v6-c-description-list__text\"\n >Created container hello-openshift</div>\n </dd>\n <dd class=\"pf-v6-c-description-list__description\">\n <div class=\"pf-v6-c-description-list__text\">\n <span class=\"pf-v6-c-timestamp\">\n <time\n class=\"pf-v6-c-timestamp__text\"\n datetime=\"2019-01-21T19:18\"\n >Thursday, 21 January 2019, 7:18 PM EST</time>\n </span>\n </div>\n </dd>\n </div>\n </dl>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__footer\">\n <a href=\"#\">View all events</a>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island> </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>
|