@patternfly/patternfly-doc-core 1.8.3 → 1.9.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.github/workflows/add-new-issues-to-project.yml +38 -0
- package/cli/cli.ts +9 -1
- package/cli/convertToMDX.ts +32 -0
- package/dist/cli/cli.js +7 -0
- package/dist/cli/convertToMDX.js +20 -0
- package/dist/cli/tsconfig.tsbuildinfo +1 -1
- package/dist/client/_astro/Button.BQCwQ5pE.js +9 -0
- package/dist/client/_astro/CSSTable.DC79W1Ct.js +1 -0
- package/dist/client/_astro/{Content.Dv9vgAns.js → Content.B4M2qzJY.js} +1 -1
- package/dist/client/_astro/DropdownList.cxp03sS4.js +1 -0
- package/dist/client/_astro/LiveExample.CxJsMvEq.css +1 -0
- package/dist/client/_astro/LiveExample.DZkxbJA_.js +259 -0
- package/dist/client/_astro/Navigation.C0WYsqBi.js +1 -0
- package/dist/client/_astro/{PageContext.ipir86Hm.js → PageContext.miTsIqVo.js} +1 -1
- package/dist/client/_astro/PageSidebarBody.B0AJe8Hg.js +1 -0
- package/dist/client/_astro/PageToggle.CMZ3C1v1.js +1 -0
- package/dist/client/_astro/SearchInput.DhHo7yPx.js +1 -0
- package/dist/client/_astro/SectionGallery.3ABpQwE4.js +1 -0
- package/dist/client/_astro/Toolbar.Db10BzwI.js +1 -0
- package/dist/client/_astro/{ToolbarContent.Cd-kqxku.js → ToolbarContent.UH3ZRlHp.js} +1 -1
- package/dist/client/_astro/{angle-left-icon.C3MzYN3k.js → angle-left-icon.teo8GC0v.js} +1 -1
- package/dist/client/_astro/bars-icon.Dk6ua1rr.js +1 -0
- package/dist/client/_astro/{divider.O4WEhuBq.js → divider.tlrBPkzg.js} +1 -1
- package/dist/client/_astro/github-icon.ByC5XEPt.js +1 -0
- package/dist/client/_astro/{index.BkswdOFP.js → index.DYVB4vTo.js} +12 -12
- package/dist/client/_astro/{CSSTable.V4xaGXjj.js → link-icon.BNHnRn73.js} +30 -23
- package/dist/client/components/accordion/index.html +12 -12
- package/dist/client/components/accordion/react/index.html +12 -12
- package/dist/client/components/all-components/index.html +7 -7
- package/dist/client/design-foundations/typography/index.html +8 -8
- package/dist/client/design-foundations/usage-and-behavior/index.html +8 -8
- package/dist/client/get-started/contribute/index.html +8 -8
- package/dist/client/index.html +2 -2
- package/dist/server/entry.mjs +1 -1
- package/dist/server/{manifest_DQIsYSvX.mjs → manifest_B1s28mIS.mjs} +1 -1
- package/package.json +5 -1
- package/src/components/LiveExample.tsx +23 -4
- package/src/components/NavEntry.tsx +7 -9
- package/src/components/NavSection.tsx +1 -2
- package/src/content.ts +1 -1
- package/src/pages/[section]/[...page].astro +58 -15
- package/src/pages/[section]/[page]/[...tab].astro +1 -1
- package/src/utils/case.ts +16 -0
- package/src/utils/index.ts +1 -0
- package/dist/client/_astro/Button.IBWho7ny.js +0 -9
- package/dist/client/_astro/DropdownGroup.DmTizX-Q.js +0 -1
- package/dist/client/_astro/DropdownList.BUcpBUVP.js +0 -1
- package/dist/client/_astro/LiveExample.B7IM_dLQ.css +0 -1
- package/dist/client/_astro/LiveExample.CiM2pGMB.js +0 -18
- package/dist/client/_astro/Navigation.zYUnVsp7.js +0 -1
- package/dist/client/_astro/PageSidebarBody.vGxFk_DU.js +0 -1
- package/dist/client/_astro/PageToggle.C6_rp-Bm.js +0 -1
- package/dist/client/_astro/PageToggleButton.CagcouJB.js +0 -1
- package/dist/client/_astro/SearchInput.BwWsXfyf.js +0 -1
- package/dist/client/_astro/SectionGallery.DqD5bUWQ.js +0 -1
- package/dist/client/_astro/Toolbar.BmilfRHR.js +0 -1
- package/dist/client/_astro/help-icon.Du6t7nyh.js +0 -8
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
5
5
|
<style>.ws-section-gallery .pf-v6-c-toolbar{margin-block-end:var(--pf-t--global--spacer--md)}.ws-section-gallery-item{text-decoration:inherit;color:inherit}.ws-section-gallery .pf-v6-c-card{height:100%}.ws-section-gallery .pf-v6-c-data-list{max-width:var(--pf-t--global--breakpoint--lg)}
|
|
6
6
|
</style>
|
|
7
|
-
<link rel="stylesheet" href="/_astro/LiveExample.
|
|
7
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.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"],
|
|
8
8
|
[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"],
|
|
9
9
|
[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) {
|
|
10
10
|
animation-duration: 180ms;
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
animation-fill-mode: both;
|
|
45
45
|
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"],
|
|
46
46
|
[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"],
|
|
47
|
-
[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="ZqdR7W" prefix="r1" component-url="/_astro/PageToggle.C6_rp-Bm.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-4"><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="ZN0Xgs" prefix="r3" component-url="/_astro/Toolbar.BmilfRHR.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-2"><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 class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></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-5"><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-6"><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-2"><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="1EjclH" component-url="/_astro/Navigation.zYUnVsp7.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <h1 data-ouia-component-type="PF6/Title" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Title-2" class="pf-v6-c-title pf-m-4xl">All components</h1><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <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"));})();;(()=>{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="1zQf7w" component-url="/_astro/SectionGallery.DqD5bUWQ.js" component-export="SectionGallery" renderer-url="/_astro/client.zs76E0tG.js" props="{"illustrations":[0],"section":[0,"components"],"galleryItemsData":[0,{"about-modal":[0,{"illustration":[0,"./images/component-illustrations/about-modal.png"],"summary":[0,"An <b>about modal</b> displays information about an application, like product version numbers and any appropriate legal text."]}],"accordion":[0,{"illustration":[0,"./images/component-illustrations/accordion.png"],"summary":[0,"An <b>accordion</b> is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content."]}],"action-list":[0,{"illustration":[0,"./images/component-illustrations/action-list.png"],"summary":[0,"An <b>action list</b> is a group of actions, controls, or buttons with built-in spacing."]}],"alert":[0,{"illustration":[0,"./images/component-illustrations/alert.png"],"summary":[0,"An <b>alert</b> is a non-intrusive notification that shares brief, important messages with users."]}],"application-launcher":[0,{"illustration":[0,"./images/component-illustrations/application-launcher.png"],"summary":[0,"An <b>application launcher</b> is a menu that allows users to launch a separate web application in a new browser window."],"label":[0,"demo"]}],"avatar":[0,{"illustration":[0,"./images/component-illustrations/avatar.png"],"summary":[0,"An <b>avatar</b> is a visual representation of a user, which can contain an image or placeholder graphic."]}],"back-to-top":[0,{"illustration":[0,"./images/component-illustrations/back-to-top.png"],"summary":[0,"The <b>back to top</b> component is a shortcut that allows users to quickly navigate to the top of a page via a button."]}],"backdrop":[0,{"illustration":[0,"./images/component-illustrations/backdrop.png"],"summary":[0,"A <b>backdrop</b> is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed."]}],"background-image":[0,{"illustration":[0,"./images/component-illustrations/background-image.png"],"summary":[0,"A <b>background image</b> is an image that fills the background of a page."]}],"badge":[0,{"illustration":[0,"./images/component-illustrations/badge.png"],"summary":[0,"A <b>badge</b> is an annotation that displays a numeric value."]}],"banner":[0,{"illustration":[0,"./images/component-illustrations/banner.png"],"summary":[0,"A <b>banner</b> is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed."]}],"brand":[0,{"illustration":[0,"./images/component-illustrations/brand.png"],"summary":[0,"A <b>brand</b> is a visual representation of a product&mdash;typically its logo."]}],"breadcrumb":[0,{"illustration":[0,"./images/component-illustrations/breadcrumb.png"],"summary":[0,"A <b>breadcrumb</b> is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently."]}],"button":[0,{"illustration":[0,"./images/component-illustrations/button.png"],"summary":[0,"A <b>button</b> is an object that communicates and triggers an action when it is clicked or selected."]}],"calendar-month":[0,{"illustration":[0,"./images/component-illustrations/calendar-month.png"],"summary":[0,"A <b>calendar month</b> component allows users to select and navigate between days, months, and years."]}],"card":[0,{"illustration":[0,"./images/component-illustrations/card.png"],"summary":[0,"A <b>card</b> is a content container that displays entry-level information&mdash;typically within dashboards, galleries, and catalogs."]}],"checkbox":[0,{"illustration":[0,"./images/component-illustrations/checkbox.png"],"summary":[0,"A <b>checkbox</b> is an input control that allows users to select a single item or multiple items from a list."]}],"chip":[0,{"illustration":[0,"./images/component-illustrations/chip.png"],"summary":[0,"A <b>chip</b> is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.<br /><br /><b>Note:</b> The chip component has been deprecated. Our new recommendation is to use <a href='/components/label'>the label component</a> instead."],"label":[0,"deprecated"]}],"clipboard-copy":[0,{"illustration":[0,"./images/component-illustrations/clipboard-copy.png"],"summary":[0,"The <b>clipboard copy</b> component allows users to quickly and easily copy content to their clipboard."]}],"code-block":[0,{"illustration":[0,"./images/component-illustrations/code-block.png"],"summary":[0,"A <b>code block</b> contains 2 or more lines of read-only code, which can be copied to a user's clipboard."]}],"code-editor":[0,{"illustration":[0,"./images/component-illustrations/code-editor.png"],"summary":[0,"A <b>code editor</b> is a versatile <a href='https://microsoft.github.io/monaco-editor/'>Monaco-based</a> text editor that supports various programming languages."]}],"content":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>content</b> component contains a block of styled HTML content."]}],"context-selector":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>context selector</b> is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources."],"label":[0,"demo"]}],"custom-menus":[0,{"illustration":[0,"./images/component-illustrations/custom-menus.png"],"summary":[0,"<b>Custom menus</b> can be created to address a variety of unique use cases, by combining <a href='/components/menus/menu'>menus</a> and <a href='/components/menus/menu-toggle'>menu toggles.</a>"],"label":[0,"demo"]}],"data-list":[0,{"illustration":[0,"./images/component-illustrations/data-list.png"],"summary":[0,"A <b>data list</b> displays large data sets and interactive content in a flexible layout."]}],"date-picker":[0,{"illustration":[0,"./images/component-illustrations/date-picker.png"],"summary":[0,"A <b>date picker</b> allows users to either manually enter a date or select a date from a calendar."]}],"date-and-time-picker":[0,{"illustration":[0,"./images/component-illustrations/date-and-time-picker.png"],"summary":[0,"A <b>date and time picker</b> allows users to select both a specific date and a time, by combining <a href='/components/date-and-time/date-picker'>date picker</a> and <a href='/components/date-and-time/time-picker'>time picker</a> components."],"label":[0,"demo"]}],"description-list":[0,{"illustration":[0,"./images/component-illustrations/description-list.png"],"summary":[0,"A <b>description list</b> displays terms and their corresponding descriptions."]}],"divider":[0,{"illustration":[0,"./images/component-illustrations/divider.png"],"summary":[0,"A <b>divider</b> is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings."]}],"drag-and-drop":[0,{"illustration":[0,"./images/component-illustrations/drag-and-drop.png"],"summary":[0,"The <b>drag and drop</b> component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts."]}],"drawer":[0,{"illustration":[0,"./images/component-illustrations/drawer.png"],"summary":[0,"A <b>drawer</b> is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content."]}],"dropdown":[0,{"illustration":[0,"./images/component-illustrations/dropdown.png"],"summary":[0,"A <b>dropdown</b> displays a menu of actions that trigger a process and as that navigate to a new location."],"label":[0,"beta"]}],"dual-list-selector":[0,{"illustration":[0,"./images/component-illustrations/dual-list-selector.png"],"summary":[0,"A <b>dual list selector</b> displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists."]}],"empty-state":[0,{"illustration":[0,"./images/component-illustrations/empty-state.png"],"summary":[0,"An <b>empty state</b> is a screen that is not yet populated with data or information&mdash;typically containing a short message and next steps for users."]}],"expandable-section":[0,{"illustration":[0,"./images/component-illustrations/expandable-section.png"],"summary":[0,"An <b>expandable section</b> is a content section with a text toggle that reveals content that is hidden by default."]}],"multiple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload-multiple.png"],"summary":[0,"A <b>multiple file upload</b> component allows users to select and upload multiple files to a specific location."]}],"simple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload.png"],"summary":[0,"A <b>simple file upload</b> component allows users to select and upload a single file to a specific location."]}],"form-control":[0,{"illustration":[0,"./images/component-illustrations/form-control.png"],"summary":[0,"A <b>form control</b> is a form element that guides users and accepts user input, such as text areas and selection menus."]}],"form":[0,{"illustration":[0,"./images/component-illustrations/form.png"],"summary":[0,"A <b>form</b> is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages."]}],"form-select":[0,{"illustration":[0,"./images/component-illustrations/form-select.png"],"summary":[0,"A <b>form select</b> is a form element that embeds browser-native menus."]}],"helper-text":[0,{"illustration":[0,"./images/component-illustrations/helper-text.png"],"summary":[0,"<b>Helper text</b> is a text-based support method that adds additional context to field inputs."]}],"hint":[0,{"illustration":[0,"./images/component-illustrations/hint.png"],"summary":[0,"A <b>hint</b> is an in-app message that shares reminders, explanations, or calls to action within a page or modal."]}],"icon":[0,{"illustration":[0,"./images/component-illustrations/icon.png"],"summary":[0,"An <b>icon</b> component is a container that supports <a href='/design-foundations/icons#all-icons'>icons</a> of varying dimensions and styles, as well as <a href='/components/spinner'>spinners.</a>"]}],"inline-edit":[0,{"illustration":[0,"./images/component-illustrations/inline-edit.png"],"summary":[0,"An <b>inline edit</b> component allows users to switch between read-only and edits views of description lists, page text elements, or tables&mdash;within the context of their current view."]}],"input-group":[0,{"illustration":[0,"./images/component-illustrations/input-group.png"],"summary":[0,"An <b>input group</b> combines multiple related controls or inputs to appear as a single control."]}],"jump-links":[0,{"illustration":[0,"./images/component-illustrations/jump-links.png"],"summary":[0,"When clicked, <b>jump links</b> allow users to navigate to sections within a page without scrolling."]}],"label":[0,{"illustration":[0,"./images/component-illustrations/label.png"],"summary":[0,"A <b>label</b> is a descriptive annotation that adds context to an element for clarity and convenience."]}],"list":[0,{"illustration":[0,"./images/component-illustrations/list.png"],"summary":[0,"A <b>list</b> component embeds a formatted list&mdash;bulleted or numbered&mdash;into page content."]}],"login-page":[0,{"illustration":[0,"./images/component-illustrations/login-page.png"],"summary":[0,"A <b>login page</b> allows a user to access an application by entering a username and password, or by authenticating using a social media login."]}],"masthead":[0,{"illustration":[0,"./images/component-illustrations/masthead.png"],"summary":[0,"A <b>masthead</b> contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application."]}],"menu-toggle":[0,{"illustration":[0,"./images/component-illustrations/menu-toggle.png"],"summary":[0,"A <b>menu toggle</b> is a selectable control that opens and closes a menu."]}],"menu":[0,{"illustration":[0,"./images/component-illustrations/menu.png"],"summary":[0,"A <b>menu</b> is a list of options or actions that users can choose from."]}],"modal":[0,{"illustration":[0,"./images/component-illustrations/modal.png"],"summary":[0,"A <b>modal</b> is a window that overlays a page to display important information, without requiring users to navigate to a new page."]}],"navigation":[0,{"illustration":[0,"./images/component-illustrations/navigation.png"],"summary":[0,"A <b>navigation</b> component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks."]}],"notification-badge":[0,{"illustration":[0,"./images/component-illustrations/notification-badge.png"],"summary":[0,"A <b>notification badge</b> is a visual indicator that alerts users about incoming notifications."]}],"notification-drawer":[0,{"illustration":[0,"./images/component-illustrations/notification-drawer.png"],"summary":[0,"A <b>notification drawer</b> contains an application's notifications, which users can view and manage without having to navigate to a new screen."]}],"number-input":[0,{"illustration":[0,"./images/component-illustrations/number-input.png"],"summary":[0,"A <b>number input</b> combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value."]}],"options-menu":[0,{"illustration":[0,"./images/component-illustrations/options-menu.png"],"summary":[0,"An <b>options menu</b> contains a set of optional settings."],"label":[0,"demo"]}],"overflow-menu":[0,{"illustration":[0,"./images/component-illustrations/overflow-menu.png"],"summary":[0,"An <b>overflow menu</b> groups a set of actions into a responsive horizontal list to help declutter the UI."]}],"page":[0,{"illustration":[0,"./images/component-illustrations/page.png"],"summary":[0,"A <b>page</b> component defines the basic layout of a page, with either vertical or horizontal navigation."]}],"pagination":[0,{"illustration":[0,"./images/component-illustrations/pagination.png"],"summary":[0,"A <b>pagination</b> component allows users to navigate through large content views that have been split across multiple pages."]}],"panel":[0,{"illustration":[0,"./images/component-illustrations/panel.png"],"summary":[0,"A <b>panel</b> is a customizable container that can contain other components in flexible content layouts."]}],"password-generator":[0,{"illustration":[0,"./images/component-illustrations/password-generator.png"],"summary":[0,"This demo demonstrates how to create an input field that generates unique passwords."],"label":[0,"demo"]}],"password-strength":[0,{"illustration":[0,"./images/component-illustrations/password-strength.png"],"summary":[0,"This demo demonstrates how to validate and display feedback about password strength."],"label":[0,"demo"]}],"popover":[0,{"illustration":[0,"./images/component-illustrations/popover.png"],"summary":[0,"A <b>popover</b> is a small overlay window that provides additional information about an on-screen element."]}],"progress-stepper":[0,{"illustration":[0,"./images/component-illustrations/progress-stepper.png"],"summary":[0,"A <b>progress stepper</b> displays a timeline of tasks in a workflow and tracks a user's progress through the workflow."]}],"progress":[0,{"illustration":[0,"./images/component-illustrations/progress.png"],"summary":[0,"A <b>progress</b> component is a horizontal bar that indicates the completion status of an ongoing process or task."]}],"radio":[0,{"illustration":[0,"./images/component-illustrations/radio.png"],"summary":[0,"A <b>radio</b> is a button that's used to present users with mutually exclusive choices."]}],"search-input":[0,{"illustration":[0,"./images/component-illustrations/search-input.png"],"summary":[0,"A <b>search input</b> is a type of input field that can be used to search, find, or filter."]}],"select":[0,{"illustration":[0,"./images/component-illustrations/select.png"],"summary":[0,"A <b>select</b> component is a menu that enables users to select 1 or more items from a list."],"label":[0,"beta"]}],"sidebar":[0,{"illustration":[0,"./images/component-illustrations/sidebar.png"],"summary":[0,"A <b>sidebar</b> is a panel that splits content into a secondary area within a page."]}],"simple-list":[0,{"illustration":[0,"./images/component-illustrations/simple-list.png"],"summary":[0,"A <b>simple list</b> displays selectable items within a page."]}],"skeleton":[0,{"illustration":[0,"./images/component-illustrations/skeleton.png"],"summary":[0,"A <b>skeleton</b> is a type of loading state that allows you to expose content incrementally."]}],"skip-to-content":[0,{"illustration":[0,"./images/component-illustrations/skip-to-content.png"],"summary":[0,"A <b>skip to content</b> component allows users to bypass navigation when using a screen reader or keyboard"]}],"slider":[0,{"illustration":[0,"./images/component-illustrations/slider.png"],"summary":[0,"A <b>slider</b> is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values."]}],"spinner":[0,{"illustration":[0,"./images/component-illustrations/spinner.png"],"summary":[0,"A <b>spinner</b> is an animated visual that indicates when a quick action is in progress."]}],"switch":[0,{"illustration":[0,"./images/component-illustrations/switch.png"],"summary":[0,"A <b>switch</b> is a control that toggles the state of a setting between on and off."]}],"tab-content":[0,{"illustration":[0,"./images/component-illustrations/tab-content.png"],"summary":[0,"A <b>tab content</b> component is used to contain content within a tab."]}],"table":[0,{"illustration":[0,"./images/component-illustrations/table.png"],"summary":[0,"A <b>table</b> displays large data sets in a simple grid with column headers."]}],"tabs":[0,{"illustration":[0,"./images/component-illustrations/tabs.png"],"summary":[0,"<b>Tabs</b> group similar content within sub-views of a page."]}],"text-area":[0,{"illustration":[0,"./images/component-illustrations/text-area.png"],"summary":[0,"A <b>text area</b> allows users to enter a longer paragraph of text."]}],"text-input-group":[0,{"illustration":[0,"./images/component-illustrations/text-input-group.png"],"summary":[0,"A <b>text input group</b> is a more custom, flexible, and composable version of a <a href='/components/forms/text-input'>text input</a> that includes elements like icons and buttons."]}],"text-input":[0,{"illustration":[0,"./images/component-illustrations/text-input.png"],"summary":[0,"A <b>text input</b> components allows users to input short text."]}],"tile":[0,{"illustration":[0,"./images/component-illustrations/tile.png"],"summary":[0,"A <b>tile</b> is a container that allows users to select a static option."],"label":[0,"deprecated"]}],"time-picker":[0,{"illustration":[0,"./images/component-illustrations/time-picker.png"],"summary":[0,"A <b>time picker</b> component allows users to select a time from a list of options."]}],"timestamp":[0,{"illustration":[0,"./images/component-illustrations/timestamp.png"],"summary":[0,"A <b>timestamp</b> is a consistently formatted visual that displays date and time values."]}],"title":[0,{"illustration":[0,"./images/component-illustrations/title.png"],"summary":[0,"A <b>title</b> component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings."]}],"toggle-group":[0,{"illustration":[0,"./images/component-illustrations/toggle-group.png"],"summary":[0,"A <b>toggle group</b> is a set of controls that can be used to quickly switch between actions or states."]}],"toolbar":[0,{"illustration":[0,"./images/component-illustrations/toolbar.png"],"summary":[0,"A <b>toolbar</b> is a responsive container that displays controls that allow users to manage and manipulate a data set."]}],"tooltip":[0,{"illustration":[0,"./images/component-illustrations/tooltip.png"],"summary":[0,"A <b>tooltip</b> is a small, temporary, overlay window that provides additional information about an on-screen element."]}],"tree-view":[0,{"illustration":[0,"./images/component-illustrations/tree-view.png"],"summary":[0,"A <b>tree view</b> is a structure that displays data in a hierarchical view."]}],"truncate":[0,{"illustration":[0,"./images/component-illustrations/truncate.png"],"summary":[0,"A <b>truncate</b> component can be used to shorten character strings&mdash;typically when the string overflows its container."]}],"wizard":[0,{"illustration":[0,"./images/component-illustrations/wizard.png"],"summary":[0,"A <b>wizard</b> is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps."]}]}],"placeholderText":[0,"Search components by name"],"countText":[0],"initialLayout":[0],"hasGridText":[0,true],"hasGridImages":[0],"hasListText":[0,true],"hasListImages":[0]}" ssr client="only" opts="{"name":"SectionGalleryBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=9E827BF1F1BF616579B588109ZmLG9pSKfJ1TafTRyQSf2Cy&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="30a5b6e7-1b87-42b0-b5a7-d70bcbe34c66">
|
|
48
|
-
let script = document.querySelector('script[data-island-id="
|
|
47
|
+
[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="ZqdR7W" prefix="r1" component-url="/_astro/PageToggle.CMZ3C1v1.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-4"><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="ZN0Xgs" prefix="r3" component-url="/_astro/Toolbar.Db10BzwI.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-2"><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 class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></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-5"><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-6"><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-2"><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="1EjclH" component-url="/_astro/Navigation.C0WYsqBi.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <h1 data-ouia-component-type="PF6/Title" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Title-2" class="pf-v6-c-title pf-m-4xl">All components</h1><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <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"));})();;(()=>{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="1zQf7w" component-url="/_astro/SectionGallery.3ABpQwE4.js" component-export="SectionGallery" renderer-url="/_astro/client.zs76E0tG.js" props="{"illustrations":[0],"section":[0,"components"],"galleryItemsData":[0,{"about-modal":[0,{"illustration":[0,"./images/component-illustrations/about-modal.png"],"summary":[0,"An <b>about modal</b> displays information about an application, like product version numbers and any appropriate legal text."]}],"accordion":[0,{"illustration":[0,"./images/component-illustrations/accordion.png"],"summary":[0,"An <b>accordion</b> is a vertically stacked list that can be expanded and collapsed to reveal and hide nested content."]}],"action-list":[0,{"illustration":[0,"./images/component-illustrations/action-list.png"],"summary":[0,"An <b>action list</b> is a group of actions, controls, or buttons with built-in spacing."]}],"alert":[0,{"illustration":[0,"./images/component-illustrations/alert.png"],"summary":[0,"An <b>alert</b> is a non-intrusive notification that shares brief, important messages with users."]}],"application-launcher":[0,{"illustration":[0,"./images/component-illustrations/application-launcher.png"],"summary":[0,"An <b>application launcher</b> is a menu that allows users to launch a separate web application in a new browser window."],"label":[0,"demo"]}],"avatar":[0,{"illustration":[0,"./images/component-illustrations/avatar.png"],"summary":[0,"An <b>avatar</b> is a visual representation of a user, which can contain an image or placeholder graphic."]}],"back-to-top":[0,{"illustration":[0,"./images/component-illustrations/back-to-top.png"],"summary":[0,"The <b>back to top</b> component is a shortcut that allows users to quickly navigate to the top of a page via a button."]}],"backdrop":[0,{"illustration":[0,"./images/component-illustrations/backdrop.png"],"summary":[0,"A <b>backdrop</b> is a screen that covers the main content of a page when a modal is opened, to prevent page interaction until the modal is dismissed."]}],"background-image":[0,{"illustration":[0,"./images/component-illustrations/background-image.png"],"summary":[0,"A <b>background image</b> is an image that fills the background of a page."]}],"badge":[0,{"illustration":[0,"./images/component-illustrations/badge.png"],"summary":[0,"A <b>badge</b> is an annotation that displays a numeric value."]}],"banner":[0,{"illustration":[0,"./images/component-illustrations/banner.png"],"summary":[0,"A <b>banner</b> is a short message that is shared with users in an unobtrusive, full-width container that cannot be dismissed."]}],"brand":[0,{"illustration":[0,"./images/component-illustrations/brand.png"],"summary":[0,"A <b>brand</b> is a visual representation of a product&mdash;typically its logo."]}],"breadcrumb":[0,{"illustration":[0,"./images/component-illustrations/breadcrumb.png"],"summary":[0,"A <b>breadcrumb</b> is a secondary navigation method that shows where users are in an application, to help them navigate more efficiently."]}],"button":[0,{"illustration":[0,"./images/component-illustrations/button.png"],"summary":[0,"A <b>button</b> is an object that communicates and triggers an action when it is clicked or selected."]}],"calendar-month":[0,{"illustration":[0,"./images/component-illustrations/calendar-month.png"],"summary":[0,"A <b>calendar month</b> component allows users to select and navigate between days, months, and years."]}],"card":[0,{"illustration":[0,"./images/component-illustrations/card.png"],"summary":[0,"A <b>card</b> is a content container that displays entry-level information&mdash;typically within dashboards, galleries, and catalogs."]}],"checkbox":[0,{"illustration":[0,"./images/component-illustrations/checkbox.png"],"summary":[0,"A <b>checkbox</b> is an input control that allows users to select a single item or multiple items from a list."]}],"chip":[0,{"illustration":[0,"./images/component-illustrations/chip.png"],"summary":[0,"A <b>chip</b> is used to communicate a value or a set of attribute-value pairs within workflows that involve filtering a set of objects.<br /><br /><b>Note:</b> The chip component has been deprecated. Our new recommendation is to use <a href='/components/label'>the label component</a> instead."],"label":[0,"deprecated"]}],"clipboard-copy":[0,{"illustration":[0,"./images/component-illustrations/clipboard-copy.png"],"summary":[0,"The <b>clipboard copy</b> component allows users to quickly and easily copy content to their clipboard."]}],"code-block":[0,{"illustration":[0,"./images/component-illustrations/code-block.png"],"summary":[0,"A <b>code block</b> contains 2 or more lines of read-only code, which can be copied to a user's clipboard."]}],"code-editor":[0,{"illustration":[0,"./images/component-illustrations/code-editor.png"],"summary":[0,"A <b>code editor</b> is a versatile <a href='https://microsoft.github.io/monaco-editor/'>Monaco-based</a> text editor that supports various programming languages."]}],"content":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>content</b> component contains a block of styled HTML content."]}],"context-selector":[0,{"illustration":[0,"./images/component-illustrations/context-selector.png"],"summary":[0,"A <b>context selector</b> is a dropdown menu placed in the global navigation, which allows you to switch a user's application context to display relevant data and resources."],"label":[0,"demo"]}],"custom-menus":[0,{"illustration":[0,"./images/component-illustrations/custom-menus.png"],"summary":[0,"<b>Custom menus</b> can be created to address a variety of unique use cases, by combining <a href='/components/menus/menu'>menus</a> and <a href='/components/menus/menu-toggle'>menu toggles.</a>"],"label":[0,"demo"]}],"data-list":[0,{"illustration":[0,"./images/component-illustrations/data-list.png"],"summary":[0,"A <b>data list</b> displays large data sets and interactive content in a flexible layout."]}],"date-picker":[0,{"illustration":[0,"./images/component-illustrations/date-picker.png"],"summary":[0,"A <b>date picker</b> allows users to either manually enter a date or select a date from a calendar."]}],"date-and-time-picker":[0,{"illustration":[0,"./images/component-illustrations/date-and-time-picker.png"],"summary":[0,"A <b>date and time picker</b> allows users to select both a specific date and a time, by combining <a href='/components/date-and-time/date-picker'>date picker</a> and <a href='/components/date-and-time/time-picker'>time picker</a> components."],"label":[0,"demo"]}],"description-list":[0,{"illustration":[0,"./images/component-illustrations/description-list.png"],"summary":[0,"A <b>description list</b> displays terms and their corresponding descriptions."]}],"divider":[0,{"illustration":[0,"./images/component-illustrations/divider.png"],"summary":[0,"A <b>divider</b> is a horizontal or vertical line that is placed between screen elements to create visual divisions and content groupings."]}],"drag-and-drop":[0,{"illustration":[0,"./images/component-illustrations/drag-and-drop.png"],"summary":[0,"The <b>drag and drop</b> component allows users to reposition, rearrange, and group items into more relevant and appropriate layouts."]}],"drawer":[0,{"illustration":[0,"./images/component-illustrations/drawer.png"],"summary":[0,"A <b>drawer</b> is a sliding panel that enters from outside of the viewport, which can be configured to either overlay content or create a sidebar by pushing content."]}],"dropdown":[0,{"illustration":[0,"./images/component-illustrations/dropdown.png"],"summary":[0,"A <b>dropdown</b> displays a menu of actions that trigger a process and as that navigate to a new location."],"label":[0,"beta"]}],"dual-list-selector":[0,{"illustration":[0,"./images/component-illustrations/dual-list-selector.png"],"summary":[0,"A <b>dual list selector</b> displays 2 interactive lists: a list of selected items and a list of available, selectable items. Users can move items between the lists."]}],"empty-state":[0,{"illustration":[0,"./images/component-illustrations/empty-state.png"],"summary":[0,"An <b>empty state</b> is a screen that is not yet populated with data or information&mdash;typically containing a short message and next steps for users."]}],"expandable-section":[0,{"illustration":[0,"./images/component-illustrations/expandable-section.png"],"summary":[0,"An <b>expandable section</b> is a content section with a text toggle that reveals content that is hidden by default."]}],"multiple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload-multiple.png"],"summary":[0,"A <b>multiple file upload</b> component allows users to select and upload multiple files to a specific location."]}],"simple-file-upload":[0,{"illustration":[0,"./images/component-illustrations/file-upload.png"],"summary":[0,"A <b>simple file upload</b> component allows users to select and upload a single file to a specific location."]}],"form-control":[0,{"illustration":[0,"./images/component-illustrations/form-control.png"],"summary":[0,"A <b>form control</b> is a form element that guides users and accepts user input, such as text areas and selection menus."]}],"form":[0,{"illustration":[0,"./images/component-illustrations/form.png"],"summary":[0,"A <b>form</b> is a group of related elements that allow users to provide data and configure options in a variety of contexts, such as within modals, wizards, and pages."]}],"form-select":[0,{"illustration":[0,"./images/component-illustrations/form-select.png"],"summary":[0,"A <b>form select</b> is a form element that embeds browser-native menus."]}],"helper-text":[0,{"illustration":[0,"./images/component-illustrations/helper-text.png"],"summary":[0,"<b>Helper text</b> is a text-based support method that adds additional context to field inputs."]}],"hint":[0,{"illustration":[0,"./images/component-illustrations/hint.png"],"summary":[0,"A <b>hint</b> is an in-app message that shares reminders, explanations, or calls to action within a page or modal."]}],"icon":[0,{"illustration":[0,"./images/component-illustrations/icon.png"],"summary":[0,"An <b>icon</b> component is a container that supports <a href='/design-foundations/icons#all-icons'>icons</a> of varying dimensions and styles, as well as <a href='/components/spinner'>spinners.</a>"]}],"inline-edit":[0,{"illustration":[0,"./images/component-illustrations/inline-edit.png"],"summary":[0,"An <b>inline edit</b> component allows users to switch between read-only and edits views of description lists, page text elements, or tables&mdash;within the context of their current view."]}],"input-group":[0,{"illustration":[0,"./images/component-illustrations/input-group.png"],"summary":[0,"An <b>input group</b> combines multiple related controls or inputs to appear as a single control."]}],"jump-links":[0,{"illustration":[0,"./images/component-illustrations/jump-links.png"],"summary":[0,"When clicked, <b>jump links</b> allow users to navigate to sections within a page without scrolling."]}],"label":[0,{"illustration":[0,"./images/component-illustrations/label.png"],"summary":[0,"A <b>label</b> is a descriptive annotation that adds context to an element for clarity and convenience."]}],"list":[0,{"illustration":[0,"./images/component-illustrations/list.png"],"summary":[0,"A <b>list</b> component embeds a formatted list&mdash;bulleted or numbered&mdash;into page content."]}],"login-page":[0,{"illustration":[0,"./images/component-illustrations/login-page.png"],"summary":[0,"A <b>login page</b> allows a user to access an application by entering a username and password, or by authenticating using a social media login."]}],"masthead":[0,{"illustration":[0,"./images/component-illustrations/masthead.png"],"summary":[0,"A <b>masthead</b> contains and organizes global properties like a logo, navigation, and settings for easy and consistent access across all pages of an application."]}],"menu-toggle":[0,{"illustration":[0,"./images/component-illustrations/menu-toggle.png"],"summary":[0,"A <b>menu toggle</b> is a selectable control that opens and closes a menu."]}],"menu":[0,{"illustration":[0,"./images/component-illustrations/menu.png"],"summary":[0,"A <b>menu</b> is a list of options or actions that users can choose from."]}],"modal":[0,{"illustration":[0,"./images/component-illustrations/modal.png"],"summary":[0,"A <b>modal</b> is a window that overlays a page to display important information, without requiring users to navigate to a new page."]}],"navigation":[0,{"illustration":[0,"./images/component-illustrations/navigation.png"],"summary":[0,"A <b>navigation</b> component organizes and communicates an application's structure and content in a central location, making it easy to find information and accomplish tasks."]}],"notification-badge":[0,{"illustration":[0,"./images/component-illustrations/notification-badge.png"],"summary":[0,"A <b>notification badge</b> is a visual indicator that alerts users about incoming notifications."]}],"notification-drawer":[0,{"illustration":[0,"./images/component-illustrations/notification-drawer.png"],"summary":[0,"A <b>notification drawer</b> contains an application's notifications, which users can view and manage without having to navigate to a new screen."]}],"number-input":[0,{"illustration":[0,"./images/component-illustrations/number-input.png"],"summary":[0,"A <b>number input</b> combines a text input field with buttons to provide users with a quick and effective way to enter and modify a numeric value."]}],"options-menu":[0,{"illustration":[0,"./images/component-illustrations/options-menu.png"],"summary":[0,"An <b>options menu</b> contains a set of optional settings."],"label":[0,"demo"]}],"overflow-menu":[0,{"illustration":[0,"./images/component-illustrations/overflow-menu.png"],"summary":[0,"An <b>overflow menu</b> groups a set of actions into a responsive horizontal list to help declutter the UI."]}],"page":[0,{"illustration":[0,"./images/component-illustrations/page.png"],"summary":[0,"A <b>page</b> component defines the basic layout of a page, with either vertical or horizontal navigation."]}],"pagination":[0,{"illustration":[0,"./images/component-illustrations/pagination.png"],"summary":[0,"A <b>pagination</b> component allows users to navigate through large content views that have been split across multiple pages."]}],"panel":[0,{"illustration":[0,"./images/component-illustrations/panel.png"],"summary":[0,"A <b>panel</b> is a customizable container that can contain other components in flexible content layouts."]}],"password-generator":[0,{"illustration":[0,"./images/component-illustrations/password-generator.png"],"summary":[0,"This demo demonstrates how to create an input field that generates unique passwords."],"label":[0,"demo"]}],"password-strength":[0,{"illustration":[0,"./images/component-illustrations/password-strength.png"],"summary":[0,"This demo demonstrates how to validate and display feedback about password strength."],"label":[0,"demo"]}],"popover":[0,{"illustration":[0,"./images/component-illustrations/popover.png"],"summary":[0,"A <b>popover</b> is a small overlay window that provides additional information about an on-screen element."]}],"progress-stepper":[0,{"illustration":[0,"./images/component-illustrations/progress-stepper.png"],"summary":[0,"A <b>progress stepper</b> displays a timeline of tasks in a workflow and tracks a user's progress through the workflow."]}],"progress":[0,{"illustration":[0,"./images/component-illustrations/progress.png"],"summary":[0,"A <b>progress</b> component is a horizontal bar that indicates the completion status of an ongoing process or task."]}],"radio":[0,{"illustration":[0,"./images/component-illustrations/radio.png"],"summary":[0,"A <b>radio</b> is a button that's used to present users with mutually exclusive choices."]}],"search-input":[0,{"illustration":[0,"./images/component-illustrations/search-input.png"],"summary":[0,"A <b>search input</b> is a type of input field that can be used to search, find, or filter."]}],"select":[0,{"illustration":[0,"./images/component-illustrations/select.png"],"summary":[0,"A <b>select</b> component is a menu that enables users to select 1 or more items from a list."],"label":[0,"beta"]}],"sidebar":[0,{"illustration":[0,"./images/component-illustrations/sidebar.png"],"summary":[0,"A <b>sidebar</b> is a panel that splits content into a secondary area within a page."]}],"simple-list":[0,{"illustration":[0,"./images/component-illustrations/simple-list.png"],"summary":[0,"A <b>simple list</b> displays selectable items within a page."]}],"skeleton":[0,{"illustration":[0,"./images/component-illustrations/skeleton.png"],"summary":[0,"A <b>skeleton</b> is a type of loading state that allows you to expose content incrementally."]}],"skip-to-content":[0,{"illustration":[0,"./images/component-illustrations/skip-to-content.png"],"summary":[0,"A <b>skip to content</b> component allows users to bypass navigation when using a screen reader or keyboard"]}],"slider":[0,{"illustration":[0,"./images/component-illustrations/slider.png"],"summary":[0,"A <b>slider</b> is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values."]}],"spinner":[0,{"illustration":[0,"./images/component-illustrations/spinner.png"],"summary":[0,"A <b>spinner</b> is an animated visual that indicates when a quick action is in progress."]}],"switch":[0,{"illustration":[0,"./images/component-illustrations/switch.png"],"summary":[0,"A <b>switch</b> is a control that toggles the state of a setting between on and off."]}],"tab-content":[0,{"illustration":[0,"./images/component-illustrations/tab-content.png"],"summary":[0,"A <b>tab content</b> component is used to contain content within a tab."]}],"table":[0,{"illustration":[0,"./images/component-illustrations/table.png"],"summary":[0,"A <b>table</b> displays large data sets in a simple grid with column headers."]}],"tabs":[0,{"illustration":[0,"./images/component-illustrations/tabs.png"],"summary":[0,"<b>Tabs</b> group similar content within sub-views of a page."]}],"text-area":[0,{"illustration":[0,"./images/component-illustrations/text-area.png"],"summary":[0,"A <b>text area</b> allows users to enter a longer paragraph of text."]}],"text-input-group":[0,{"illustration":[0,"./images/component-illustrations/text-input-group.png"],"summary":[0,"A <b>text input group</b> is a more custom, flexible, and composable version of a <a href='/components/forms/text-input'>text input</a> that includes elements like icons and buttons."]}],"text-input":[0,{"illustration":[0,"./images/component-illustrations/text-input.png"],"summary":[0,"A <b>text input</b> components allows users to input short text."]}],"tile":[0,{"illustration":[0,"./images/component-illustrations/tile.png"],"summary":[0,"A <b>tile</b> is a container that allows users to select a static option."],"label":[0,"deprecated"]}],"time-picker":[0,{"illustration":[0,"./images/component-illustrations/time-picker.png"],"summary":[0,"A <b>time picker</b> component allows users to select a time from a list of options."]}],"timestamp":[0,{"illustration":[0,"./images/component-illustrations/timestamp.png"],"summary":[0,"A <b>timestamp</b> is a consistently formatted visual that displays date and time values."]}],"title":[0,{"illustration":[0,"./images/component-illustrations/title.png"],"summary":[0,"A <b>title</b> component applies top and bottom margins, font-weight, font-size, and line-height to page and section headings."]}],"toggle-group":[0,{"illustration":[0,"./images/component-illustrations/toggle-group.png"],"summary":[0,"A <b>toggle group</b> is a set of controls that can be used to quickly switch between actions or states."]}],"toolbar":[0,{"illustration":[0,"./images/component-illustrations/toolbar.png"],"summary":[0,"A <b>toolbar</b> is a responsive container that displays controls that allow users to manage and manipulate a data set."]}],"tooltip":[0,{"illustration":[0,"./images/component-illustrations/tooltip.png"],"summary":[0,"A <b>tooltip</b> is a small, temporary, overlay window that provides additional information about an on-screen element."]}],"tree-view":[0,{"illustration":[0,"./images/component-illustrations/tree-view.png"],"summary":[0,"A <b>tree view</b> is a structure that displays data in a hierarchical view."]}],"truncate":[0,{"illustration":[0,"./images/component-illustrations/truncate.png"],"summary":[0,"A <b>truncate</b> component can be used to shorten character strings&mdash;typically when the string overflows its container."]}],"wizard":[0,{"illustration":[0,"./images/component-illustrations/wizard.png"],"summary":[0,"A <b>wizard</b> is a guided workflow that helps users complete complex tasks, create objects, or follow a series of steps."]}]}],"placeholderText":[0,"Search components by name"],"countText":[0],"initialLayout":[0],"hasGridText":[0,true],"hasGridImages":[0],"hasListText":[0,true],"hasListImages":[0]}" ssr client="only" opts="{"name":"SectionGalleryBase","value":"react"}"></astro-island> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=DAEC3B6DEE420284983E27E6vhsB1YoJgV3Z4oNlgCSxdzeR&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="4e4604d1-d9ea-4fe8-864f-0496c077cfc8">
|
|
48
|
+
let script = document.querySelector('script[data-island-id="4e4604d1-d9ea-4fe8-864f-0496c077cfc8"]');
|
|
49
49
|
|
|
50
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
50
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=DAEC3B6DEE420284983E27E6vhsB1YoJgV3Z4oNlgCSxdzeR&s=%7B%7D');
|
|
51
51
|
|
|
52
52
|
if (script) {
|
|
53
53
|
if(
|
|
@@ -69,10 +69,10 @@ if (script) {
|
|
|
69
69
|
}
|
|
70
70
|
script.remove();
|
|
71
71
|
}
|
|
72
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
73
|
-
let script = document.querySelector('script[data-island-id="
|
|
72
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=4EB384CB3002525C04D45351IgnjxZUmz3f1u69ep0cIEbnu&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="df1ff693-c930-49be-9952-d46efc101eff">
|
|
73
|
+
let script = document.querySelector('script[data-island-id="df1ff693-c930-49be-9952-d46efc101eff"]');
|
|
74
74
|
|
|
75
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
75
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=4EB384CB3002525C04D45351IgnjxZUmz3f1u69ep0cIEbnu&s=%7B%7D');
|
|
76
76
|
|
|
77
77
|
if (script) {
|
|
78
78
|
if(
|
|
@@ -4,7 +4,7 @@
|
|
|
4
4
|
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
5
5
|
<style>.ws-section-gallery .pf-v6-c-toolbar{margin-block-end:var(--pf-t--global--spacer--md)}.ws-section-gallery-item{text-decoration:inherit;color:inherit}.ws-section-gallery .pf-v6-c-card{height:100%}.ws-section-gallery .pf-v6-c-data-list{max-width:var(--pf-t--global--breakpoint--lg)}
|
|
6
6
|
</style>
|
|
7
|
-
<link rel="stylesheet" href="/_astro/LiveExample.
|
|
7
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.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"],
|
|
8
8
|
[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"],
|
|
9
9
|
[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) {
|
|
10
10
|
animation-duration: 180ms;
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
animation-fill-mode: both;
|
|
45
45
|
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"],
|
|
46
46
|
[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"],
|
|
47
|
-
[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"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><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"));})();;(()=>{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><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="1hGeDB" prefix="r0" component-url="/_astro/PageToggle.C6_rp-Bm.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-10"><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="1bqTF8" prefix="r2" component-url="/_astro/Toolbar.BmilfRHR.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-4"><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 class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></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-11"><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-12"><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-4"><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> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="1EjclH" component-url="/_astro/Navigation.zYUnVsp7.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p>You can use <strong>typography</strong> to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.</p>
|
|
47
|
+
[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"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><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"));})();;(()=>{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><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="1hGeDB" prefix="r0" component-url="/_astro/PageToggle.CMZ3C1v1.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-10"><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="1bqTF8" prefix="r2" component-url="/_astro/Toolbar.Db10BzwI.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-4"><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 class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></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-11"><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-12"><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-4"><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> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="1EjclH" component-url="/_astro/Navigation.C0WYsqBi.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <p>You can use <strong>typography</strong> to create visual hierarchy in a UI. By creating a consistent and logical hierarchy, users can more quickly scan and understand information on a page.</p>
|
|
48
48
|
<p>This page outlines PatternFly’s typography principles and standards, including token values and usage information.</p>
|
|
49
49
|
<p>You can place text content on a page using the content or title component:</p>
|
|
50
50
|
<ul>
|
|
@@ -195,10 +195,10 @@
|
|
|
195
195
|
<p>The line height of your text impacts how you should use <a href="/design-foundations/spacers">spacers</a> in your design.</p>
|
|
196
196
|
<p>Your overall line height can be calculated by multiplying the font’s built-in line height by the text size.</p>
|
|
197
197
|
<p>For example, if your font has a line height of 1.5 and a size of 16px, the final height of a line of text would be 24px (16px * 1.5 = 24px). In this example, you would consider the final line height of 24px when creating designs.</p>
|
|
198
|
-
<p><img src="/content/typography/line-height.png" alt="Correct and incorrect text spacing examples."></p> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=
|
|
199
|
-
let script = document.querySelector('script[data-island-id="
|
|
198
|
+
<p><img src="/content/typography/line-height.png" alt="Correct and incorrect text spacing examples."></p> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=41C8310E84D2E153AF265E5FwZY9%2Bm%2FZMfUUFOyQP6T%2BttUp&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="29bd7cd7-9a69-4994-a77b-c9e1dd9ee770">
|
|
199
|
+
let script = document.querySelector('script[data-island-id="29bd7cd7-9a69-4994-a77b-c9e1dd9ee770"]');
|
|
200
200
|
|
|
201
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
201
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=41C8310E84D2E153AF265E5FwZY9%2Bm%2FZMfUUFOyQP6T%2BttUp&s=%7B%7D');
|
|
202
202
|
|
|
203
203
|
if (script) {
|
|
204
204
|
if(
|
|
@@ -220,10 +220,10 @@ if (script) {
|
|
|
220
220
|
}
|
|
221
221
|
script.remove();
|
|
222
222
|
}
|
|
223
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
224
|
-
let script = document.querySelector('script[data-island-id="
|
|
223
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=8599C7415164F73340CE05C7SoCMRbnb2%2BCWJm4nh8LeNTvt&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="9f334fae-6ac7-429a-84cf-67ccf4e933ec">
|
|
224
|
+
let script = document.querySelector('script[data-island-id="9f334fae-6ac7-429a-84cf-67ccf4e933ec"]');
|
|
225
225
|
|
|
226
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
226
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=8599C7415164F73340CE05C7SoCMRbnb2%2BCWJm4nh8LeNTvt&s=%7B%7D');
|
|
227
227
|
|
|
228
228
|
if (script) {
|
|
229
229
|
if(
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<!DOCTYPE html><html lang="en" data-astro-transition-scope="astro-iidcp2e2-1"> <head><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.4.1"><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.Cainpjm5.js"></script><link rel="stylesheet" href="/_astro/_page_.D1z73Byz.css">
|
|
2
2
|
<link rel="stylesheet" href="/_astro/_page_.CtheD08_.css">
|
|
3
|
-
<link rel="stylesheet" href="/_astro/LiveExample.
|
|
3
|
+
<link rel="stylesheet" href="/_astro/LiveExample.CxJsMvEq.css">
|
|
4
4
|
<style>.ws-section-gallery .pf-v6-c-toolbar{margin-block-end:var(--pf-t--global--spacer--md)}.ws-section-gallery-item{text-decoration:inherit;color:inherit}.ws-section-gallery .pf-v6-c-card{height:100%}.ws-section-gallery .pf-v6-c-data-list{max-width:var(--pf-t--global--breakpoint--lg)}
|
|
5
5
|
</style>
|
|
6
6
|
<link rel="stylesheet" href="/_astro/_page_.DxJDkZPc.css">
|
|
@@ -44,7 +44,7 @@
|
|
|
44
44
|
animation-fill-mode: both;
|
|
45
45
|
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"],
|
|
46
46
|
[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"],
|
|
47
|
-
[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"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><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"));})();;(()=>{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><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="Z18pYTc" prefix="r0" component-url="/_astro/PageToggle.C6_rp-Bm.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-13"><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="18Qo3C" prefix="r2" component-url="/_astro/Toolbar.BmilfRHR.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-5"><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 class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></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-14"><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-15"><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-5"><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> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="1EjclH" component-url="/_astro/Navigation.zYUnVsp7.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h1 id="patternfly-component-usage-and-behavior-guidelines">PatternFly component usage and behavior guidelines</h1>
|
|
47
|
+
[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"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><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"));})();;(()=>{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><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="Z18pYTc" prefix="r0" component-url="/_astro/PageToggle.CMZ3C1v1.js" component-export="PageToggle" renderer-url="/_astro/client.zs76E0tG.js" props="{"data-astro-transition-persist":[0,"astro-u5p5alki-2"]}" ssr client="idle" opts="{"name":"PageToggle","value":true}" data-astro-transition-persist="astro-u5p5alki-2" await-children><button id="nav-toggle" aria-expanded="true" aria-label="Global navigation" class="pf-v6-c-button pf-m-plain" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-plain-13"><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="18Qo3C" prefix="r2" component-url="/_astro/Toolbar.Db10BzwI.js" component-export="Toolbar" renderer-url="/_astro/client.zs76E0tG.js" props="{}" ssr client="idle" opts="{"name":"ReactToolbar","value":true}" await-children><div class="pf-v6-c-toolbar pf-m-static" id="toolbar" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-5"><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 class="pf-v6-c-toggle-group" role="group" aria-label="Dark theme toggle group"><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button pf-m-selected" aria-pressed="true" aria-label="light theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M256 160c-52.9 0-96 43.1-96 96s43.1 96 96 96 96-43.1 96-96-43.1-96-96-96zm246.4 80.5l-94.7-47.3 33.5-100.4c4.5-13.6-8.4-26.5-21.9-21.9l-100.4 33.5-47.4-94.8c-6.4-12.8-24.6-12.8-31 0l-47.3 94.7L92.7 70.8c-13.6-4.5-26.5 8.4-21.9 21.9l33.5 100.4-94.7 47.4c-12.8 6.4-12.8 24.6 0 31l94.7 47.3-33.5 100.5c-4.5 13.6 8.4 26.5 21.9 21.9l100.4-33.5 47.3 94.7c6.4 12.8 24.6 12.8 31 0l47.3-94.7 100.4 33.5c13.6 4.5 26.5-8.4 21.9-21.9l-33.5-100.4 94.7-47.3c13-6.5 13-24.7.2-31.1zm-155.9 106c-49.9 49.9-131.1 49.9-181 0-49.9-49.9-49.9-131.1 0-181 49.9-49.9 131.1-49.9 181 0 49.9 49.9 49.9 131.1 0 181z"></path></svg></span></span></span></button></div><div class="pf-v6-c-toggle-group__item"><button type="button" class="pf-v6-c-toggle-group__button" aria-pressed="false" aria-label="dark theme toggle"><span class="pf-v6-c-toggle-group__icon"><span class="pf-v6-c-icon pf-m-md"><span class="pf-v6-c-icon__content"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M283.211 512c78.962 0 151.079-35.925 198.857-94.792 7.068-8.708-.639-21.43-11.562-19.35-124.203 23.654-238.262-71.576-238.262-196.954 0-72.222 38.662-138.635 101.498-174.394 9.686-5.512 7.25-20.197-3.756-22.23A258.156 258.156 0 0 0 283.211 0c-141.309 0-256 114.511-256 256 0 141.309 114.511 256 256 256z"></path></svg></span></span></span></button></div></div></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-14"><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-15"><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-5"><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> <script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).only=e;window.dispatchEvent(new Event("astro:only"));})();</script><astro-island uid="1EjclH" component-url="/_astro/Navigation.C0WYsqBi.js" component-export="Navigation" renderer-url="/_astro/client.zs76E0tG.js" props="{"navData":[1,[[1,[[0,{"id":[0,"contribute"],"data":[0,{"id":[0,"Contribute"],"section":[0,"get-started"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"typography"],"data":[0,{"id":[0,"Typography"],"section":[0,"design-foundations"],"sortValue":[0]}]}],[0,{"id":[0,"usage-and-behavior"],"data":[0,{"id":[0,"Usage and behavior"],"section":[0,"design-foundations"],"sortValue":[0]}]}]]],[1,[[0,{"id":[0,"allcomponents"],"data":[0,{"id":[0,"All components"],"section":[0,"components"],"sortValue":[0,1]}]}],[0,{"id":[0,"examples/accordion/accordion"],"data":[0,{"id":[0,"Accordion"],"section":[0,"components"],"sortValue":[0]}]}]]]]],"data-astro-transition-scope":[0,"astro-xikxfxwm-3"]}" ssr client="only" opts="{"name":"ReactNav","value":"react"}" data-astro-transition-scope="astro-xikxfxwm-3"></astro-island> <div class="pf-v6-c-page__main-container"> <main class="pf-v6-c-page__main"> <section class="pf-v6-c-page__main-section"><div class="pf-v6-c-page__main-body"> <section id="main-content" class="pf-v6-c-page__main-section pf-m-fill"><div class="pf-v6-c-page__main-body"> <h1 id="patternfly-component-usage-and-behavior-guidelines">PatternFly component usage and behavior guidelines</h1>
|
|
48
48
|
<p>As you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines.</p>
|
|
49
49
|
<h2 id="displaying-structured-data">Displaying structured data</h2>
|
|
50
50
|
<p>Structured data includes any information that is stored in a database or similar regular data structure. Most commonly, structure data is displayed in either a list or a table, where rows correspond to records in the database. To display this type of content, we recommend using the <strong><a href="/components/data-list">data list</a></strong> and the <strong><a href="/components/table">table</a></strong> components.</p>
|
|
@@ -344,10 +344,10 @@
|
|
|
344
344
|
|
|
345
345
|
|
|
346
346
|
|
|
347
|
-
<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to select a value or multiple values from a list.</td><td>Select</td></tr><tr><td>You want to select filter terms from a list.</td><td>Select</td></tr><tr><td>You want to make the selected value visible when the menu is closed.</td><td>Select</td></tr><tr><td>You want to select options from one or more lists (sorting options, for example).</td><td>Options menu</td></tr><tr><td>You want to expose a list of commands or actions in a limited space.</td><td>Dropdown</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=
|
|
348
|
-
let script = document.querySelector('script[data-island-id="
|
|
347
|
+
<table><thead><tr><th><strong>Use case</strong></th><th><strong>Recommended component</strong></th></tr></thead><tbody><tr><td>You want to select a value or multiple values from a list.</td><td>Select</td></tr><tr><td>You want to select filter terms from a list.</td><td>Select</td></tr><tr><td>You want to make the selected value visible when the menu is closed.</td><td>Select</td></tr><tr><td>You want to select options from one or more lists (sorting options, for example).</td><td>Options menu</td></tr><tr><td>You want to expose a list of commands or actions in a limited space.</td><td>Dropdown</td></tr></tbody></table> <div class="pf-v6-l-stack pf-m-gutter"> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/PropsTables?e=default&p=2BF86B47502A718E16982006pDDaHWSIJZoSPk3qsPT3dju2&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="8b711cb8-5762-4224-af55-f361d42562ba">
|
|
348
|
+
let script = document.querySelector('script[data-island-id="8b711cb8-5762-4224-af55-f361d42562ba"]');
|
|
349
349
|
|
|
350
|
-
let response = await fetch('/_server-islands/PropsTables?e=default&p=
|
|
350
|
+
let response = await fetch('/_server-islands/PropsTables?e=default&p=2BF86B47502A718E16982006pDDaHWSIJZoSPk3qsPT3dju2&s=%7B%7D');
|
|
351
351
|
|
|
352
352
|
if (script) {
|
|
353
353
|
if(
|
|
@@ -369,10 +369,10 @@ if (script) {
|
|
|
369
369
|
}
|
|
370
370
|
script.remove();
|
|
371
371
|
}
|
|
372
|
-
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=
|
|
373
|
-
let script = document.querySelector('script[data-island-id="
|
|
372
|
+
</script> </div> <div class="pf-v6-l-stack__item"> <!--[if astro]>server-island-start<![endif]--><link rel="preload" as="fetch" href="/_server-islands/CSSTable?e=default&p=1D674420EA8D4A6183688548qx2bpP59%2FKL4jdP1LOwu8jgt&s=%7B%7D" crossorigin="anonymous"><script async type="module" data-island-id="c471166b-d39a-4ccf-b049-c945b0de804d">
|
|
373
|
+
let script = document.querySelector('script[data-island-id="c471166b-d39a-4ccf-b049-c945b0de804d"]');
|
|
374
374
|
|
|
375
|
-
let response = await fetch('/_server-islands/CSSTable?e=default&p=
|
|
375
|
+
let response = await fetch('/_server-islands/CSSTable?e=default&p=1D674420EA8D4A6183688548qx2bpP59%2FKL4jdP1LOwu8jgt&s=%7B%7D');
|
|
376
376
|
|
|
377
377
|
if (script) {
|
|
378
378
|
if(
|