@patternfly/patternfly-doc-core 1.15.4 → 1.15.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.astro/content-modules.mjs +124 -124
- package/README.mdx +1 -0
- package/cli/cli.ts +54 -35
- package/{src → dist}/apiIndex.json +94 -94
- package/dist/cli/cli.js +48 -30
- package/dist/docs/_worker.js/chunks/fetch_CoXtH9RF.mjs +12 -0
- package/dist/docs/_worker.js/chunks/getConfig_DO3RhTb7.mjs +18 -0
- package/dist/docs/_worker.js/index.js +11 -9
- package/dist/docs/_worker.js/manifest_DIDAejNV.mjs +100 -0
- package/dist/docs/_worker.js/pages/api/_version_/_section_/_page_.astro.mjs +18 -10
- package/dist/docs/_worker.js/pages/api/_version_/_section_.astro.mjs +17 -8
- package/dist/docs/_worker.js/pages/api/_version_.astro.mjs +15 -8
- package/dist/docs/_worker.js/pages/api/openapi.json.astro.mjs +14 -3
- package/dist/docs/_worker.js/pages/api/versions.astro.mjs +11 -4
- package/dist/docs/_worker.js/pages/apiindex.json.astro.mjs +1 -0
- package/dist/docs/_worker.js/pages/props.astro.mjs +1 -16
- package/dist/docs/apiIndex.json +561 -0
- package/dist/docs/components/about-modal/html/index.html +8 -8
- package/dist/docs/components/about-modal/html-demos/index.html +4 -4
- package/dist/docs/components/about-modal/index.html +5 -5
- package/dist/docs/components/accordion/html/index.html +22 -22
- package/dist/docs/components/accordion/index.html +7 -7
- package/dist/docs/components/action-list/html/index.html +11 -11
- package/dist/docs/components/action-list/index.html +9 -9
- package/dist/docs/components/alert/html/index.html +31 -31
- package/dist/docs/components/alert/html-demos/index.html +10 -10
- package/dist/docs/components/alert/index.html +83 -83
- package/dist/docs/components/alert/react/index.html +83 -83
- package/dist/docs/components/avatar/html/index.html +16 -16
- package/dist/docs/components/avatar/index.html +8 -8
- package/dist/docs/components/avatar/react/index.html +5 -5
- package/dist/docs/components/back-to-top/html/index.html +9 -9
- package/dist/docs/components/back-to-top/html-demos/index.html +4 -4
- package/dist/docs/components/back-to-top/index.html +8 -8
- package/dist/docs/components/back-to-top/react/index.html +8 -8
- package/dist/docs/components/backdrop/html/index.html +11 -11
- package/dist/docs/components/backdrop/index.html +6 -6
- package/dist/docs/components/backdrop/react/index.html +6 -6
- package/dist/docs/components/background-image/html/index.html +11 -11
- package/dist/docs/components/background-image/index.html +6 -6
- package/dist/docs/components/background-image/react/index.html +6 -6
- package/dist/docs/components/badge/html/index.html +12 -12
- package/dist/docs/components/badge/index.html +8 -8
- package/dist/docs/components/badge/react/index.html +8 -8
- package/dist/docs/components/banner/html/index.html +12 -12
- package/dist/docs/components/banner/html-demos/index.html +9 -9
- package/dist/docs/components/banner/index.html +11 -11
- package/dist/docs/components/banner/react/index.html +11 -11
- package/dist/docs/components/brand/html/index.html +10 -10
- package/dist/docs/components/brand/index.html +6 -6
- package/dist/docs/components/breadcrumb/html/index.html +15 -15
- package/dist/docs/components/breadcrumb/index.html +6 -6
- package/dist/docs/components/breadcrumb/react/index.html +9 -9
- package/dist/docs/components/button/html/index.html +26 -26
- package/dist/docs/components/button/html-demos/index.html +5 -5
- package/dist/docs/components/button/index.html +34 -34
- package/dist/docs/components/button/react/index.html +37 -37
- package/dist/docs/components/calendar-month/html/index.html +9 -9
- package/dist/docs/components/calendar-month/index.html +6 -6
- package/dist/docs/components/calendar-month/react/index.html +9 -9
- package/dist/docs/components/card/html/index.html +37 -37
- package/dist/docs/components/card/html-demos/index.html +25 -25
- package/dist/docs/components/card/index.html +52 -52
- package/dist/docs/components/card/react/index.html +55 -55
- package/dist/docs/components/checkbox/html/index.html +21 -21
- package/dist/docs/components/checkbox/index.html +16 -16
- package/dist/docs/components/checkbox/react/index.html +13 -13
- package/dist/docs/components/chip/index.html +11 -11
- package/dist/docs/components/chip/react-deprecated/index.html +11 -11
- package/dist/docs/components/clipboard-copy/html/index.html +12 -12
- package/dist/docs/components/clipboard-copy/index.html +15 -15
- package/dist/docs/components/clipboard-copy/react/index.html +15 -15
- package/dist/docs/components/code-block/html/index.html +10 -10
- package/dist/docs/components/code-block/index.html +9 -9
- package/dist/docs/components/code-block/react/index.html +6 -6
- package/dist/docs/components/code-editor/html/index.html +16 -16
- package/dist/docs/components/code-editor/index.html +16 -16
- package/dist/docs/components/content/html/index.html +21 -21
- package/dist/docs/components/content/index.html +19 -19
- package/dist/docs/components/data-list/html/index.html +38 -38
- package/dist/docs/components/data-list/html-demos/index.html +12 -12
- package/dist/docs/components/data-list/index.html +21 -21
- package/dist/docs/components/date-picker/html/index.html +11 -11
- package/dist/docs/components/date-picker/index.html +14 -14
- package/dist/docs/components/date-picker/react/index.html +17 -17
- package/dist/docs/components/description-list/html/index.html +41 -41
- package/dist/docs/components/description-list/html-demos/index.html +8 -8
- package/dist/docs/components/description-list/index.html +36 -36
- package/dist/docs/components/description-list/react/index.html +39 -39
- package/dist/docs/components/divider/html/index.html +18 -18
- package/dist/docs/components/divider/index.html +11 -11
- package/dist/docs/components/drag-and-drop/html/index.html +11 -11
- package/dist/docs/components/drag-and-drop/index.html +9 -9
- package/dist/docs/components/drag-and-drop/react-deprecated/index.html +9 -9
- package/dist/docs/components/drawer/html/index.html +27 -27
- package/dist/docs/components/drawer/html-demos/index.html +16 -16
- package/dist/docs/components/drawer/index.html +25 -25
- package/dist/docs/components/dual-list-selector/html/index.html +13 -13
- package/dist/docs/components/dual-list-selector/index.html +17 -17
- package/dist/docs/components/empty-state/html/index.html +14 -14
- package/dist/docs/components/empty-state/index.html +13 -13
- package/dist/docs/components/empty-state/react/index.html +13 -13
- package/dist/docs/components/expandable-section/html/index.html +17 -17
- package/dist/docs/components/expandable-section/index.html +18 -18
- package/dist/docs/components/expandable-section/react/index.html +15 -15
- package/dist/docs/components/form/html/index.html +19 -19
- package/dist/docs/components/form/html-demos/index.html +6 -6
- package/dist/docs/components/form/index.html +19 -19
- package/dist/docs/components/form/react/index.html +19 -19
- package/dist/docs/components/form-control/html/index.html +12 -12
- package/dist/docs/components/form-control/index.html +12 -12
- package/dist/docs/components/form-select/index.html +9 -9
- package/dist/docs/components/form-select/react/index.html +9 -9
- package/dist/docs/components/helper-text/html/index.html +11 -11
- package/dist/docs/components/helper-text/html-demos/index.html +7 -7
- package/dist/docs/components/helper-text/index.html +9 -9
- package/dist/docs/components/hint/html/index.html +7 -7
- package/dist/docs/components/hint/index.html +8 -8
- package/dist/docs/components/hint/react/index.html +11 -11
- package/dist/docs/components/icon/html/index.html +16 -16
- package/dist/docs/components/icon/index.html +17 -17
- package/dist/docs/components/icon/react/index.html +20 -20
- package/dist/docs/components/inline-edit/html/index.html +29 -29
- package/dist/docs/components/inline-edit/index.html +29 -29
- package/dist/docs/components/input-group/html/index.html +12 -12
- package/dist/docs/components/input-group/index.html +12 -12
- package/dist/docs/components/input-group/react/index.html +12 -12
- package/dist/docs/components/jump-links/html/index.html +17 -17
- package/dist/docs/components/jump-links/html-demos/index.html +13 -13
- package/dist/docs/components/jump-links/index.html +9 -9
- package/dist/docs/components/jump-links/react/index.html +12 -12
- package/dist/docs/components/label/html/index.html +44 -44
- package/dist/docs/components/label/index.html +28 -28
- package/dist/docs/components/list/html/index.html +13 -13
- package/dist/docs/components/list/index.html +9 -9
- package/dist/docs/components/login-page/html/index.html +17 -17
- package/dist/docs/components/login-page/index.html +13 -13
- package/dist/docs/components/masthead/html/index.html +13 -13
- package/dist/docs/components/masthead/html-demos/index.html +20 -20
- package/dist/docs/components/masthead/index.html +18 -18
- package/dist/docs/components/menu/html/index.html +46 -46
- package/dist/docs/components/menu/index.html +68 -68
- package/dist/docs/components/menu/react/index.html +68 -68
- package/dist/docs/components/menu-toggle/html/index.html +35 -35
- package/dist/docs/components/menu-toggle/index.html +66 -66
- package/dist/docs/components/menu-toggle/react/index.html +66 -66
- package/dist/docs/components/modal/html/index.html +45 -45
- package/dist/docs/components/modal/html-demos/index.html +16 -16
- package/dist/docs/components/modal/index.html +41 -41
- package/dist/docs/components/multiple-file-upload/html/index.html +11 -11
- package/dist/docs/components/multiple-file-upload/index.html +26 -26
- package/dist/docs/components/navigation/html/index.html +26 -26
- package/dist/docs/components/navigation/html-demos/index.html +16 -16
- package/dist/docs/components/navigation/index.html +18 -18
- package/dist/docs/components/navigation/react/index.html +21 -21
- package/dist/docs/components/notification-badge/index.html +16 -16
- package/dist/docs/components/notification-badge/react/index.html +16 -16
- package/dist/docs/components/notification-drawer/html/index.html +9 -9
- package/dist/docs/components/notification-drawer/html-demos/index.html +13 -13
- package/dist/docs/components/notification-drawer/index.html +8 -8
- package/dist/docs/components/notification-drawer/react/index.html +8 -8
- package/dist/docs/components/number-input/html/index.html +12 -12
- package/dist/docs/components/number-input/index.html +11 -11
- package/dist/docs/components/number-input/react/index.html +14 -14
- package/dist/docs/components/overflow-menu/html/index.html +18 -18
- package/dist/docs/components/overflow-menu/index.html +9 -9
- package/dist/docs/components/overflow-menu/react/index.html +12 -12
- package/dist/docs/components/page/html/index.html +18 -18
- package/dist/docs/components/page/html-demos/index.html +32 -32
- package/dist/docs/components/page/index.html +50 -50
- package/dist/docs/components/page/react/index.html +50 -50
- package/dist/docs/components/pagination/html/index.html +20 -20
- package/dist/docs/components/pagination/index.html +17 -17
- package/dist/docs/components/pagination/react/index.html +14 -14
- package/dist/docs/components/panel/html/index.html +14 -14
- package/dist/docs/components/panel/html-demos/index.html +5 -5
- package/dist/docs/components/panel/index.html +22 -22
- package/dist/docs/components/password-generator/html-demos/index.html +4 -4
- package/dist/docs/components/password-generator/index.html +4 -4
- package/dist/docs/components/password-strength/html-demos/index.html +7 -7
- package/dist/docs/components/password-strength/index.html +7 -7
- package/dist/docs/components/popover/html/index.html +44 -44
- package/dist/docs/components/popover/index.html +20 -20
- package/dist/docs/components/popover/react/index.html +23 -23
- package/dist/docs/components/progress/html/index.html +31 -31
- package/dist/docs/components/progress/index.html +23 -23
- package/dist/docs/components/progress/react/index.html +23 -23
- package/dist/docs/components/progress-stepper/html/index.html +27 -27
- package/dist/docs/components/progress-stepper/index.html +16 -16
- package/dist/docs/components/progress-stepper/react/index.html +16 -16
- package/dist/docs/components/radio/html/index.html +20 -20
- package/dist/docs/components/radio/index.html +15 -15
- package/dist/docs/components/radio/react/index.html +15 -15
- package/dist/docs/components/sidebar/html/index.html +21 -21
- package/dist/docs/components/sidebar/index.html +17 -17
- package/dist/docs/components/simple-file-upload/html/index.html +15 -15
- package/dist/docs/components/simple-file-upload/index.html +32 -32
- package/dist/docs/components/simple-file-upload/react/index.html +32 -32
- package/dist/docs/components/simple-list/html/index.html +11 -11
- package/dist/docs/components/simple-list/index.html +9 -9
- package/dist/docs/components/simple-list/react/index.html +6 -6
- package/dist/docs/components/skeleton/html/index.html +13 -13
- package/dist/docs/components/skeleton/html-demos/index.html +3 -3
- package/dist/docs/components/skeleton/index.html +10 -10
- package/dist/docs/components/skeleton/react/index.html +10 -10
- package/dist/docs/components/skip-to-content/html/index.html +13 -13
- package/dist/docs/components/skip-to-content/index.html +6 -6
- package/dist/docs/components/skip-to-content/react/index.html +6 -6
- package/dist/docs/components/slider/html/index.html +14 -14
- package/dist/docs/components/slider/index.html +22 -22
- package/dist/docs/components/slider/react/index.html +22 -22
- package/dist/docs/components/spinner/html/index.html +16 -16
- package/dist/docs/components/spinner/index.html +9 -9
- package/dist/docs/components/spinner/react/index.html +6 -6
- package/dist/docs/components/switch/html/index.html +17 -17
- package/dist/docs/components/switch/index.html +12 -12
- package/dist/docs/components/switch/react/index.html +12 -12
- package/dist/docs/components/table/html/index.html +129 -129
- package/dist/docs/components/table/html-demos/index.html +33 -33
- package/dist/docs/components/table/index.html +129 -129
- package/dist/docs/components/tabs/html/index.html +67 -67
- package/dist/docs/components/tabs/html-demos/index.html +13 -13
- package/dist/docs/components/tabs/index.html +77 -77
- package/dist/docs/components/tabs/react/index.html +77 -77
- package/dist/docs/components/text-input/index.html +13 -13
- package/dist/docs/components/text-input/react/index.html +13 -13
- package/dist/docs/components/text-input-group/html/index.html +27 -27
- package/dist/docs/components/text-input-group/index.html +16 -16
- package/dist/docs/components/tile/html-deprecated/index.html +11 -11
- package/dist/docs/components/tile/index.html +23 -23
- package/dist/docs/components/tile/react-deprecated/index.html +26 -26
- package/dist/docs/components/time-picker/index.html +13 -13
- package/dist/docs/components/time-picker/react/index.html +13 -13
- package/dist/docs/components/timestamp/html/index.html +8 -8
- package/dist/docs/components/timestamp/index.html +21 -21
- package/dist/docs/components/timestamp/react/index.html +21 -21
- package/dist/docs/components/title/html/index.html +10 -10
- package/dist/docs/components/title/index.html +4 -4
- package/dist/docs/components/toggle-group/html/index.html +9 -9
- package/dist/docs/components/toggle-group/index.html +18 -18
- package/dist/docs/components/toolbar/html/index.html +55 -55
- package/dist/docs/components/toolbar/html-demos/index.html +12 -12
- package/dist/docs/components/toolbar/index.html +42 -42
- package/dist/docs/components/tooltip/html/index.html +17 -17
- package/dist/docs/components/tooltip/index.html +12 -12
- package/dist/docs/components/tree-view/html/index.html +21 -21
- package/dist/docs/components/tree-view/index.html +23 -23
- package/dist/docs/components/truncate/html/index.html +13 -13
- package/dist/docs/components/truncate/index.html +13 -13
- package/dist/docs/components/wizard/html/index.html +29 -29
- package/dist/docs/components/wizard/html-demos/index.html +22 -22
- package/dist/docs/components/wizard/index.html +32 -32
- package/dist/docs/components/wizard/react-deprecated/index.html +22 -22
- package/dist/docs/layouts/bullseye/html/index.html +11 -11
- package/dist/docs/layouts/bullseye/index.html +11 -11
- package/dist/docs/layouts/flex/html/index.html +87 -87
- package/dist/docs/layouts/flex/index.html +87 -87
- package/dist/docs/layouts/gallery/html/index.html +17 -17
- package/dist/docs/layouts/gallery/index.html +17 -17
- package/dist/docs/layouts/grid/html/index.html +22 -22
- package/dist/docs/layouts/grid/index.html +22 -22
- package/dist/docs/layouts/level/html/index.html +10 -10
- package/dist/docs/layouts/level/index.html +10 -10
- package/dist/docs/layouts/split/html/index.html +13 -13
- package/dist/docs/layouts/split/index.html +13 -13
- package/dist/docs/layouts/stack/html/index.html +12 -12
- package/dist/docs/layouts/stack/index.html +12 -12
- package/dist/docs/patterns/card-view/html-demos/index.html +4 -4
- package/dist/docs/patterns/card-view/index.html +4 -4
- package/dist/docs/patterns/dashboard/html-demos/index.html +4 -4
- package/dist/docs/patterns/dashboard/index.html +4 -4
- package/dist/docs/patterns/primary-detail/html-demos/index.html +17 -17
- package/dist/docs/patterns/primary-detail/index.html +17 -17
- package/dist/docs/utility-classes/accessibility/html/index.html +11 -11
- package/dist/docs/utility-classes/accessibility/index.html +11 -11
- package/dist/docs/utility-classes/alignment/html/index.html +7 -7
- package/dist/docs/utility-classes/alignment/index.html +7 -7
- package/dist/docs/utility-classes/background-color/html/index.html +9 -9
- package/dist/docs/utility-classes/background-color/index.html +9 -9
- package/dist/docs/utility-classes/box-shadow/html/index.html +12 -12
- package/dist/docs/utility-classes/box-shadow/index.html +12 -12
- package/dist/docs/utility-classes/display/html/index.html +18 -18
- package/dist/docs/utility-classes/display/index.html +18 -18
- package/dist/docs/utility-classes/flex/html/index.html +17 -17
- package/dist/docs/utility-classes/flex/index.html +17 -17
- package/dist/docs/utility-classes/float/html/index.html +7 -7
- package/dist/docs/utility-classes/float/index.html +7 -7
- package/dist/docs/utility-classes/sizing/html/index.html +28 -28
- package/dist/docs/utility-classes/sizing/index.html +28 -28
- package/dist/docs/utility-classes/spacing/html/index.html +12 -12
- package/dist/docs/utility-classes/spacing/index.html +12 -12
- package/dist/docs/utility-classes/text/html/index.html +18 -18
- package/dist/docs/utility-classes/text/index.html +18 -18
- package/jest.config.ts +1 -1
- package/package.json +5 -4
- package/src/pages/api/[version]/[section]/[page]/[tab].ts +11 -3
- package/src/pages/api/[version]/[section]/[page].ts +19 -11
- package/src/pages/api/[version]/[section].ts +18 -9
- package/src/pages/api/[version].ts +16 -9
- package/src/pages/api/openapi.json.ts +14 -3
- package/src/pages/api/versions.ts +11 -5
- package/src/pages/apiIndex.json.ts +27 -0
- package/src/utils/apiIndex/fetch.ts +20 -0
- package/src/utils/apiIndex/generate.ts +9 -5
- package/src/utils/apiIndex/get.ts +3 -1
- package/src/utils/getOutputDir.ts +19 -0
- package/src/utils/packageUtils.ts +5 -3
- package/tsconfig.json +9 -4
- package/dist/docs/_worker.js/chunks/apiIndex_rjiPwa_V.mjs +0 -9
- package/dist/docs/_worker.js/manifest_BOIk4wkr.mjs +0 -100
- /package/dist/docs/_worker.js/chunks/{_astro_data-layer-content_BIIrAXF8.mjs → _astro_data-layer-content_DGZXfKa-.mjs} +0 -0
- /package/dist/docs/_worker.js/chunks/{content-modules_BnWiSXLh.mjs → content-modules_Db1avyLw.mjs} +0 -0
|
@@ -42,102 +42,102 @@
|
|
|
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="1xVmU7" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-436"><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="Z25LzV9" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-146"><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-437"><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-438"><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-146"><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-2437" 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="1ai8Vs" prefix="r5" component-url="/_astro/PageToggle.Dnq2xvgl.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-382"><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="2kwvwM" prefix="r7" component-url="/_astro/Toolbar.BmprOKR8.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-128"><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-383"><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-384"><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-128"><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-2103" 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-2104" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
|
|
47
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2105" data-pf-content="true" class="pf-v6-c-content--h3">Basic</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="26m6H5" 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-basic-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2106" data-pf-content="true" class="pf-v6-c-content--h3">With image and action</h3>
|
|
51
51
|
|
|
52
52
|
<astro-island uid="1uR9HR" 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-action-example-1\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <svg height=\"70px\" viewBox=\"0 0 679 158\">\n <title>PF-HorizontalLogo-Color</title>\n <defs>\n <linearGradient\n x1=\"68%\"\n y1=\"2.25860997e-13%\"\n x2=\"32%\"\n y2=\"100%\"\n id=\"linearGradient-card-action-example-1\"\n >\n <stop stop-color=\"#2B9AF3\" offset=\"0%\" />\n <stop\n stop-color=\"#73BCF7\"\n stop-opacity=\"0.502212631\"\n offset=\"100%\"\n />\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g\n transform=\"translate(206.000000, 45.750000)\"\n fill=\"var(--pf-t--global--text--color--regular)\"\n fill-rule=\"nonzero\"\n >\n <path\n d=\"M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z\"\n />\n <path\n d=\"M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z\"\n />\n <path\n d=\"M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z\"\n />\n <path\n d=\"M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z\"\n />\n <path\n d=\"M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z\"\n />\n <path\n d=\"M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z\"\n />\n <path\n d=\"M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z\"\n />\n <polygon\n points=\"342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25\"\n />\n <polygon points=\"399.96 65.25 399.96 2.25 414.54 0 414.54 65.25\" />\n <path\n d=\"M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z\"\n />\n </g>\n <g transform=\"translate(0.000000, 0.000000)\">\n <path\n d=\"M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z\"\n fill=\"#0066CC\"\n />\n <path\n d=\"M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z\"\n fill=\"url(#linearGradient-card-action-example-1)\"\n />\n <path\n d=\"M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z\"\n fill=\"url(#linearGradient-card-action-example-1)\"\n transform=\"translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) \"\n />\n </g>\n </g>\n </svg>\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-action-example-1-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-action-example-1-check\"\n name=\"card-action-example-1-check\"\n aria-labelledby=\"card-action-example-1\"\n />\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__title\">\n <h2\n class=\"pf-v6-c-card__title-text\"\n id=\"card-action-example-1-check-label\"\n >Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2107" data-pf-content="true" class="pf-v6-c-content--h3">With title in head</h3>
|
|
54
54
|
|
|
55
55
|
<astro-island uid="fYo0g" 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-action-example-2\">\n <div class=\"pf-v6-c-card__header\">\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-action-example-2-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-action-example-2-check\"\n name=\"card-action-example-2-check\"\n aria-labelledby=\"card-action-example-2\"\n />\n </div>\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-action-example-2-check-label\"\n >This is a really really really really really really really really really really long title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2108" data-pf-content="true" class="pf-v6-c-content--h3">With only actions in head (no title/footer)</h3>
|
|
57
57
|
|
|
58
58
|
<astro-island uid="ZIQJNz" 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-action-example-3\">\n <div class=\"pf-v6-c-card__header\">\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-action-example-3-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-action-example-3-check\"\n name=\"card-action-example-3-check\"\n aria-labelledby=\"card-action-example-3\"\n />\n </div>\n </div>\n </div>\n <div\n class=\"pf-v6-c-card__body\"\n id=\"card-action-example-3-check-label\"\n >This is the card body. There are only actions in the card head.</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-2109" data-pf-content="true" class="pf-v6-c-content--h3">Card with header that wraps</h3>
|
|
60
60
|
|
|
61
61
|
<astro-island uid="17PLfv" 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 pf-m-wrap\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Primary action</span>\n </button>\n\n <button class=\"pf-v6-c-button pf-m-secondary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Secondary action</span>\n </button>\n\n <button class=\"pf-v6-c-button pf-m-tertiary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Tertiary action</span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__title\">\n <h2\n class=\"pf-v6-c-card__title-text\"\n >This is a longer card title that takes up more space</h2>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">This is the card body</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-2110" data-pf-content="true" class="pf-v6-c-content--h3">Actions with no offset</h3>
|
|
63
63
|
|
|
64
64
|
<astro-island uid="lno80" 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-action-no-offset\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <button class=\"pf-v6-c-button pf-m-primary\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Action</span>\n </button>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <h1\n class=\"pf-v6-c-title pf-m-2xl\"\n id=\"card-action-no-offset-check-label\"\n >This is a card title</h1>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2111" data-pf-content="true" class="pf-v6-c-content--h3">With only image in head</h3>
|
|
66
66
|
|
|
67
67
|
<astro-island uid="Z48E2B" 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-image-head-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__header-main\">\n <svg height=\"70px\" viewBox=\"0 0 679 158\">\n <title>PF-HorizontalLogo-Color</title>\n <defs>\n <linearGradient\n x1=\"68%\"\n y1=\"2.25860997e-13%\"\n x2=\"32%\"\n y2=\"100%\"\n id=\"linearGradient-card-image-head-example\"\n >\n <stop stop-color=\"#2B9AF3\" offset=\"0%\" />\n <stop\n stop-color=\"#73BCF7\"\n stop-opacity=\"0.502212631\"\n offset=\"100%\"\n />\n </linearGradient>\n </defs>\n <g stroke=\"none\" stroke-width=\"1\" fill=\"none\" fill-rule=\"evenodd\">\n <g\n transform=\"translate(206.000000, 45.750000)\"\n fill=\"var(--pf-t--global--text--color--regular)\"\n fill-rule=\"nonzero\"\n >\n <path\n d=\"M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z\"\n />\n <path\n d=\"M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z\"\n />\n <path\n d=\"M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z\"\n />\n <path\n d=\"M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z\"\n />\n <path\n d=\"M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z\"\n />\n <path\n d=\"M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z\"\n />\n <path\n d=\"M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z\"\n />\n <polygon\n points=\"342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25\"\n />\n <polygon points=\"399.96 65.25 399.96 2.25 414.54 0 414.54 65.25\" />\n <path\n d=\"M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z\"\n />\n </g>\n <g transform=\"translate(0.000000, 0.000000)\">\n <path\n d=\"M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z\"\n fill=\"#0066CC\"\n />\n <path\n d=\"M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z\"\n fill=\"url(#linearGradient-card-image-head-example)\"\n />\n <path\n d=\"M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z\"\n fill=\"url(#linearGradient-card-image-head-example)\"\n transform=\"translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) \"\n />\n </g>\n </g>\n </svg>\n </div>\n </div>\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2112" data-pf-content="true" class="pf-v6-c-content--h3">With no footer</h3>
|
|
69
69
|
|
|
70
70
|
<astro-island uid="N5xIg" 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-no-footer-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">This card has no footer</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-2113" data-pf-content="true" class="pf-v6-c-content--h3">With no title</h3>
|
|
72
72
|
|
|
73
73
|
<astro-island uid="Z109Bes" 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-no-title-example\">\n <div class=\"pf-v6-c-card__body\">This card has no title</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2114" data-pf-content="true" class="pf-v6-c-content--h3">With only a content section</h3>
|
|
75
75
|
|
|
76
76
|
<astro-island uid="ZqFXB9" 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-body-example\">\n <div class=\"pf-v6-c-card__body\">Body</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-2115" data-pf-content="true" class="pf-v6-c-content--h3">With multiple body sections</h3>
|
|
78
78
|
|
|
79
79
|
<astro-island uid="ZfKbpi" 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-multiple-body-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2116" data-pf-content="true" class="pf-v6-c-content--h3">With only one body that fills</h3>
|
|
81
81
|
|
|
82
82
|
<astro-island uid="2ub5Se" 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-body-fill-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body pf-m-no-fill\">Body pf-m-no-fill</div>\n <div class=\"pf-v6-c-card__body pf-m-no-fill\">Body pf-m-no-fill</div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2117" data-pf-content="true" class="pf-v6-c-content--h3">Compact</h3>
|
|
84
84
|
|
|
85
85
|
<astro-island uid="1ewcsK" 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 pf-m-compact\" id=\"card-compact-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2118" data-pf-content="true" class="pf-v6-c-content--h3">Large</h3>
|
|
87
87
|
|
|
88
88
|
<astro-island uid="Z269Mbb" 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 pf-m-display-lg\" id=\"card-display-lg-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2119" data-pf-content="true" class="pf-v6-c-content--h3">Selectable</h3>
|
|
90
90
|
|
|
91
91
|
<astro-island uid="ZdBy9I" 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-gallery pf-m-gutter\">\n <div class=\"pf-v6-c-card pf-m-selectable\" id=\"card-selectable-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"card-selectable-example-check\"\n name=\"card-selectable-example-check\"\n aria-labelledby=\"card-selectable-example\"\n />\n <label\n class=\"pf-v6-c-check__label\"\n for=\"card-selectable-example-check\"\n id=\"card-selectable-example-check-label\"\n name=\"card-selectable-example-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-selectable pf-m-disabled\"\n id=\"card-selectable-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n disabled\n id=\"card-selectable-example-disabled-check\"\n name=\"card-selectable-example-disabled-check\"\n aria-labelledby=\"card-selectable-example-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-selectable-example-disabled-check\"\n id=\"card-selectable-example-disabled-check-label\"\n name=\"card-selectable-example-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-selectable-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-selectable pf-m-selected pf-m-disabled\"\n id=\"card-selectable-example-selected-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n checked\n disabled\n id=\"card-selectable-example-selected-disabled-check\"\n name=\"card-selectable-example-selected-disabled-check\"\n aria-labelledby=\"card-selectable-example-selected-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-selectable-example-selected-disabled-check\"\n id=\"card-selectable-example-selected-disabled-check-label\"\n name=\"card-selectable-example-selected-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-selectable-example-selected-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Selected but disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2120" data-pf-content="true" class="pf-v6-c-content--h3">Selectable secondary style</h3>
|
|
93
93
|
|
|
94
94
|
<astro-island uid="Z19aEfm" 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-gallery pf-m-gutter\">\n <div\n class=\"pf-v6-c-card pf-m-selectable pf-m-secondary\"\n id=\"card-selectable-secondary-example\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"card-selectable-secondary-example-check\"\n name=\"card-selectable-secondary-example-check\"\n aria-labelledby=\"card-selectable-secondary-example\"\n />\n <label\n class=\"pf-v6-c-check__label\"\n for=\"card-selectable-secondary-example-check\"\n id=\"card-selectable-secondary-example-check-label\"\n name=\"card-selectable-secondary-example-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-selectable pf-m-disabled pf-m-secondary\"\n id=\"card-selectable-secondary-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n disabled\n id=\"card-selectable-secondary-example-disabled-check\"\n name=\"card-selectable-secondary-example-disabled-check\"\n aria-labelledby=\"card-selectable-secondary-example-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-selectable-secondary-example-disabled-check\"\n id=\"card-selectable-secondary-example-disabled-check-label\"\n name=\"card-selectable-secondary-example-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-selectable-secondary-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary\"\n id=\"card-selectable-secondary-example-selected-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n checked\n disabled\n id=\"card-selectable-secondary-example-selected-disabled-check\"\n name=\"card-selectable-secondary-example-selected-disabled-check\"\n aria-labelledby=\"card-selectable-secondary-example-selected-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-selectable-secondary-example-selected-disabled-check\"\n id=\"card-selectable-secondary-example-selected-disabled-check-label\"\n name=\"card-selectable-secondary-example-selected-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-selectable-secondary-example-selected-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Selected but disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2121" data-pf-content="true" class="pf-v6-c-content--h3">Single selectable</h3>
|
|
96
96
|
|
|
97
97
|
<astro-island uid="1lRCHC" 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-gallery pf-m-gutter\">\n <div class=\"pf-v6-c-card pf-m-selectable\" id=\"card-single-selectable-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-radio\">\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"card-single-selectable-example-radio\"\n name=\"card-single-selectable-example-radio\"\n aria-labelledby=\"card-single-selectable-example\"\n />\n <label\n class=\"pf-v6-c-radio__label\"\n for=\"card-single-selectable-example-radio\"\n id=\"card-single-selectable-example-radio-label\"\n name=\"card-single-selectable-example-radio\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-single-selectable-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-selectable pf-m-disabled\"\n id=\"card-single-selectable-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-radio\">\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"card-single-selectable-example-disabled-radio\"\n name=\"card-single-selectable-example-disabled-radio\"\n aria-labelledby=\"card-single-selectable-example-disabled\"\n disabled\n />\n <label\n class=\"pf-v6-c-radio__label pf-m-disabled\"\n for=\"card-single-selectable-example-disabled-radio\"\n id=\"card-single-selectable-example-disabled-radio-label\"\n name=\"card-single-selectable-example-disabled-radio\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-single-selectable-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-selectable pf-m-selected pf-m-disabled\"\n id=\"card-single-selectable-example-selected-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-radio\">\n <input\n class=\"pf-v6-c-radio__input\"\n type=\"radio\"\n id=\"card-single-selectable-example-selected-disabled-radio\"\n name=\"card-single-selectable-example-selected-disabled-radio\"\n aria-labelledby=\"card-single-selectable-example-selected-disabled\"\n disabled\n checked\n />\n <label\n class=\"pf-v6-c-radio__label pf-m-disabled\"\n for=\"card-single-selectable-example-selected-disabled-radio\"\n id=\"card-single-selectable-example-selected-disabled-radio-label\"\n name=\"card-single-selectable-example-selected-disabled-radio\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-single-selectable-example-selected-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Selected but disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2122" data-pf-content="true" class="pf-v6-c-content--h3">Actionable (button)</h3>
|
|
99
99
|
|
|
100
100
|
<astro-island uid="Z1eRfA9" 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-gallery pf-m-gutter\">\n <div class=\"pf-v6-c-card pf-m-clickable\" id=\"card-actionable-button-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <button\n class=\"pf-v6-c-card__clickable-action\"\n type=\"button\"\n aria-labelledby=\"card-actionable-button-example\"\n ></button>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-actionable-button-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-current\"\n id=\"card-actionable-button-example-clicked\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <button\n class=\"pf-v6-c-card__clickable-action\"\n type=\"button\"\n aria-labelledby=\"card-actionable-button-example-clicked\"\n ></button>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-actionable-button-example-clicked-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Title (clicked)</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-disabled\"\n id=\"card-actionable-button-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <button\n class=\"pf-v6-c-card__clickable-action\"\n type=\"button\"\n aria-labelledby=\"card-actionable-button-example-disabled\"\n disabled\n ></button>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-actionable-button-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2123" data-pf-content="true" class="pf-v6-c-content--h3">Actionable (link)</h3>
|
|
102
102
|
|
|
103
103
|
<astro-island uid="17k2eL" 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-gallery pf-m-gutter\">\n <div class=\"pf-v6-c-card pf-m-clickable\" id=\"card-actionable-link-example\">\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <a\n class=\"pf-v6-c-card__clickable-action\"\n aria-labelledby=\"card-actionable-link-example\"\n href=\"#\"\n ></a>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-actionable-link-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-disabled\"\n id=\"card-actionable-link-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <a\n class=\"pf-v6-c-card__clickable-action pf-m-disabled\"\n tabindex=\"-1\"\n aria-disabled=\"true\"\n aria-labelledby=\"card-actionable-link-example-disabled\"\n href=\"#\"\n ></a>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-actionable-link-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</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-2124" data-pf-content="true" class="pf-v6-c-content--h3">Actionable secondary style</h3>
|
|
105
105
|
|
|
106
106
|
<astro-island uid="ZJpOhM" 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-gallery pf-m-gutter\">\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-secondary\"\n id=\"card-clickable-secondary-example\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-radio pf-m-standalone\">\n <input\n class=\"pf-v6-c-radio__input pf-v6-screen-reader\"\n type=\"radio\"\n id=\"card-clickable-secondary-example-sr-only-radio\"\n name=\"card-clickable-secondary-example-sr-only-radio\"\n aria-labelledby=\"card-clickable-secondary-example\"\n />\n\n <label\n class=\"pf-v6-c-radio__label\"\n for=\"card-clickable-secondary-example-sr-only-radio\"\n id=\"card-clickable-secondary-example-sr-only-radio-label\"\n name=\"card-clickable-secondary-example-sr-only-radio\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-secondary-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-disabled pf-m-secondary\"\n id=\"card-clickable-secondary-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-radio pf-m-standalone\">\n <input\n class=\"pf-v6-c-radio__input pf-v6-screen-reader\"\n type=\"radio\"\n id=\"card-clickable-secondary-example-disabled-sr-only-radio\"\n name=\"card-clickable-secondary-example-disabled-sr-only-radio\"\n aria-labelledby=\"card-clickable-secondary-example-disabled\"\n disabled\n />\n\n <label\n class=\"pf-v6-c-radio__label pf-m-disabled\"\n for=\"card-clickable-secondary-example-disabled-sr-only-radio\"\n id=\"card-clickable-secondary-example-disabled-sr-only-radio-label\"\n name=\"card-clickable-secondary-example-disabled-sr-only-radio\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-secondary-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">Disabled card</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
107
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
107
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2125" data-pf-content="true" class="pf-v6-c-content--h3">Actionable and selectable</h3>
|
|
108
108
|
|
|
109
109
|
<astro-island uid="7IJUP" 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-gallery pf-m-gutter\">\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable\"\n id=\"card-clickable-selectable-example\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"card-clickable-selectable-example-check\"\n name=\"card-clickable-selectable-example-check\"\n aria-labelledby=\"card-clickable-selectable-example\"\n />\n <label\n class=\"pf-v6-c-check__label\"\n for=\"card-clickable-selectable-example-check\"\n id=\"card-clickable-selectable-example-check-label\"\n name=\"card-clickable-selectable-example-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Title</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-current\"\n id=\"card-clickable-selectable-current-example\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"card-clickable-selectable-current-example-check\"\n name=\"card-clickable-selectable-current-example-check\"\n aria-labelledby=\"card-clickable-selectable-current-example\"\n />\n <label\n class=\"pf-v6-c-check__label\"\n for=\"card-clickable-selectable-current-example-check\"\n id=\"card-clickable-selectable-current-example-check-label\"\n name=\"card-clickable-selectable-current-example-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-current-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Current card (clicked)</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-disabled\"\n id=\"card-clickable-selectable-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n disabled\n id=\"card-clickable-selectable-example-disabled-check\"\n name=\"card-clickable-selectable-example-disabled-check\"\n aria-labelledby=\"card-clickable-selectable-example-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-clickable-selectable-example-disabled-check\"\n id=\"card-clickable-selectable-example-disabled-check-label\"\n name=\"card-clickable-selectable-example-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n disabled\n >\n <span class=\"pf-v6-c-button__text\">Disabled card</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled\"\n id=\"card-clickable-selectable-example-selected-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n checked\n disabled\n id=\"card-clickable-selectable-example-selected-disabled-check\"\n name=\"card-clickable-selectable-example-selected-disabled-check\"\n aria-labelledby=\"card-clickable-selectable-example-selected-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-clickable-selectable-example-selected-disabled-check\"\n id=\"card-clickable-selectable-example-selected-disabled-check-label\"\n name=\"card-clickable-selectable-example-selected-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-example-selected-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n disabled\n >\n <span class=\"pf-v6-c-button__text\">Selected but disabled card</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
110
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
110
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2126" data-pf-content="true" class="pf-v6-c-content--h3">Actionable and selectable secondary style</h3>
|
|
111
111
|
|
|
112
112
|
<astro-island uid="2d59So" 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-gallery pf-m-gutter\">\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-secondary\"\n id=\"card-clickable-selectable-secondary-example\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"card-clickable-selectable-secondary-example-check\"\n name=\"card-clickable-selectable-secondary-example-check\"\n aria-labelledby=\"card-clickable-selectable-secondary-example\"\n />\n <label\n class=\"pf-v6-c-check__label\"\n for=\"card-clickable-selectable-secondary-example-check\"\n id=\"card-clickable-selectable-secondary-example-check-label\"\n name=\"card-clickable-selectable-secondary-example-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-secondary-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Title</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-current pf-m-secondary\"\n id=\"card-clickable-selectable-secondary-current-example\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n id=\"card-clickable-selectable-secondary-current-example-check\"\n name=\"card-clickable-selectable-secondary-current-example-check\"\n aria-labelledby=\"card-clickable-selectable-secondary-current-example\"\n />\n <label\n class=\"pf-v6-c-check__label\"\n for=\"card-clickable-selectable-secondary-current-example-check\"\n id=\"card-clickable-selectable-secondary-current-example-check-label\"\n name=\"card-clickable-selectable-secondary-current-example-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-secondary-current-example-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button class=\"pf-v6-c-button pf-m-inline pf-m-link\" type=\"button\">\n <span class=\"pf-v6-c-button__text\">Current card (clicked)</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-disabled pf-m-secondary\"\n id=\"card-clickable-selectable-secondary-example-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n disabled\n id=\"card-clickable-selectable-secondary-example-disabled-check\"\n name=\"card-clickable-selectable-secondary-example-disabled-check\"\n aria-labelledby=\"card-clickable-selectable-secondary-example-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-clickable-selectable-secondary-example-disabled-check\"\n id=\"card-clickable-selectable-secondary-example-disabled-check-label\"\n name=\"card-clickable-selectable-secondary-example-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-secondary-example-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n disabled\n >\n <span class=\"pf-v6-c-button__text\">Disabled card</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n\n <div\n class=\"pf-v6-c-card pf-m-clickable pf-m-selectable pf-m-selected pf-m-disabled pf-m-secondary\"\n id=\"card-clickable-selectable-secondary-example-selected-disabled\"\n >\n <div class=\"pf-v6-c-card__header\">\n <div class=\"pf-v6-c-card__actions pf-m-no-offset\">\n <div class=\"pf-v6-c-card__selectable-actions\">\n <div class=\"pf-v6-c-check\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n checked\n disabled\n id=\"card-clickable-selectable-secondary-example-selected-disabled-check\"\n name=\"card-clickable-selectable-secondary-example-selected-disabled-check\"\n aria-labelledby=\"card-clickable-selectable-secondary-example-selected-disabled\"\n />\n <label\n class=\"pf-v6-c-check__label pf-m-disabled\"\n for=\"card-clickable-selectable-secondary-example-selected-disabled-check\"\n id=\"card-clickable-selectable-secondary-example-selected-disabled-check-label\"\n name=\"card-clickable-selectable-secondary-example-selected-disabled-check\"\n ></label>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <div\n class=\"pf-v6-c-card__title\"\n id=\"card-clickable-selectable-secondary-example-selected-disabled-title\"\n >\n <h2 class=\"pf-v6-c-card__title-text\">\n <button\n class=\"pf-v6-c-button pf-m-inline pf-m-link\"\n type=\"button\"\n disabled\n >\n <span class=\"pf-v6-c-button__text\">Selected but disabled card</span>\n </button>\n </h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
113
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
113
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2127" data-pf-content="true" class="pf-v6-c-content--h3">Secondary</h3>
|
|
114
114
|
|
|
115
115
|
<astro-island uid="ZcPWyK" 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 pf-m-secondary\" id=\"card-secondary-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
116
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
116
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2128" data-pf-content="true" class="pf-v6-c-content--h3">Plain</h3>
|
|
117
117
|
|
|
118
118
|
<astro-island uid="Zjl4IB" 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 pf-m-plain\" id=\"card-plain-example\">\n <div class=\"pf-v6-c-card__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
119
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
119
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2129" data-pf-content="true" class="pf-v6-c-content--h3">Expandable</h3>
|
|
120
120
|
|
|
121
121
|
<astro-island uid="1la5E" 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-expandable-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-expandable-example-toggle\"\n type=\"button\"\n aria-labelledby=\"card-expandable-example-title card-expandable-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-expandable-example-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-expandable-example-check\"\n name=\"card-expandable-example-check\"\n aria-labelledby=\"card-expandable-example\"\n />\n </div>\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-expandable-example-title\"\n >Title</h2>\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
122
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
122
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2130" data-pf-content="true" class="pf-v6-c-content--h3">Expandable with image</h3>
|
|
123
123
|
|
|
124
124
|
<astro-island uid="Z1y7SQS" 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-expandable-image-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-expandable-image-example-toggle\"\n type=\"button\"\n aria-labelledby=\"card-expandable-image-example-title card-expandable-image-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__header-main\">\n <img\n src=\"/assets/images/PF-IconLogo.svg\"\n alt=\"PatternFly logo\"\n width=\"27px\"\n />\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-expandable-image-example-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-expandable-image-example-check\"\n name=\"card-expandable-image-example-check\"\n aria-labelledby=\"card-expandable-image-example\"\n />\n </div>\n </div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
125
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
125
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2131" data-pf-content="true" class="pf-v6-c-content--h3">Expanded</h3>
|
|
126
126
|
|
|
127
127
|
<astro-island uid="h8DDR" 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 pf-m-expanded\" id=\"card-expanded-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-expanded-example-toggle\"\n type=\"button\"\n aria-labelledby=\"card-expanded-example-title card-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-expanded-example-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-expanded-example-check\"\n name=\"card-expanded-example-check\"\n aria-labelledby=\"card-expanded-example\"\n />\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-main\">\n <h2\n class=\"pf-v6-c-card__title-text\"\n id=\"card-expanded-example-title\"\n >Title</h2>\n </div>\n </div>\n <div class=\"pf-v6-c-card__expandable-content\">\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n </div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
128
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
128
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2132" data-pf-content="true" class="pf-v6-c-content--h3">Full height card</h3>
|
|
129
129
|
|
|
130
130
|
<astro-island uid="2sQT0m" 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 pf-m-full-height\" id=\"card-full-height-example\">\n <div class=\"pf-v6-c-card__header\">\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-full-height-example-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-full-height-example-check\"\n name=\"card-full-height-example-check\"\n aria-labelledby=\"card-full-height-example\"\n />\n </div>\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-full-height-example-title&quot;\"\n >Title</h2>\n </div>\n </div>\n </div>\n <div class=\"pf-v6-c-card__body\">Body</div>\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
131
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
131
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2133" data-pf-content="true" class="pf-v6-c-content--h3">Expandable toggle on right</h3>
|
|
132
132
|
|
|
133
133
|
<astro-island uid="5mDtr" 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-toggle-on-right-example\">\n <div class=\"pf-v6-c-card__header pf-m-toggle-right\">\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-toggle-on-right-example-menu-toggle-kebab\"\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 class=\"pf-v6-c-check pf-m-standalone\">\n <input\n class=\"pf-v6-c-check__input\"\n type=\"checkbox\"\n aria-label=\"Standalone check\"\n id=\"card-toggle-on-right-example-check\"\n name=\"card-toggle-on-right-example-check\"\n aria-labelledby=\"card-toggle-on-right-example\"\n />\n </div>\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-toggle-on-right-example-title\"\n >Title</h2>\n </div>\n </div>\n <div class=\"pf-v6-c-card__header-toggle\">\n <button\n class=\"pf-v6-c-button pf-m-plain\"\n id=\"card-toggle-on-right-example-toggle\"\n type=\"button\"\n aria-labelledby=\"card-toggle-on-right-example-title card-toggle-on-right-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>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
134
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
134
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2134" data-pf-content="true" class="pf-v6-c-content--h3">Card with dividers between sections</h3>
|
|
135
135
|
|
|
136
136
|
<astro-island uid="bzQtI" 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__title\">\n <h2 class=\"pf-v6-c-card__title-text\">Title</h2>\n </div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__body\">Body</div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__body\">Body</div>\n <hr class=\"pf-v6-c-divider\" />\n <div class=\"pf-v6-c-card__footer\">Footer</div>\n</div>\n"]}" ssr client="only" opts="{"name":"LiveExampleBase","value":"react"}"></astro-island>
|
|
137
|
-
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
138
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
139
|
-
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
140
|
-
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
137
|
+
<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2135" data-pf-content="true" class="pf-v6-c-content--h2">Documentation</h2>
|
|
138
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2136" data-pf-content="true" class="pf-v6-c-content--h3">Overview</h3>
|
|
139
|
+
<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2137" data-pf-content="true" class="pf-v6-c-content--p">A card is a generic rectangular container that can be used to build other components. Use a default card for regular page content and the compact variation for dashboard or small cards.</p>
|
|
140
|
+
<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2138" data-pf-content="true" class="pf-v6-c-content--h3">Usage</h3>
|
|
141
141
|
|
|
142
142
|
|
|
143
143
|
|
|
@@ -298,6 +298,6 @@
|
|
|
298
298
|
|
|
299
299
|
|
|
300
300
|
|
|
301
|
-
<table><thead><tr><th>Class</th><th>Applied</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-card</code></td><td><code><div></code></td><td>Creates a card component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-card__title</code></td><td><code><div></code></td><td>Creates a card title container.</td></tr><tr><td><code>.pf-v6-c-card__title-text</code></td><td><code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code>, <code><h6></code>, <code><div></code></td><td>Creates a card title text element.</td></tr><tr><td><code>.pf-v6-c-card__body</code></td><td><code><div></code></td><td>Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple <code>.pf-v6-c-card__body</code> elements.</td></tr><tr><td><code>.pf-v6-c-card__footer</code></td><td><code><div></code></td><td>Creates the footer of a card.</td></tr><tr><td><code>.pf-v6-c-card__header</code></td><td><code><div></code></td><td>Creates the header of the card where images, actions, and/or the card title can go.</td></tr><tr><td><code>.pf-v6-c-card__header-toggle</code></td><td><code><div></code></td><td>Creates the expandable card toggle.</td></tr><tr><td><code>.pf-v6-c-card__header-toggle-icon</code></td><td><code><span></code></td><td>Creates the expandable card toggle icon.</td></tr><tr><td><code>.pf-v6-c-card__actions</code></td><td><code><div></code></td><td>Creates an actions element to be used in the card header.</td></tr><tr><td><code>.pf-v6-c-card__selectable-actions</code></td><td><code><div></code></td><td>Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable.</td></tr><tr><td><code>.pf-v6-c-card__header-main</code></td><td><code><div></code></td><td>Creates a wrapper element to be used in the card header when using an image, logo, or text. <strong>Required if <code>.pf-v6-c-card__header</code> has content outside of a card header toggle or card header actions</strong></td></tr><tr><td><code>.pf-v6-c-card__expandable-content</code></td><td><code><div></code></td><td>Creates the expandable card’s expandable content.</td></tr><tr><td><code>.pf-v6-c-card__sr-input</code></td><td><code><input></code></td><td>Creates an input which, when focused, makes a following <code>.pf-v6-c-card</code> appear focused.</td></tr><tr><td><code>.pf-m-compact</code></td><td><code>.pf-v6-c-card</code></td><td>Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred.</td></tr><tr><td><code>.pf-m-display-lg</code></td><td><code>.pf-v6-c-card</code></td><td>Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases.</td></tr><tr><td><code>.pf-m-wrap</code></td><td><code>.pf-v6-c-card__header</code></td><td>Modifies the card header to wrap its children.</td></tr><tr><td><code>.pf-m-no-fill</code></td><td><code>.pf-v6-c-card__body</code></td><td>Sets a <code>.pf-v6-c-card__body</code> not to fill the available space in <code>.pf-v6-c-card</code>. <code>.pf-m-no-fill</code> can be added to multiple card bodies.</td></tr><tr><td><code>.pf-m-selectable</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card to be selectable.</td></tr><tr><td><code>.pf-m-clickable</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card to be clickable.</td></tr><tr><td><code>.pf-m-selected</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the <code>.pf-v6-c-card__input</code>.</td></tr><tr><td><code>.pf-m-current</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card that is both clickable and selectable for clicked state styling.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card so it is not selectable or clickable.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have secondary styling.</td></tr><tr><td><code>.pf-m-flat</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have a border instead of a shadow. <code>.pf-m-flat</code> is for use in layouts where cards are against a white background.</td></tr><tr><td><code>.pf-m-rounded</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have rounded corners.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have no box shadow and no background color.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card for the expanded state.</td></tr><tr><td><code>.pf-m-toggle-right</code></td><td><code>.pf-v6-c-card__header</code></td><td>Modifies the expandable card header toggle to be positioned at flex-end.</td></tr><tr><td><code>.pf-m-full-height</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to full height of its parent.</td></tr><tr><td><code>.pf-m-no-offset</code></td><td><code>.pf-v6-c-card__actions</code></td><td>Removes the negative vertical margins on the actions element intended to align the action content with the card title.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-
|
|
301
|
+
<table><thead><tr><th>Class</th><th>Applied</th><th>Outcome</th></tr></thead><tbody><tr><td><code>.pf-v6-c-card</code></td><td><code><div></code></td><td>Creates a card component. <strong>Required</strong></td></tr><tr><td><code>.pf-v6-c-card__title</code></td><td><code><div></code></td><td>Creates a card title container.</td></tr><tr><td><code>.pf-v6-c-card__title-text</code></td><td><code><h1></code>, <code><h2></code>, <code><h3></code>, <code><h4></code>, <code><h5></code>, <code><h6></code>, <code><div></code></td><td>Creates a card title text element.</td></tr><tr><td><code>.pf-v6-c-card__body</code></td><td><code><div></code></td><td>Creates the body of a card. By default, the body element fills the available space in the card. You can use multiple <code>.pf-v6-c-card__body</code> elements.</td></tr><tr><td><code>.pf-v6-c-card__footer</code></td><td><code><div></code></td><td>Creates the footer of a card.</td></tr><tr><td><code>.pf-v6-c-card__header</code></td><td><code><div></code></td><td>Creates the header of the card where images, actions, and/or the card title can go.</td></tr><tr><td><code>.pf-v6-c-card__header-toggle</code></td><td><code><div></code></td><td>Creates the expandable card toggle.</td></tr><tr><td><code>.pf-v6-c-card__header-toggle-icon</code></td><td><code><span></code></td><td>Creates the expandable card toggle icon.</td></tr><tr><td><code>.pf-v6-c-card__actions</code></td><td><code><div></code></td><td>Creates an actions element to be used in the card header.</td></tr><tr><td><code>.pf-v6-c-card__selectable-actions</code></td><td><code><div></code></td><td>Creates an element to hold a checkbox or radio and the related label used to make a card selectable or clickable.</td></tr><tr><td><code>.pf-v6-c-card__header-main</code></td><td><code><div></code></td><td>Creates a wrapper element to be used in the card header when using an image, logo, or text. <strong>Required if <code>.pf-v6-c-card__header</code> has content outside of a card header toggle or card header actions</strong></td></tr><tr><td><code>.pf-v6-c-card__expandable-content</code></td><td><code><div></code></td><td>Creates the expandable card’s expandable content.</td></tr><tr><td><code>.pf-v6-c-card__sr-input</code></td><td><code><input></code></td><td>Creates an input which, when focused, makes a following <code>.pf-v6-c-card</code> appear focused.</td></tr><tr><td><code>.pf-m-compact</code></td><td><code>.pf-v6-c-card</code></td><td>Creates a compact variation of the card component that involves smaller font sizes and spacing. This variation is for use on dashboards and where a smaller card is preferred.</td></tr><tr><td><code>.pf-m-display-lg</code></td><td><code>.pf-v6-c-card</code></td><td>Creates a large variation of the card component that involves larger font sizes and spacing. This variation is for marketing use cases.</td></tr><tr><td><code>.pf-m-wrap</code></td><td><code>.pf-v6-c-card__header</code></td><td>Modifies the card header to wrap its children.</td></tr><tr><td><code>.pf-m-no-fill</code></td><td><code>.pf-v6-c-card__body</code></td><td>Sets a <code>.pf-v6-c-card__body</code> not to fill the available space in <code>.pf-v6-c-card</code>. <code>.pf-m-no-fill</code> can be added to multiple card bodies.</td></tr><tr><td><code>.pf-m-selectable</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card to be selectable.</td></tr><tr><td><code>.pf-m-clickable</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card to be clickable.</td></tr><tr><td><code>.pf-m-selected</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a selectable card for selected state styling. Can be used in addition to indicating selection via the <code>.pf-v6-c-card__input</code>.</td></tr><tr><td><code>.pf-m-current</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card that is both clickable and selectable for clicked state styling.</td></tr><tr><td><code>.pf-m-disabled</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies a card so it is not selectable or clickable.</td></tr><tr><td><code>.pf-m-secondary</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have secondary styling.</td></tr><tr><td><code>.pf-m-flat</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have a border instead of a shadow. <code>.pf-m-flat</code> is for use in layouts where cards are against a white background.</td></tr><tr><td><code>.pf-m-rounded</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have rounded corners.</td></tr><tr><td><code>.pf-m-plain</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to have no box shadow and no background color.</td></tr><tr><td><code>.pf-m-expanded</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card for the expanded state.</td></tr><tr><td><code>.pf-m-toggle-right</code></td><td><code>.pf-v6-c-card__header</code></td><td>Modifies the expandable card header toggle to be positioned at flex-end.</td></tr><tr><td><code>.pf-m-full-height</code></td><td><code>.pf-v6-c-card</code></td><td>Modifies the card to full height of its parent.</td></tr><tr><td><code>.pf-m-no-offset</code></td><td><code>.pf-v6-c-card__actions</code></td><td>Removes the negative vertical margins on the actions element intended to align the action content with the card title.</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item"><div class="pf-v6-l-flex pf-m-space-items-sm pf-m-align-items-center"><div class=""><h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-2102" id="css-variables" tabindex="-1" data-pf-content="true" class="pf-v6-c-content--h2 pf-m-editorial ws-heading pf-v6-c-content--h2"><a href="#css-variables" class="ws-heading-anchor" tabindex="-1"><svg class="pf-v6-svg ws-heading-anchor-icon" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em" style="vertical-align:middle"><path d="M326.612 185.391c59.747 59.809 58.927 155.698.36 214.59-.11.12-.24.25-.36.37l-67.2 67.2c-59.27 59.27-155.699 59.262-214.96 0-59.27-59.26-59.27-155.7 0-214.96l37.106-37.106c9.84-9.84 26.786-3.3 27.294 10.606.648 17.722 3.826 35.527 9.69 52.721 1.986 5.822.567 12.262-3.783 16.612l-13.087 13.087c-28.026 28.026-28.905 73.66-1.155 101.96 28.024 28.579 74.086 28.749 102.325.51l67.2-67.19c28.191-28.191 28.073-73.757 0-101.83-3.701-3.694-7.429-6.564-10.341-8.569a16.037 16.037 0 0 1-6.947-12.606c-.396-10.567 3.348-21.456 11.698-29.806l21.054-21.055c5.521-5.521 14.182-6.199 20.584-1.731a152.482 152.482 0 0 1 20.522 17.197zM467.547 44.449c-59.261-59.262-155.69-59.27-214.96 0l-67.2 67.2c-.12.12-.25.25-.36.37-58.566 58.892-59.387 154.781.36 214.59a152.454 152.454 0 0 0 20.521 17.196c6.402 4.468 15.064 3.789 20.584-1.731l21.054-21.055c8.35-8.35 12.094-19.239 11.698-29.806a16.037 16.037 0 0 0-6.947-12.606c-2.912-2.005-6.64-4.875-10.341-8.569-28.073-28.073-28.191-73.639 0-101.83l67.2-67.19c28.239-28.239 74.3-28.069 102.325.51 27.75 28.3 26.872 73.934-1.155 101.96l-13.087 13.087c-4.35 4.35-5.769 10.79-3.783 16.612 5.864 17.194 9.042 34.999 9.69 52.721.509 13.906 17.454 20.446 27.294 10.606l37.106-37.106c59.271-59.259 59.271-155.699.001-214.959z"></path></svg></a>
|
|
302
302
|
CSS variables
|
|
303
303
|
</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="wI4XI" component-url="/_astro/CSSTable.DRfZMeKo.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{"autoLinkHeader":[0,false],"cssPrefix":[0,"pf-v6-c-card"]}" ssr client="only" opts="{"name":"CSSTableComponent","value":"react"}"></astro-island></div></div></div></div> </div></section> </div></section> </main> </div> </div> <script type="module">try{localStorage.getItem("theme-preference")==="dark"&&document.documentElement.classList.add("pf-v6-theme-dark")}catch(e){console.error("Failed to set initial theme:",e)}</script></body></html>
|