npm - @patternfly/patternfly-doc-core - Versions diffs - 1.11.1 → 1.12.1 - Mend

@patternfly/patternfly-doc-core 1.11.1 → 1.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (461) hide show

package/dist/docs/components/calendar-month/react/index.html ADDED Viewed

@@ -0,0 +1,55 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	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"],
+			[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"],
+			[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="1n9kTp" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;: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-37"><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="Z36Sff" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;: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-13"><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-38"><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-39"><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-13"><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="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" 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/calendar-month/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-150" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-151" data-pf-content="true" class="pf-v6-c-content--h3">Selectable date</h3>
+<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="1V3B8d" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { CalendarMonth, Title, CalendarMonthInlineProps } from &#39;@patternfly/react-core&#39;;\n\nexport const CalendarMonthSelectableDate: React.FunctionComponent = () =&gt; {\n  const [date, setDate] = useState(new Date(2020, 10, 24));\n\n  const onMonthChange = (\n    _event: React.MouseEvent | React.ChangeEvent | React.FormEvent&lt;HTMLInputElement&gt; | undefined,\n    newDate: Date\n  ) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);\n  };\n\n  const inlineProps: CalendarMonthInlineProps = {\n    component: &#39;article&#39;,\n    title: (\n      &lt;Title headingLevel=\&quot;h4\&quot; id=\&quot;favorite-date\&quot;&gt;\n        Select your favorite date\n      &lt;/Title&gt;\n    ),\n    ariaLabelledby: &#39;favorite-date&#39;\n  };\n\n  return (\n    &lt;&gt;\n      &lt;CalendarMonth\n        date={date}\n        onChange={(_event: React.MouseEvent&lt;HTMLButtonElement, MouseEvent&gt;, date: Date) =&gt; setDate(date)}\n        onMonthChange={onMonthChange}\n        inlineProps={inlineProps}\n      /&gt;\n      &lt;pre&gt;Selected date: {date.toString()}&lt;/pre&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-152" data-pf-content="true" class="pf-v6-c-content--h3">Date range</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-154" data-pf-content="true" class="pf-v6-c-content--p">In this example, there are 2 dates selected: a range start date (via the <code>rangeStart</code> prop) and a range end date (via the <code>date</code> prop). Additionally, any dates prior to the range start date are disabled by passing in an array of functions to the <code>validators</code> prop. In this case a single function is passed in, which checks whether a date is greater than or equal to the range start date.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-155" data-pf-content="true" class="pf-v6-c-content--p">For this example, these dates are static and cannot be updated. For an interactive demo, see our <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-153" data-pf-content="true" class="pf-v6-c-content--a">Date picker demos</a>.</p>
+<astro-island uid="1eaBRU" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { CalendarMonth, Title, CalendarMonthInlineProps } from &#39;@patternfly/react-core&#39;;\n\nexport const CalendarMonthDateRange: React.FunctionComponent = () =&gt; {\n  const startDate = new Date(2020, 10, 11);\n  const endDate = new Date(2020, 10, 24);\n  const disablePreStartDates = (date: Date) =&gt; date &gt;= startDate;\n\n  const inlineProps: CalendarMonthInlineProps = {\n    component: &#39;article&#39;,\n    title: (\n      &lt;Title id=\&quot;display-range\&quot; headingLevel=\&quot;h4\&quot;&gt;\n        Calendar month displaying a range\n      &lt;/Title&gt;\n    ),\n    ariaLabelledby: &#39;display-range&#39;\n  };\n\n  return (\n    &lt;CalendarMonth\n      validators={[disablePreStartDates]}\n      date={endDate}\n      rangeStart={startDate}\n      inlineProps={inlineProps}\n    /&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="1CBv7K" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;CalendarMonth&quot;],[0,&quot;CalendarFormat&quot;],[0,&quot;CalendarMonthInlineProps&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/calendar-month/react/&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><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-149" 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>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="Z2lqin8" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-calendar-month&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></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>

package/dist/docs/components/card/index.html ADDED Viewed

@@ -0,0 +1,159 @@
+<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><script type="module">const n=e=>{requestAnimationFrame(()=>{document.documentElement.classList.toggle("pf-v6-theme-dark",e==="dark")})};document.addEventListener("astro:before-swap",()=>{const e=localStorage.getItem("theme-preference");n(e||"light")});const o=e=>{const t=document.querySelector(e);t&&t.scrollIntoView({behavior:"smooth"})};document.addEventListener("DOMContentLoaded",()=>{if(window.location.hash){const e=window.location.hash;history.replaceState(null,""," "),setTimeout(()=>{o(e),history.replaceState(null,"",e)},500)}});window.addEventListener("hashchange",()=>{window.location.hash&&o(window.location.hash)});</script><meta charset="utf-8"><link rel="icon" type="image/svg+xml" href="/favicon.svg"><meta name="viewport" content="width=device-width"><meta name="generator" content="Astro v5.9.3"><title>Astro</title><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><script type="module" src="/_astro/ClientRouter.astro_astro_type_script_index_0_lang.CtSceO8m.js"></script><link rel="stylesheet" href="/_astro/_page_.BG_fQ4i5.css">
+<link rel="stylesheet" href="/_astro/AutoLinkHeader.Chv_bGyU.css">
+<link rel="stylesheet" href="/_astro/PropsTables.D6ZI3FGj.css">
+<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
+<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css"><style>[data-astro-transition-scope="astro-iidcp2e2-1"] { view-transition-name: astro-iidcp2e2-1; }@layer astro { ::view-transition-old(astro-iidcp2e2-1) { animation: none; opacity: 0; mix-blend-mode: normal; }::view-transition-new(astro-iidcp2e2-1) { animation: none; mix-blend-mode: normal; }::view-transition-group(astro-iidcp2e2-1) { animation: none } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-iidcp2e2-1"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-iidcp2e2-1"] { animation: none; mix-blend-mode: normal; }</style><style>[data-astro-transition-scope="astro-xikxfxwm-3"] { view-transition-name: astro-xikxfxwm-3; }@layer astro { ::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back]::view-transition-old(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back]::view-transition-new(astro-xikxfxwm-3) {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; } }[data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeIn; }[data-astro-transition=back][data-astro-transition-fallback="old"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="old"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	animation-name: astroFadeOut; }[data-astro-transition=back][data-astro-transition-fallback="new"] [data-astro-transition-scope="astro-xikxfxwm-3"],
+			[data-astro-transition=back][data-astro-transition-fallback="new"][data-astro-transition-scope="astro-xikxfxwm-3"] {
+	animation-duration: 180ms;
+	animation-timing-function: cubic-bezier(0.76, 0, 0.24, 1);
+	animation-fill-mode: both;
+	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"],
+			[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"],
+			[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="1vznhv" prefix="r5" component-url="/_astro/PageToggle.Dnbvoa7R.js" component-export="PageToggle" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;data-astro-transition-persist&quot;:[0,&quot;astro-u5p5alki-2&quot;]}" ssr client="idle" opts="{&quot;name&quot;:&quot;PageToggle&quot;,&quot;value&quot;: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-298"><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="1JVEB9" prefix="r7" component-url="/_astro/Toolbar.BNjGRsAQ.js" component-export="Toolbar" renderer-url="/_astro/client.DN8ES6L5.js" props="{}" ssr client="idle" opts="{&quot;name&quot;:&quot;ReactToolbar&quot;,&quot;value&quot;: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-100"><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-299"><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-300"><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-100"><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="193Wv7" component-url="/_astro/Navigation.B2RHZcqO.js" component-export="Navigation" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;navData&quot;:[1,[[1,[[0,{&quot;id&quot;:[0,&quot;src/components/aboutmodal/examples/aboutmodal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;About modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/accordion/examples/accordion&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Accordion&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/actionlist/examples/actionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Action list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/alert/examples/alert&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Alert&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/avatar/examples/avatar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Avatar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backtotop/examples/backtotop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Back to top&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backdrop/examples/backdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Backdrop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/backgroundimage/examples/backgroundimage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Background image&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/badge/examples/badge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/banner/examples/banner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Banner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/brand/examples/brand&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Brand&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/breadcrumb/examples/breadcrumb&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Breadcrumb&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/button/examples/button&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Button&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/calendarmonth/examples/calendarmonth&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Calendar month&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/card/examples/card&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Card&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/checkbox/examples/checkbox&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Checkbox&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/chip/examples/chip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Chip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/clipboardcopy/examples/clipboardcopy&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Clipboard copy&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/codeblock/examples/codeblock&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Code block&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/content/examples/content&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datalist/examples/datalist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Data list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/datepicker/examples/datepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Date picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/descriptionlist/examples/descriptionlist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Description list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/divider/examples/divider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Divider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/dragdrop/examples/dragdrop&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drag and drop&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/drawer/examples/drawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/dropdown/examples/dropdown&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dropdown&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/duallistselector/examples/duallistselector&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Dual list selector&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/emptystate/examples/emptystate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Empty state&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/expandablesection/examples/expandablesection&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Expandable section&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/form/examples/form&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/formselect/examples/formselect&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Form select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/helpertext/examples/helpertext&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Helper text&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/hint/examples/hint&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Hint&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/icon/examples/icon&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Icon&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/inputgroup/examples/inputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/jumplinks/examples/jumplinks&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Jump links&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/label/examples/label&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Label&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/list/examples/list&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;List&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/loginpage/examples/loginpage&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Login page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/masthead/examples/masthead&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Masthead&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menu/examples/menu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/menutoggle/examples/menutoggle&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Menu toggle&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/modal/examples/modal&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Modal&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/multiplefileupload/examples/multiplefileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Multiple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/nav/examples/nav&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Navigation&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationbadge/examples/notificationbadge&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification badge&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/notificationdrawer/examples/notificationdrawer&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Notification drawer&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/numberinput/examples/numberinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Number input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/overflowmenu/examples/overflowmenu&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Overflow menu&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/page/examples/page&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Page&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/pagination/examples/pagination&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Pagination&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/panel/examples/panel&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Panel&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/popover/examples/popover&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Popover&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progress/examples/progress&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/progressstepper/examples/progressstepper&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Progress stepper&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/radio/examples/radio&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Radio&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/searchinput/examples/searchinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Search input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/select/examples/select&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Select&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/sidebar/examples/sidebar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Sidebar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/fileupload/examples/fileupload&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple file upload&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/simplelist/examples/simplelist&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Simple list&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skeleton/examples/skeleton&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skeleton&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/skiptocontent/examples/skiptocontent&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Skip to content&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/slider/examples/slider&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Slider&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/spinner/examples/spinner&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Spinner&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/switch/examples/switch&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Switch&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tabs/examples/tabs&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tabs&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textarea/examples/textarea&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text area&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinput/examples/textinput&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/textinputgroup/examples/textinputgroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Text input group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/deprecated/components/tile/examples/tile&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tile&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timepicker/examples/timepicker&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Time picker&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/timestamp/examples/timestamp&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Timestamp&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/title/examples/title&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Title&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/togglegroup/examples/togglegroup&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toggle group&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/toolbar/examples/toolbar&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Toolbar&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/tooltip/examples/tooltip&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tooltip&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/treeview/examples/treeview&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Tree view&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/truncate/examples/truncate&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Truncate&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}],[0,{&quot;id&quot;:[0,&quot;src/components/wizard/examples/wizard&quot;],&quot;data&quot;:[0,{&quot;id&quot;:[0,&quot;Wizard&quot;],&quot;section&quot;:[0,&quot;components&quot;],&quot;sortValue&quot;:[0]}]}]]]]],&quot;data-astro-transition-scope&quot;:[0,&quot;astro-xikxfxwm-3&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;ReactNav&quot;,&quot;value&quot;:&quot;react&quot;}" 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 pf-m-current"> <a class="pf-v6-c-tabs__link" href="/components/card/react"> React </a> </li> </ul> </div> </div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1794" data-pf-content="true" class="pf-v6-c-content--h2">Examples</h2>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1795" data-pf-content="true" class="pf-v6-c-content--h3">Basic cards</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1827" data-pf-content="true" class="pf-v6-c-content--p">Basic cards typically have a <code>&lt;CardTitle&gt;</code>, <code>&lt;CardBody&gt;</code> and <code>&lt;CardFooter&gt;</code>. You may omit these components as needed, but it is recommended to at least include a <code>&lt;CardBody&gt;</code> to provide details about the card item.</p>
+<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="1C9OJ0" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Card, CardTitle, CardBody, CardFooter } from &#39;@patternfly/react-core&#39;;\n\nexport const CardBasic: React.FunctionComponent = () =&gt; (\n  &lt;Card ouiaId=\&quot;BasicCard\&quot;&gt;\n    &lt;CardTitle&gt;Title&lt;/CardTitle&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n  &lt;/Card&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1796" data-pf-content="true" class="pf-v6-c-content--h3">Secondary cards</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1828" data-pf-content="true" class="pf-v6-c-content--p">You can apply secondary background color styling to a card by setting the <code>variant</code> property to <code>secondary</code>.</p>
+<astro-island uid="Z1RFQki" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Card, CardTitle, CardBody, CardFooter } from &#39;@patternfly/react-core&#39;;\n\nexport const CardSecondary: React.FunctionComponent = () =&gt; (\n  &lt;Card ouiaId=\&quot;SecondaryCard\&quot; variant=\&quot;secondary\&quot;&gt;\n    &lt;CardTitle&gt;Title&lt;/CardTitle&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n  &lt;/Card&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1797" data-pf-content="true" class="pf-v6-c-content--h3">Modifiers</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1798" data-pf-content="true" class="pf-v6-c-content--p">You can further modify the styling of the card’s content by using the properties outlined below. In this example, you can enable each modifier by selecting its respective checkbox.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1829" data-pf-content="true" class="pf-v6-c-content--p">Most modifiers can be used in combination with each other, except for <code>isCompact</code> and <code>isLarge</code>, since they are contradictory.</p>
+<astro-island uid="ZaQvmw" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport { Card, CardTitle, CardBody, CardFooter, Checkbox } from &#39;@patternfly/react-core&#39;;\n\nexport const CardWithModifiers: React.FunctionComponent = () =&gt; {\n  const mods = [&#39;isCompact&#39;, &#39;isLarge&#39;, &#39;isFullHeight&#39;, &#39;isPlain&#39;];\n  const [modifiers, setModifiers] = useState({});\n\n  return (\n    &lt;Fragment&gt;\n      &lt;div style={{ marginBottom: &#39;12px&#39; }}&gt;\n        {mods.map((mod) =&gt; (\n          &lt;Checkbox\n            id={mod}\n            key={mod}\n            label={mod}\n            isChecked={modifiers[mod]}\n            onChange={(_event, checked) =&gt; {\n              modifiers[mod] = checked;\n              setModifiers({ ...modifiers });\n            }}\n          /&gt;\n        ))}\n      &lt;/div&gt;\n      &lt;div style={{ height: &#39;15rem&#39; }}&gt;\n        &lt;Card {...modifiers}&gt;\n          &lt;CardTitle&gt;Title&lt;/CardTitle&gt;\n          &lt;CardBody&gt;Body&lt;/CardBody&gt;\n          &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n        &lt;/Card&gt;\n      &lt;/div&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<table><thead><tr><th>Modifier</th><th>Description</th></tr></thead><tbody><tr><td>isCompact</td><td>Modifies the card to include compact styling. Should not be used with isLarge.</td></tr><tr><td>isLarge</td><td>Modifies the card to be large. Should not be used with isCompact.</td></tr><tr><td>isFullHeight</td><td>Modifies the card so that it fills the total available height of its container.</td></tr><tr><td>isPlain</td><td>Modifies the card to include plain styling, which removes the border and background.</td></tr></tbody></table>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1799" data-pf-content="true" class="pf-v6-c-content--h3">Header images and actions</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1847" data-pf-content="true" class="pf-v6-c-content--p">You can include header actions with the <code>actions</code> property of <code>&lt;CardHeader&gt;</code> . The following example includes an image using the <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1800" data-pf-content="true" class="pf-v6-c-content--a">Brand</a> component, and also includes a kebab dropdown and a checkbox in <code>&lt;CardHeader&gt;</code> actions.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1830" data-pf-content="true" class="pf-v6-c-content--p">The <code>actions</code> property for <code>&lt;CardHeader&gt;</code> includes the <code>hasNoOffset</code> property, which is <code>false</code> by default. When <code>hasNoOffset</code> is <code>false</code>, a negative margin is applied to help align default-sized card titles with card actions.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1831" data-pf-content="true" class="pf-v6-c-content--p">You may use <code>hasNoOffset</code> to remove this negative margin, which better aligns card actions in implementations that use large card titles or tall header images, for example.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1801" data-pf-content="true" class="pf-v6-c-content--p">Select the “actions hasNoOffset” checkbox in the example below to illustrate this behavior.</p>
+<astro-island uid="1CU4wh" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Brand,\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from &#39;@patternfly/react-core&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\nimport pfLogo from &#39;../../assets/PF-HorizontalLogo-Color.svg&#39;;\n\nexport const CardWithImageAndActions: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);\n  const [isChecked, setIsChecked] = useState&lt;boolean&gt;(false);\n  const [hasNoOffset, setHasNoOffset] = useState&lt;boolean&gt;(false);\n\n  const onSelect = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n  const onClick = (checked: boolean) =&gt; {\n    setIsChecked(checked);\n  };\n  const toggleOffset = (checked: boolean) =&gt; {\n    setHasNoOffset(checked);\n  };\n\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem key=\&quot;action\&quot;&gt;Action&lt;/DropdownItem&gt;\n      {/* Prevent default onClick functionality for example purposes */}\n      &lt;DropdownItem key=\&quot;link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled action\&quot; isDisabled&gt;\n        Disabled Action\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled link\&quot; isDisabled to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n      &lt;Divider component=\&quot;li\&quot; key=\&quot;separator\&quot; /&gt;\n      &lt;DropdownItem key=\&quot;separated action\&quot;&gt;Separated Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;separated link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Separated Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n\n  const headerActions = (\n    &lt;&gt;\n      &lt;Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n          &lt;MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() =&gt; setIsOpen(!isOpen)}\n            variant=\&quot;plain\&quot;\n            aria-label=\&quot;Card header images and actions example kebab toggle\&quot;\n            icon={&lt;EllipsisVIcon /&gt;}\n          /&gt;\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      &gt;\n        &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n      &lt;/Dropdown&gt;\n      &lt;Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) =&gt; onClick(checked)}\n        aria-label=\&quot;card checkbox example\&quot;\n        id=\&quot;check-1\&quot;\n        name=\&quot;check1\&quot;\n      /&gt;\n    &lt;/&gt;\n  );\n\n  return (\n    &lt;&gt;\n      &lt;Checkbox\n        label=\&quot;actions hasNoOffset\&quot;\n        isChecked={hasNoOffset}\n        onChange={(_event, checked) =&gt; toggleOffset(checked)}\n        aria-label=\&quot;remove actions offset\&quot;\n        id=\&quot;toggle-actions-offset\&quot;\n        name=\&quot;toggle-actions-offset\&quot;\n      /&gt;\n      &lt;div style={{ marginTop: &#39;15px&#39; }}&gt;\n        &lt;Card&gt;\n          &lt;CardHeader actions={{ actions: headerActions, hasNoOffset }}&gt;\n            &lt;Brand src={pfLogo} alt=\&quot;PatternFly logo\&quot; style={{ width: &#39;300px&#39; }} /&gt;\n          &lt;/CardHeader&gt;\n          &lt;CardTitle&gt;Title&lt;/CardTitle&gt;\n          &lt;CardBody&gt;Body&lt;/CardBody&gt;\n          &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n        &lt;/Card&gt;\n      &lt;/div&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1802" data-pf-content="true" class="pf-v6-c-content--h3">Title inline with images and actions</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1832" data-pf-content="true" class="pf-v6-c-content--p">Moving <code>&lt;CardTitle&gt;</code> within the <code>&lt;CardHeader&gt;</code> will style it inline with any images or actions.</p>
+<astro-island uid="16wQrm" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from &#39;@patternfly/react-core&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const CardTitleInHeader: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);\n  const [isChecked, setIsChecked] = useState&lt;boolean&gt;(false);\n\n  const onSelect = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n  const onClick = (checked: boolean) =&gt; {\n    setIsChecked(checked);\n  };\n\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem key=\&quot;action\&quot;&gt;Action&lt;/DropdownItem&gt;\n      {/* Prevent default onClick functionality for example purposes */}\n      &lt;DropdownItem key=\&quot;link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled action\&quot; isDisabled&gt;\n        Disabled Action\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled link\&quot; isDisabled to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n      &lt;Divider component=\&quot;li\&quot; key=\&quot;separator\&quot; /&gt;\n      &lt;DropdownItem key=\&quot;separated action\&quot;&gt;Separated Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;separated link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Separated Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n\n  const headerActions = (\n    &lt;&gt;\n      &lt;Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n          &lt;MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() =&gt; setIsOpen(!isOpen)}\n            variant=\&quot;plain\&quot;\n            aria-label=\&quot;Card title inline with images and actions example kebab toggle\&quot;\n            icon={&lt;EllipsisVIcon /&gt;}\n          /&gt;\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      &gt;\n        &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n      &lt;/Dropdown&gt;\n      &lt;Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) =&gt; onClick(checked)}\n        aria-label=\&quot;card checkbox example\&quot;\n        id=\&quot;check-2\&quot;\n        name=\&quot;check2\&quot;\n      /&gt;\n    &lt;/&gt;\n  );\n\n  return (\n    &lt;Card&gt;\n      &lt;CardHeader actions={{ actions: headerActions }}&gt;\n        &lt;CardTitle&gt;\n          This is a really really really really really really really really really really long header\n        &lt;/CardTitle&gt;\n      &lt;/CardHeader&gt;\n      &lt;CardBody&gt;Body&lt;/CardBody&gt;\n      &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n    &lt;/Card&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1803" data-pf-content="true" class="pf-v6-c-content--h3">Card header without title</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1833" data-pf-content="true" class="pf-v6-c-content--p">Card actions can be placed in the card header even without a <code>&lt;CardTitle&gt;</code>.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1834" data-pf-content="true" class="pf-v6-c-content--p">Images can also be placed in the card header without a <code>&lt;CardTitle&gt;</code>.</p>
+<astro-island uid="Z1dy8aN" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Checkbox,\n  Card,\n  CardHeader,\n  CardBody,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  MenuToggle,\n  MenuToggleElement,\n  Divider\n} from &#39;@patternfly/react-core&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const CardOnlyActionsInCardHead: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);\n  const [isChecked, setIsChecked] = useState&lt;boolean&gt;(false);\n\n  const onSelect = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n  const onClick = (checked: boolean) =&gt; {\n    setIsChecked(checked);\n  };\n\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem key=\&quot;action\&quot;&gt;Action&lt;/DropdownItem&gt;\n      {/* Prevent default onClick functionality for example purposes */}\n      &lt;DropdownItem key=\&quot;link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled action\&quot; isDisabled&gt;\n        Disabled Action\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled link\&quot; isDisabled to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n      &lt;Divider component=\&quot;li\&quot; key=\&quot;separator\&quot; /&gt;\n      &lt;DropdownItem key=\&quot;separated action\&quot;&gt;Separated Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;separated link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Separated Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n\n  const headerActions = (\n    &lt;&gt;\n      &lt;Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n          &lt;MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() =&gt; setIsOpen(!isOpen)}\n            variant=\&quot;plain\&quot;\n            aria-label=\&quot;Card header without title example kebab toggle\&quot;\n            icon={&lt;EllipsisVIcon /&gt;}\n          /&gt;\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      &gt;\n        &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n      &lt;/Dropdown&gt;\n      &lt;Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) =&gt; onClick(checked)}\n        aria-label=\&quot;card checkbox example\&quot;\n        id=\&quot;check-3\&quot;\n        name=\&quot;check3\&quot;\n      /&gt;\n    &lt;/&gt;\n  );\n\n  return (\n    &lt;Card&gt;\n      &lt;CardHeader actions={{ actions: headerActions }} /&gt;\n      &lt;CardBody&gt;This is the card body. There are only actions in the card head.&lt;/CardBody&gt;\n    &lt;/Card&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1804" data-pf-content="true" class="pf-v6-c-content--h3">With HTML heading element</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1835" data-pf-content="true" class="pf-v6-c-content--p">You may use the <code>component</code> property to place the card’s title within an HTML heading element.</p>
+<astro-island uid="SUdKq" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Card, CardTitle, CardBody, CardFooter } from &#39;@patternfly/react-core&#39;;\n\nexport const CardWithHeadingElement: React.FunctionComponent = () =&gt; (\n  &lt;Card&gt;\n    &lt;CardTitle component=\&quot;h4\&quot;&gt;Title within an {&#39;&lt;h4&gt;&#39;} element&lt;/CardTitle&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n  &lt;/Card&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1805" data-pf-content="true" class="pf-v6-c-content--h3">With multiple body sections</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1806" data-pf-content="true" class="pf-v6-c-content--p">You may use multiple body sections to visually separate blocks of content.</p>
+<astro-island uid="Z1eucnF" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Card, CardTitle, CardBody, CardFooter } from &#39;@patternfly/react-core&#39;;\n\nexport const CardWithMultipleBodySections: React.FunctionComponent = () =&gt; (\n  &lt;Card&gt;\n    &lt;CardTitle&gt;Title&lt;/CardTitle&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n  &lt;/Card&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1807" data-pf-content="true" class="pf-v6-c-content--h3">With a primary body section that fills</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1836" data-pf-content="true" class="pf-v6-c-content--p"><code>&lt;CardBody&gt;</code> sections will fill the available height of the card when <code>isFilled</code> equals <code>{true}</code>, which is the default value. Set <code>isFilled</code> to <code>{false}</code> to disable this behavior for one or more body sections. The remaining available height of the card will be split between any <code>&lt;CardBody&gt;</code> section that does not set <code>isFilled</code> to <code>{false}</code>.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1837" data-pf-content="true" class="pf-v6-c-content--p">A common use case of this is to set all but one body section to <code>isFilled={false}</code> so that a primary body section fills the available space of the card as seen in the example below. This example has 3 <code>&lt;CardBody&gt;</code> sections, two of which set <code>isFilled</code> to <code>{false}</code>. The third <code>&lt;CardBody&gt;</code> fills the remaining height of the card.</p>
+<astro-island uid="Z1Icbrj" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Card, CardTitle, CardBody, CardFooter } from &#39;@patternfly/react-core&#39;;\n\nexport const CardWithBodySectionFills: React.FunctionComponent = () =&gt; (\n  &lt;Card style={{ minHeight: &#39;30em&#39; }}&gt;\n    &lt;CardTitle&gt;Title&lt;/CardTitle&gt;\n    &lt;CardBody isFilled={false}&gt;Body pf-m-no-fill&lt;/CardBody&gt;\n    &lt;CardBody isFilled={false}&gt;Body pf-m-no-fill&lt;/CardBody&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n  &lt;/Card&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1808" data-pf-content="true" class="pf-v6-c-content--h3">Selectable</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1809" data-pf-content="true" class="pf-v6-c-content--p">A selectable card can be selected by clicking anywhere within the card.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1848" data-pf-content="true" class="pf-v6-c-content--p">You must avoid rendering any other interactive content within the <code>&lt;Card&gt;</code> when it is meant to be selectable only. Refer to our <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1810" data-pf-content="true" class="pf-v6-c-content--a">actionable and selectable example</a> if you need a card that is both selectable and has other interactive, actionable content.</p>
+<astro-island uid="ZMY8Ss" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from &#39;@patternfly/react-core&#39;;\n\nexport const SelectableCard: React.FunctionComponent = () =&gt; {\n  const [isChecked1, setIsChecked1] = useState(false);\n  const [isChecked2, setIsChecked2] = useState(false);\n  const [isChecked3, setIsChecked3] = useState(false);\n  const [isSecondary, setIsSecondary] = useState&lt;boolean&gt;(false);\n\n  const id1 = &#39;selectable-card-input-1&#39;;\n  const id2 = &#39;selectable-card-input-2&#39;;\n  const id3 = &#39;selectable-card-input-3&#39;;\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;, checked: boolean) =&gt; {\n    const name = event.currentTarget.name;\n\n    switch (name) {\n      case id1:\n        setIsChecked1(checked);\n        break;\n      case id2:\n        setIsChecked2(checked);\n        break;\n      case id3:\n        setIsChecked3(checked);\n        break;\n    }\n  };\n\n  const toggleVariant = (checked: boolean) =&gt; {\n    setIsSecondary(checked);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;Checkbox\n        label=\&quot;Secondary card styling\&quot;\n        isChecked={isSecondary}\n        onChange={(_event, checked) =&gt; toggleVariant(checked)}\n        id=\&quot;toggle-variant-selectable\&quot;\n        name=\&quot;toggle-variant\&quot;\n      /&gt;\n      &lt;div style={{ marginTop: &#39;15px&#39; }}&gt;\n        &lt;Gallery hasGutter&gt;\n          &lt;Card\n            id=\&quot;selectable-card-example-1\&quot;\n            isSelectable\n            isSelected={isChecked1}\n            variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}\n          &gt;\n            &lt;CardHeader\n              selectableActions={{\n                selectableActionId: id1,\n                selectableActionAriaLabelledby: &#39;selectable-card-example-1&#39;,\n                name: id1,\n                onChange,\n                hasNoOffset: true\n              }}\n            &gt;\n              &lt;CardTitle&gt;First card&lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card is selectable.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n          &lt;Card\n            id=\&quot;selectable-card-example-2\&quot;\n            isSelectable\n            isSelected={isChecked2}\n            variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}\n          &gt;\n            &lt;CardHeader\n              selectableActions={{\n                selectableActionId: id2,\n                selectableActionAriaLabelledby: &#39;selectable-card-example-2&#39;,\n                name: id2,\n                onChange,\n                hasNoOffset: true\n              }}\n            &gt;\n              &lt;CardTitle&gt;Second card&lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card is selectable.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n          &lt;Card\n            id=\&quot;selectable-card-example-3\&quot;\n            isSelectable\n            isDisabled\n            isSelected={isChecked3}\n            variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}\n          &gt;\n            &lt;CardHeader\n              selectableActions={{\n                selectableActionId: id3,\n                selectableActionAriaLabelledby: &#39;selectable-card-example-3&#39;,\n                name: id3,\n                onChange,\n                hasNoOffset: true\n              }}\n            &gt;\n              &lt;CardTitle&gt;Third card&lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card is selectable but disabled.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n        &lt;/Gallery&gt;\n      &lt;/div&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1811" data-pf-content="true" class="pf-v6-c-content--h3">Single selectable</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1838" data-pf-content="true" class="pf-v6-c-content--p">When a group of single selectable cards are related, you must pass the same <code>name</code> property to each card’s <code>selectableActions</code> property.</p>
+<astro-island uid="Z18GisT" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Card, CardHeader, CardTitle, CardBody, Gallery } from &#39;@patternfly/react-core&#39;;\n\nexport const SingleSelectableCard: React.FunctionComponent = () =&gt; {\n  const [isChecked, setIsChecked] = useState(&#39;&#39;);\n  const id1 = &#39;single-selectable-card-input-1&#39;;\n  const id2 = &#39;single-selectable-card-input-2&#39;;\n  const id3 = &#39;single-selectable-card-input-3&#39;;\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    setIsChecked(event.currentTarget.id);\n  };\n\n  return (\n    &lt;Gallery hasGutter&gt;\n      &lt;Card id=\&quot;single-selectable-card-example-1\&quot; isSelectable isSelected={isChecked === id1}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id1,\n            selectableActionAriaLabelledby: &#39;single-selectable-card-example-1&#39;,\n            name: &#39;single-selectable-card-example&#39;,\n            variant: &#39;single&#39;,\n            onChange,\n            hasNoOffset: true\n          }}\n        &gt;\n          &lt;CardTitle&gt;First card&lt;/CardTitle&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;This card is single selectable.&lt;/CardBody&gt;\n      &lt;/Card&gt;\n      &lt;Card id=\&quot;single-selectable-card-example-2\&quot; isSelectable isSelected={isChecked === id2}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id2,\n            selectableActionAriaLabelledby: &#39;single-selectable-card-example-2&#39;,\n            name: &#39;single-selectable-card-example&#39;,\n            variant: &#39;single&#39;,\n            onChange,\n            hasNoOffset: true\n          }}\n        &gt;\n          &lt;CardTitle&gt;Second card&lt;/CardTitle&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;This card is single selectable.&lt;/CardBody&gt;\n      &lt;/Card&gt;\n      &lt;Card id=\&quot;single-selectable-card-example-3\&quot; isSelectable isDisabled isSelected={isChecked === id3}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id3,\n            selectableActionAriaLabelledby: &#39;single-selectable-card-example-3&#39;,\n            name: &#39;single-selectable-card-example&#39;,\n            variant: &#39;single&#39;,\n            onChange,\n            hasNoOffset: true\n          }}\n        &gt;\n          &lt;CardTitle&gt;Third card&lt;/CardTitle&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;This card is single selectable but disabled.&lt;/CardBody&gt;\n      &lt;/Card&gt;\n    &lt;/Gallery&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1812" data-pf-content="true" class="pf-v6-c-content--h3">Actionable</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1839" data-pf-content="true" class="pf-v6-c-content--p">An actionable card can perform an action or navigate to a link by clicking anywhere within the card. To open a link in a new tab or window, pass the <code>isExternalLink</code> property to <code>selectableActions</code>.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1849" data-pf-content="true" class="pf-v6-c-content--p">You can pass the <code>isClicked</code> property to <code>&lt;Card&gt;</code> to convey that a card is the currently clicked one, such as when clicking a card would open a <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1813" data-pf-content="true" class="pf-v6-c-content--a">primary-detail view</a>. This must not be used simply for “selection” of a card, and you should instead use our <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1814" data-pf-content="true" class="pf-v6-c-content--a">selectable card</a> or <a data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1815" data-pf-content="true" class="pf-v6-c-content--a">single selectable card</a>.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1840" data-pf-content="true" class="pf-v6-c-content--p">When a card is meant to be actionable only, you must avoid rendering any other interactive content within the <code>&lt;Card&gt;</code>, similar to selectable cards.</p>
+<astro-island uid="ZOfdmG" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Card, CardHeader, CardTitle, CardBody, Checkbox, Gallery } from &#39;@patternfly/react-core&#39;;\n\nexport const CardClickable: React.FunctionComponent = () =&gt; {\n  const [isSecondary, setIsSecondary] = useState&lt;boolean&gt;(false);\n\n  const toggleVariant = (checked: boolean) =&gt; {\n    setIsSecondary(checked);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;Checkbox\n        label=\&quot;secondary styling\&quot;\n        isChecked={isSecondary}\n        onChange={(_event, checked) =&gt; toggleVariant(checked)}\n        aria-label=\&quot;add secondary styling\&quot;\n        id=\&quot;toggle-variant-clickable\&quot;\n        name=\&quot;toggle-variant\&quot;\n      /&gt;\n      &lt;div style={{ marginTop: &#39;15px&#39; }}&gt;\n        &lt;Gallery hasGutter&gt;\n          &lt;Card isClickable variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}&gt;\n            &lt;CardHeader\n              selectableActions={{\n                // eslint-disable-next-line no-console\n                onClickAction: () =&gt; console.log(`First card in actionable example clicked`),\n                selectableActionAriaLabelledby: &#39;clickable-card-example-title-1&#39;\n              }}\n            &gt;\n              &lt;CardTitle id=\&quot;clickable-card-example-title-1\&quot;&gt;First card in the actionable example&lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card performs an action on click.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n          &lt;Card isClickable variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}&gt;\n            &lt;CardHeader\n              selectableActions={{\n                to: &#39;#&#39;,\n                selectableActionAriaLabelledby: &#39;clickable-card-example-title-2&#39;\n              }}\n            &gt;\n              &lt;CardTitle id=\&quot;clickable-card-example-title-2\&quot;&gt;Second card in the actionable example&lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card can navigate to a link on click.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n          &lt;Card isClickable isDisabled variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}&gt;\n            &lt;CardHeader\n              selectableActions={{\n                // eslint-disable-next-line no-console\n                onClickAction: () =&gt; console.log(`Third card in actionable example clicked`),\n                selectableActionAriaLabelledby: &#39;clickable-card-example-title-3&#39;\n              }}\n            &gt;\n              &lt;CardTitle id=\&quot;clickable-card-example-title-3\&quot;&gt;Third card in the actionable example&lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card is clickable but disabled.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n        &lt;/Gallery&gt;\n      &lt;/div&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1816" data-pf-content="true" class="pf-v6-c-content--h3">Actionable and selectable</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1841" data-pf-content="true" class="pf-v6-c-content--p">A card can be selectable and have additional interactive content by passing both the <code>isClickable</code> and <code>isSelectable</code> properties to <code>&lt;Card&gt;</code>. The following example shows how the actionable functionality can be rendered anywhere within a selectable card.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1817" data-pf-content="true" class="pf-v6-c-content--p">When passing interactive content to an actionable and selectable card that is disabled, you should also ensure the interactive content is disabled as well, if applicable.</p>
+<astro-island uid="veQi2" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Card, CardHeader, CardTitle, CardBody, Button, Checkbox, Gallery } from &#39;@patternfly/react-core&#39;;\n\nexport const CardClickable: React.FunctionComponent = () =&gt; {\n  const [isChecked1, setIsChecked1] = useState(false);\n  const [isChecked2, setIsChecked2] = useState(false);\n  const [isChecked3, setIsChecked3] = useState(false);\n  const [isClicked, setIsClicked] = useState(false);\n  const [isSecondary, setIsSecondary] = useState&lt;boolean&gt;(false);\n\n  const id1 = &#39;clickable-selectable-card-input-1&#39;;\n  const id2 = &#39;clickable-selectable-card-input-2&#39;;\n  const id3 = &#39;clickable-selectable-card-input-3&#39;;\n\n  const onClick = () =&gt; {\n    setIsClicked((prevState) =&gt; !prevState);\n  };\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;, checked: boolean) =&gt; {\n    const name = event.currentTarget.name;\n\n    switch (name) {\n      case id1:\n        setIsChecked1(checked);\n        break;\n      case id2:\n        setIsChecked2(checked);\n        break;\n      case id3:\n        setIsChecked3(checked);\n        break;\n    }\n  };\n\n  const toggleVariant = (checked: boolean) =&gt; {\n    setIsSecondary(checked);\n  };\n\n  return (\n    &lt;&gt;\n      &lt;Checkbox\n        label=\&quot;secondary styling\&quot;\n        isChecked={isSecondary}\n        onChange={(_event, checked) =&gt; toggleVariant(checked)}\n        aria-label=\&quot;add secondary styling\&quot;\n        id=\&quot;toggle-variant-clickable-selectable\&quot;\n        name=\&quot;toggle-variant\&quot;\n      /&gt;\n      &lt;div style={{ marginTop: &#39;15px&#39; }}&gt;\n        &lt;Gallery hasGutter&gt;\n          &lt;Card\n            id=\&quot;clickable-selectable-card-example-1\&quot;\n            isClickable\n            isSelectable\n            isSelected={isChecked1}\n            isClicked={isClicked}\n            variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}\n          &gt;\n            &lt;CardHeader\n              selectableActions={{\n                selectableActionId: id1,\n                selectableActionAriaLabelledby: &#39;clickable-selectable-card-example-1&#39;,\n                name: id1,\n                onChange,\n                hasNoOffset: true\n              }}\n            &gt;\n              &lt;CardTitle&gt;\n                &lt;Button variant=\&quot;link\&quot; isInline onClick={onClick}&gt;\n                  First card\n                &lt;/Button&gt;\n              &lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card performs an action upon clicking the card title and is selectable.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n          &lt;Card\n            id=\&quot;clickable-selectable-card-example-2\&quot;\n            isClickable\n            isSelectable\n            isSelected={isChecked2}\n            variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}\n          &gt;\n            &lt;CardHeader\n              selectableActions={{\n                selectableActionId: id2,\n                selectableActionAriaLabelledby: &#39;clickable-selectable-card-example-2&#39;,\n                name: id2,\n                onChange,\n                hasNoOffset: true\n              }}\n            &gt;\n              &lt;CardTitle&gt;Second Card&lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;\n              This card is selectable and has a link in the card body that navigates to{&#39; &#39;}\n              &lt;Button variant=\&quot;link\&quot; isInline component=\&quot;a\&quot; href=\&quot;#\&quot;&gt;\n                Patternfly\n              &lt;/Button&gt;\n              .\n            &lt;/CardBody&gt;\n          &lt;/Card&gt;\n          &lt;Card\n            id=\&quot;clickable-selectable-card-example-3\&quot;\n            isClickable\n            isSelectable\n            isDisabled\n            isSelected={isChecked3}\n            variant={isSecondary ? &#39;secondary&#39; : &#39;default&#39;}\n          &gt;\n            &lt;CardHeader\n              selectableActions={{\n                selectableActionId: id3,\n                selectableActionAriaLabelledby: &#39;clickable-selectable-card-example-3&#39;,\n                name: id3,\n                onChange,\n                hasNoOffset: true\n              }}\n            &gt;\n              &lt;CardTitle&gt;\n                &lt;Button isDisabled variant=\&quot;link\&quot; isInline component=\&quot;a\&quot; href=\&quot;https://www.patternfly.org/\&quot;&gt;\n                  Third card\n                &lt;/Button&gt;\n              &lt;/CardTitle&gt;\n            &lt;/CardHeader&gt;\n            &lt;CardBody&gt;This card is clickable and selectable, but disabled.&lt;/CardBody&gt;\n          &lt;/Card&gt;\n        &lt;/Gallery&gt;\n      &lt;/div&gt;\n    &lt;/&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1818" data-pf-content="true" class="pf-v6-c-content--h3">Expandable cards</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1842" data-pf-content="true" class="pf-v6-c-content--p">A card can be made expandable using the <code>isExpanded</code> property. In the collapsed state, only the card header is shown, and the user can click the caret to view the rest of the card content.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1843" data-pf-content="true" class="pf-v6-c-content--p">Place any content that you want to be hidden within the <code>&lt;CardExpandableContent&gt;</code> component.</p>
+<astro-island uid="Z1eNiOz" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Fragment, useState } from &#39;react&#39;;\nimport {\n  Card,\n  CardHeader,\n  CardTitle,\n  CardBody,\n  CardFooter,\n  CardExpandableContent,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  Divider,\n  MenuToggle,\n  MenuToggleElement\n} from &#39;@patternfly/react-core&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const CardExpandable: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);\n  const [isChecked, setIsChecked] = useState&lt;boolean&gt;(false);\n  const [isExpanded, setIsExpanded] = useState&lt;boolean&gt;(false);\n  const [isToggleRightAligned, setIsToggleRightAligned] = useState&lt;boolean&gt;(false);\n\n  const onSelect = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onClick = (checked: boolean) =&gt; {\n    setIsChecked(checked);\n  };\n\n  const onExpand = (event: React.MouseEvent, id: string) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(id);\n    setIsExpanded(!isExpanded);\n  };\n\n  const onRightAlign = () =&gt; {\n    setIsToggleRightAligned(!isToggleRightAligned);\n  };\n\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem key=\&quot;action\&quot;&gt;Action&lt;/DropdownItem&gt;\n      {/* Prevent default onClick functionality for example purposes */}\n      &lt;DropdownItem key=\&quot;link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled action\&quot; isDisabled&gt;\n        Disabled Action\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled link\&quot; isDisabled to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n      &lt;Divider component=\&quot;li\&quot; key=\&quot;separator\&quot; /&gt;\n      &lt;DropdownItem key=\&quot;separated action\&quot;&gt;Separated Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;separated link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Separated Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n  const headerActions = (\n    &lt;&gt;\n      &lt;Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n          &lt;MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() =&gt; setIsOpen(!isOpen)}\n            variant=\&quot;plain\&quot;\n            aria-label=\&quot;Card expandable example kebab toggle\&quot;\n            icon={&lt;EllipsisVIcon /&gt;}\n          /&gt;\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      &gt;\n        &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n      &lt;/Dropdown&gt;\n      &lt;Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) =&gt; onClick(checked)}\n        aria-label=\&quot;card checkbox example\&quot;\n        id=\&quot;check-4\&quot;\n        name=\&quot;check4\&quot;\n      /&gt;\n    &lt;/&gt;\n  );\n\n  return (\n    &lt;Fragment&gt;\n      &lt;div style={{ marginBottom: &#39;12px&#39; }}&gt;\n        &lt;Checkbox\n          id={&#39;isToggleRightAligned-1&#39;}\n          key={&#39;isToggleRightAligned&#39;}\n          label={&#39;isToggleRightAligned&#39;}\n          isChecked={isToggleRightAligned}\n          onChange={onRightAlign}\n        /&gt;\n      &lt;/div&gt;\n      &lt;Card id=\&quot;expandable-card\&quot; isExpanded={isExpanded}&gt;\n        &lt;CardHeader\n          actions={{ actions: headerActions }}\n          onExpand={onExpand}\n          isToggleRightAligned={isToggleRightAligned}\n          toggleButtonProps={{\n            id: &#39;toggle-button1&#39;,\n            &#39;aria-label&#39;: &#39;Details&#39;,\n            &#39;aria-labelledby&#39;: &#39;expandable-card-title toggle-button1&#39;,\n            &#39;aria-expanded&#39;: isExpanded\n          }}\n        &gt;\n          &lt;CardTitle id=\&quot;expandable-card-title\&quot;&gt;Title&lt;/CardTitle&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardExpandableContent&gt;\n          &lt;CardBody&gt;Body&lt;/CardBody&gt;\n          &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n        &lt;/CardExpandableContent&gt;\n      &lt;/Card&gt;\n    &lt;/Fragment&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1819" data-pf-content="true" class="pf-v6-c-content--h3">Expandable with icon</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1820" data-pf-content="true" class="pf-v6-c-content--p">An image can be placed in the card header to show users an icon beside the expansion caret.</p>
+<astro-island uid="Mtt6b" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport {\n  Card,\n  CardHeader,\n  CardBody,\n  CardFooter,\n  CardExpandableContent,\n  Checkbox,\n  Dropdown,\n  DropdownList,\n  DropdownItem,\n  Divider,\n  MenuToggle,\n  MenuToggleElement\n} from &#39;@patternfly/react-core&#39;;\nimport pfLogoSmall from &#39;../../PF-IconLogo.svg&#39;;\nimport EllipsisVIcon from &#39;@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon&#39;;\n\nexport const CardExpandableWithIcon: React.FunctionComponent = () =&gt; {\n  const [isOpen, setIsOpen] = useState&lt;boolean&gt;(false);\n  const [isChecked, setIsChecked] = useState&lt;boolean&gt;(false);\n  const [isExpanded, setIsExpanded] = useState&lt;boolean&gt;(false);\n\n  const onSelect = () =&gt; {\n    setIsOpen(!isOpen);\n  };\n\n  const onClick = (checked: boolean) =&gt; {\n    setIsChecked(checked);\n  };\n\n  const onExpand = (event: React.MouseEvent, id: string) =&gt; {\n    // eslint-disable-next-line no-console\n    console.log(id);\n    setIsExpanded(!isExpanded);\n  };\n\n  const dropdownItems = (\n    &lt;&gt;\n      &lt;DropdownItem key=\&quot;action\&quot;&gt;Action&lt;/DropdownItem&gt;\n      {/* Prevent default onClick functionality for example purposes */}\n      &lt;DropdownItem key=\&quot;link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Link\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled action\&quot; isDisabled&gt;\n        Disabled Action\n      &lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;disabled link\&quot; isDisabled to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Disabled Link\n      &lt;/DropdownItem&gt;\n      &lt;Divider component=\&quot;li\&quot; key=\&quot;separator\&quot; /&gt;\n      &lt;DropdownItem key=\&quot;separated action\&quot;&gt;Separated Action&lt;/DropdownItem&gt;\n      &lt;DropdownItem key=\&quot;separated link\&quot; to=\&quot;#\&quot; onClick={(event: any) =&gt; event.preventDefault()}&gt;\n        Separated Link\n      &lt;/DropdownItem&gt;\n    &lt;/&gt;\n  );\n\n  const headerActions = (\n    &lt;&gt;\n      &lt;Dropdown\n        onSelect={onSelect}\n        toggle={(toggleRef: React.Ref&lt;MenuToggleElement&gt;) =&gt; (\n          &lt;MenuToggle\n            ref={toggleRef}\n            isExpanded={isOpen}\n            onClick={() =&gt; setIsOpen(!isOpen)}\n            variant=\&quot;plain\&quot;\n            aria-label=\&quot;Card expandable with icon example kebab toggle\&quot;\n            icon={&lt;EllipsisVIcon /&gt;}\n          /&gt;\n        )}\n        isOpen={isOpen}\n        onOpenChange={(isOpen: boolean) =&gt; setIsOpen(isOpen)}\n      &gt;\n        &lt;DropdownList&gt;{dropdownItems}&lt;/DropdownList&gt;\n      &lt;/Dropdown&gt;\n      &lt;Checkbox\n        isChecked={isChecked}\n        onChange={(_event, checked) =&gt; onClick(checked)}\n        aria-label=\&quot;card checkbox example\&quot;\n        id=\&quot;check-5\&quot;\n        name=\&quot;check5\&quot;\n      /&gt;\n    &lt;/&gt;\n  );\n\n  return (\n    &lt;Card id=\&quot;expandable-card-icon\&quot; isExpanded={isExpanded}&gt;\n      &lt;CardHeader\n        actions={{ actions: headerActions }}\n        onExpand={onExpand}\n        toggleButtonProps={{\n          id: &#39;toggle-button2&#39;,\n          &#39;aria-label&#39;: &#39;Patternfly Details&#39;,\n          &#39;aria-expanded&#39;: isExpanded\n        }}\n      &gt;\n        &lt;img src={pfLogoSmall} alt=\&quot;PatternFly logo\&quot; width=\&quot;27px\&quot; /&gt;\n      &lt;/CardHeader&gt;\n      &lt;CardExpandableContent&gt;\n        &lt;CardBody&gt;Body&lt;/CardBody&gt;\n        &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n      &lt;/CardExpandableContent&gt;\n    &lt;/Card&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1821" data-pf-content="true" class="pf-v6-c-content--h3">Card with dividers</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1822" data-pf-content="true" class="pf-v6-c-content--p">Dividers can be placed between sections of the card.</p>
+<astro-island uid="Y25vJ" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { Card, CardTitle, CardBody, CardFooter, Divider } from &#39;@patternfly/react-core&#39;;\n\nexport const CardWithDividers: React.FunctionComponent = () =&gt; (\n  &lt;Card ouiaId=\&quot;CardWithDividers\&quot;&gt;\n    &lt;CardTitle&gt;Title&lt;/CardTitle&gt;\n    &lt;Divider /&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;Divider /&gt;\n    &lt;CardBody&gt;Body&lt;/CardBody&gt;\n    &lt;Divider /&gt;\n    &lt;CardFooter&gt;Footer&lt;/CardFooter&gt;\n  &lt;/Card&gt;\n);\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h2 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1823" data-pf-content="true" class="pf-v6-c-content--h2">Cards as tiles</h2>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1824" data-pf-content="true" class="pf-v6-c-content--p">Sets of selectable cards can be used as tiles, which are static options that users can select.</p>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1844" data-pf-content="true" class="pf-v6-c-content--p">They can be either single selectable or multi selectable, by passing the <code>variant</code> property to the <code>selectableActions</code> object. You can also toggle the visibility of the radio or checkbox by passing the <code>isHidden</code> property to the <code>selectableActions</code> object.</p>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1825" data-pf-content="true" class="pf-v6-c-content--h3">Single selectable tiles</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1845" data-pf-content="true" class="pf-v6-c-content--p">To prevent users from selecting more than 1 tile in a set, set <code>variant</code> to “single” within the <code>selectableActions</code> object of <code>&lt;CardHeader&gt;</code>.</p>
+<astro-island uid="ZfBbG3" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Card, CardHeader, CardBody, Gallery, Flex } from &#39;@patternfly/react-core&#39;;\nimport PlusIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-icon&#39;;\n\nexport const CardTile: React.FunctionComponent = () =&gt; {\n  const [isChecked, setIsChecked] = useState(&#39;&#39;);\n  const id1 = &#39;tile-1&#39;;\n  const id2 = &#39;tile-2&#39;;\n  const id3 = &#39;tile-3&#39;;\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;) =&gt; {\n    setIsChecked(event.currentTarget.id);\n  };\n\n  return (\n    &lt;Gallery hasGutter&gt;\n      &lt;Card id=\&quot;tile-example-1\&quot; isSelectable isSelected={isChecked === id1}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id1,\n            selectableActionAriaLabelledby: &#39;tile-example-1&#39;,\n            name: id1,\n            variant: &#39;single&#39;,\n            onChange,\n            isHidden: true\n          }}\n        &gt;\n          &lt;Flex gap={{ default: &#39;gapSm&#39; }} alignItems={{ default: &#39;alignItemsCenter&#39; }}&gt;\n            &lt;PlusIcon /&gt;\n            &lt;b&gt;Tile header&lt;/b&gt;\n          &lt;/Flex&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;Tile content and description&lt;/CardBody&gt;\n      &lt;/Card&gt;\n      &lt;Card id=\&quot;tile-example-2\&quot; isSelectable isSelected={isChecked === id2}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id2,\n            selectableActionAriaLabelledby: &#39;tile-example-2&#39;,\n            name: id2,\n            variant: &#39;single&#39;,\n            onChange,\n            isHidden: true\n          }}\n        &gt;\n          &lt;Flex gap={{ default: &#39;gapSm&#39; }} alignItems={{ default: &#39;alignItemsCenter&#39; }}&gt;\n            &lt;PlusIcon /&gt;\n            &lt;b&gt;Tile header&lt;/b&gt;\n          &lt;/Flex&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;Tile content and description&lt;/CardBody&gt;\n      &lt;/Card&gt;\n      &lt;Card id=\&quot;tile-example-3\&quot; isSelectable isDisabled isSelected={isChecked === id3}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id3,\n            selectableActionAriaLabelledby: &#39;tile-example-3&#39;,\n            name: id3,\n            variant: &#39;single&#39;,\n            onChange,\n            isHidden: true\n          }}\n        &gt;\n          &lt;Flex gap={{ default: &#39;gapSm&#39; }} alignItems={{ default: &#39;alignItemsCenter&#39; }}&gt;\n            &lt;PlusIcon /&gt;\n            &lt;b&gt;Tile header (disabled)&lt;/b&gt;\n          &lt;/Flex&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;Tile content and description&lt;/CardBody&gt;\n      &lt;/Card&gt;\n    &lt;/Gallery&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island>
+<h3 data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1826" data-pf-content="true" class="pf-v6-c-content--h3">Multi selectable tiles</h3>
+<p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-1846" data-pf-content="true" class="pf-v6-c-content--p">To allow users to select more than 1 tile in a set, do not set <code>variant</code> within the <code>selectableActions</code> object of <code>&lt;CardHeader&gt;</code>.</p>
+<astro-island uid="Z1XOlH4" component-url="/_astro/LiveExample.B5R4Dzng.js" component-export="LiveExample" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;src&quot;:[0,&quot;import { useState } from &#39;react&#39;;\nimport { Card, CardHeader, CardBody, Gallery, Flex } from &#39;@patternfly/react-core&#39;;\nimport PlusIcon from &#39;@patternfly/react-icons/dist/esm/icons/plus-icon&#39;;\n\nexport const CardTileMulti: React.FunctionComponent = () =&gt; {\n  const [isChecked1, setIsChecked1] = useState(false);\n  const [isChecked2, setIsChecked2] = useState(false);\n  const [isChecked3, setIsChecked3] = useState(false);\n  const id1 = &#39;multi-tile-1&#39;;\n  const id2 = &#39;multi-tile-2&#39;;\n  const id3 = &#39;multi-tile-3&#39;;\n\n  const onChange = (event: React.FormEvent&lt;HTMLInputElement&gt;, checked: boolean) =&gt; {\n    const name = event.currentTarget.name;\n\n    switch (name) {\n      case id1:\n        setIsChecked1(checked);\n        break;\n      case id2:\n        setIsChecked2(checked);\n        break;\n      case id3:\n        setIsChecked3(checked);\n        break;\n    }\n  };\n\n  return (\n    &lt;Gallery hasGutter&gt;\n      &lt;Card id=\&quot;multi-tile-example-1\&quot; isSelectable isSelected={isChecked1}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id1,\n            selectableActionAriaLabelledby: &#39;multi-tile-example-1&#39;,\n            name: id1,\n            onChange,\n            isHidden: true\n          }}\n        &gt;\n          &lt;Flex gap={{ default: &#39;gapSm&#39; }} alignItems={{ default: &#39;alignItemsCenter&#39; }}&gt;\n            &lt;PlusIcon /&gt;\n            &lt;b&gt;Tile header&lt;/b&gt;\n          &lt;/Flex&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;Tile content and description&lt;/CardBody&gt;\n      &lt;/Card&gt;\n      &lt;Card id=\&quot;multi-tile-example-2\&quot; isSelectable isSelected={isChecked2}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id2,\n            selectableActionAriaLabelledby: &#39;multi-tile-example-2&#39;,\n            name: id2,\n            onChange,\n            isHidden: true\n          }}\n        &gt;\n          &lt;Flex gap={{ default: &#39;gapSm&#39; }} alignItems={{ default: &#39;alignItemsCenter&#39; }}&gt;\n            &lt;PlusIcon /&gt;\n            &lt;b&gt;Tile header&lt;/b&gt;\n          &lt;/Flex&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;Tile content and description&lt;/CardBody&gt;\n      &lt;/Card&gt;\n      &lt;Card id=\&quot;multi-tile-example-3\&quot; isSelectable isDisabled isSelected={isChecked3}&gt;\n        &lt;CardHeader\n          selectableActions={{\n            selectableActionId: id3,\n            selectableActionAriaLabelledby: &#39;multi-tile-example-3&#39;,\n            name: id3,\n            onChange,\n            isHidden: true\n          }}\n        &gt;\n          &lt;Flex gap={{ default: &#39;gapSm&#39; }} alignItems={{ default: &#39;alignItemsCenter&#39; }}&gt;\n            &lt;PlusIcon /&gt;\n            &lt;b&gt;Tile header (disabled)&lt;/b&gt;\n          &lt;/Flex&gt;\n        &lt;/CardHeader&gt;\n        &lt;CardBody&gt;Tile content and description&lt;/CardBody&gt;\n      &lt;/Card&gt;\n    &lt;/Gallery&gt;\n  );\n};\n&quot;],&quot;html&quot;:[0]}" ssr client="only" opts="{&quot;name&quot;:&quot;LiveExampleBase&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"><div class="pf-v6-l-stack__item pf-v6-u-mt-md"><astro-island uid="ZjQRhG" component-url="/_astro/PropsTables.YkW1puJk.js" component-export="PropsTables" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;propComponents&quot;:[1,[[0,&quot;Card&quot;],[0,&quot;CardHeader&quot;],[0,&quot;CardHeaderActionsObject&quot;],[0,&quot;CardHeaderSelectableActionsObject&quot;],[0,&quot;CardTitle&quot;],[0,&quot;CardBody&quot;],[0,&quot;CardFooter&quot;],[0,&quot;CardExpandableContent&quot;]]],&quot;url&quot;:[7,&quot;http://localhost:4321/components/card/react&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;PropsTables&quot;,&quot;value&quot;:&quot;react&quot;}"></astro-island></div><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-1793" 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>
+CSS variables
+</h2></div></div></div><div class="pf-v6-l-stack__item"><astro-island uid="wI4XI" component-url="/_astro/CSSTable.-Emc9iTg.js" component-export="CSSTable" renderer-url="/_astro/client.DN8ES6L5.js" props="{&quot;autoLinkHeader&quot;:[0,false],&quot;cssPrefix&quot;:[0,&quot;pf-v6-c-card&quot;]}" ssr client="only" opts="{&quot;name&quot;:&quot;CSSTableComponent&quot;,&quot;value&quot;:&quot;react&quot;}"></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>