PageSourceSearch

https://patternfly-org-pr-4493-site.surge.sh/ux-writing/product-tours/

html patternfly-org-pr-4493-site.surge.sh collected 2026-10-03 14:56:13 UTC 108,330 bytes, 50 lines download raw bytes

1<!DOCTYPE html>
2<html lang="en-US">
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
6    <meta name="description" content="PatternFly is Red Hat's open source design system. It consists of components, documentation, and code for building enterprise applications at scale.">
7    <title>PatternFly • Product tours</title>
8    <link rel="shortcut icon" href="/assets/Favicon-Light.png">
9    <link rel="icon" type="image/png" sizes="16x16" href="/assets/Favicon-Light-16x16.png">
10    <link rel="icon" type="image/png" sizes="32x32" href="/assets/Favicon-Light-32x32.png">
11    <link rel="icon" type="image/png" sizes="48x48" href="/assets/Favicon-Light-48x48.png">
12    <link rel="manifest" href="/assets/manifest.json">
13    <meta name="mobile-web-app-capable" content="yes">
14    <meta name="theme-color" content="#151515">
15    <meta name="application-name" content="PatternFly docs">
16    
16<script defer src="/js/runtime.ab165efb.bundle.js"></script>
16<script defer src="/js/56056.ab0febe4.bundle.js"></script>
16<script defer src="/js/main.032e211f.bundle.js"></script>
16<link href="/css/75614.4b455374.css" rel="stylesheet">
17  </head>
18  <body>
19    <div id="root"><div style="outline:none" tabindex="-1" id="ws-router"><div id="ws-page" class="pf-v6-c-page"><div class="pf-v6-c-skip-to-content"><a href="#ws-page-main" class="pf-v6-c-button pf-m-primary" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-primary-2379"><span class="pf-v6-c-button__text">Skip to content</span></a></div><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"><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-35162"><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></span><div class="pf-v6-c-masthead__brand"><a class="pf-v6-c-masthead__logo" tabindex="0" href="/"><svg height="40px" viewBox="0 0 679 158"><title>PatternFly</title><defs><linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-website-masthead"><stop stop-color="#2B9AF3" offset="0%"></stop><stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop></linearGradient></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(206.000000, 45.750000)" fill="var(--pf-t--global--text--color--regular)" fill-rule="nonzero"><path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path><path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path><path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path><path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path><path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,
1963.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path><path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path><path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path><polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon><polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon><path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path></g><g transform="translate(0.000000, 0.000000)"><path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" fill="var(--pf-t--color--blue--50)"></path><path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" fill="url(#linearGradient-website-masthead)"></path><path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" fill="url(#linearGradient-website-masthead)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path></g></g></svg></a></div></div><div class="pf-v6-c-masthead__content"><div class="pf-v6-c-toolbar pf-m-full-height" id="pf-random-id-2501" data-ouia-component-type="PF6/Toolbar" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Toolbar-1100"><div class="pf-v6-c-toolbar__content"><div class="pf-v6-c-toolbar__content-section"><div class="pf-v6-c-toolbar__group pf-m-align-end"><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"><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></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"><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></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-35163"><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-35164"><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-1166"><span class="pf-v6-c-menu-toggle__text">Release 6.2.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></div></header><div id="page-sidebar" class="pf-v6-c-page__sidebar pf-m-expanded" aria-hidden="false"><div class="pf-v6-c-page__sidebar-body"><nav class="pf-v6-c-nav" aria-label="Side Nav" data-ouia-component-type="PF6/Nav" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Nav-1022" theme="light"><ul class="pf-v6-c-nav__list ws-side-nav-list" role="list"><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28155"><button class="pf-v6-c-nav__link" id="pf-1743695597308osqe54z8lii" aria-expanded="false">Get started<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597308osqe54z8lii" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/get-started/about-patternfly"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About PatternFly</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/get-started/contribute"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">
19Contribute</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/get-started/design"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Design</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/get-started/develop"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Develop</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/get-started/release-highlights"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Release highlights</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/get-started/upgrade"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Upgrade</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28156"><button class="pf-v6-c-nav__link" id="pf-1743695597308flmmucedi0e" aria-expanded="false">Design foundations<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597308flmmucedi0e" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/design-foundations/about-design-foundations"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About design foundations</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/design-foundations/colors"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Colors</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/design-foundations/icons"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Icons</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/design-foundations/motion"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Motion</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/design-foundations/spacers"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Spacers</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/design-foundations/typography"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Typography</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/design-foundations/usage-and-behavior"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Usage and behavior</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28157"><button class="pf-v6-c-nav__link" id="pf-1743695597308w3tucquw6pp" aria-expanded="false">Tokens<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597308w3tucquw6pp" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/tokens/about-tokens"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About tokens</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/tokens/all-patternfly-tokens"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">All PatternFly tokens</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/tokens/design-with-tokens"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Design with tokens</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/tokens/develop-with-tokens"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Develop with tokens</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28158"><button class="pf-v6-c-nav__link" id="pf-174369559730897c0ogepfl" aria-expanded="false">PatternFly AI<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-174369559730897c0ogepfl" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item">
19<a class="pf-v6-c-nav__link" href="/patternfly-ai/about-ai"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About AI</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patternfly-ai/ai-guidelines"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">AI guidelines</div></div></a></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28159"><button class="pf-v6-c-nav__link" id="pf-1743695597308x0bn2ga67y" aria-expanded="false">ChatBot<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597308x0bn2ga67y" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patternfly-ai/chatbot/overview"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Overview</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patternfly-ai/chatbot/ui"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">UI</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patternfly-ai/chatbot/messages"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Messages</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patternfly-ai/chatbot/analytics"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Analytics</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patternfly-ai/conversation-design"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Conversation design</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28160"><button class="pf-v6-c-nav__link" id="pf-1743695597309l38412n281r" aria-expanded="false">Accessibility<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597309l38412n281r" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/accessibility/about-accessibility"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About accessibility</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/accessibility/accessibility-scorecard"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Accessibility scorecard</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/accessibility/design-for-accessibility"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Design for accessibility</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/accessibility/develop-for-accessibility"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Develop for accessibility</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/accessibility/patternflys-accessibility"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">PatternFly&#x27;s accessibility</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/accessibility/testing-your-accessibility"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Testing your accessibility</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item pf-m-expanded pf-m-current" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28161"><button class="pf-v6-c-nav__link" id="pf-1743695597309fumrpzytm5c" aria-expanded="true">UX writing<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597309fumrpzytm5c"><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/about-ux-writing"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About UX writing</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/brand-voice-and-tone"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Brand voice and tone</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/capitalization"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Capitalization</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/error-messages"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Error messages</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/numerics"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Numerics</div></div></a></li><li class="pf-v6-c-nav__item"><a aria-current="page" class="pf-v6-c-nav__link pf-m-current" href="/ux-writing/product-tours"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Product tours</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/punctuation"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Punctuation</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/sentence-structure"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Sentence structure</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/terminology"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Terminology</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/tooltips"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Tooltips</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/truncation"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Truncation</div></div></a></li><li class="pf-v6-c-nav__item">
19<a class="pf-v6-c-nav__link" href="/ux-writing/units-and-symbols"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Units and symbols</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/ux-writing-best-practices"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">UX writing best practices</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/writing-for-all-audiences"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Writing for all audiences</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/ux-writing/writing-patternfly-design-guidelines"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Writing PatternFly design guidelines</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28162"><button class="pf-v6-c-nav__link" id="pf-1743695597310fqd5zbiz99" aria-expanded="false">Components<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597310fqd5zbiz99" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/all-components"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">All components</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/about-modal"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About modal</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/accordion"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Accordion</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/action-list"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Action list</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/alert"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Alert</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/avatar"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Avatar</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/back-to-top"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Back to top</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/backdrop"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Backdrop</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/background-image"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Background image</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/badge"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Badge</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/banner"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Banner</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/brand"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Brand</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/breadcrumb"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Breadcrumb</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/button"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Button</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/card"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Card</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/chip"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Chip</div><div class=""><span class="pf-v6-c-label pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Deprecated</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/clipboard-copy"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Clipboard copy</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/code-block"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Code block</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/code-editor"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Code editor</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/content"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Content</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/data-list"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Data list</div></div></a></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28163"><button class="pf-v6-c-nav__link" id="pf-1743695597310e6abspgdb1w" aria-expanded="false">Date and time<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597310e6abspgdb1w" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/date-and-time/calendar-month"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Calendar month</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/date-and-time/date-and-time-picker"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Date and time picker</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/date-and-time/date-picker"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Date picker</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/date-and-time/time-picker"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Time picker</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/description-list"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Description list</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/divider"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Divider</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/drag-and-drop"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Drag and drop</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/drawer"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Drawer</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/dual-list-selector"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Dual list selector</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/empty-state"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Empty state</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/expandable-section"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Expandable section</div></div></a></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28164"><button class="pf-v6-c-nav__link" id="pf-1743695597311irmn3i16j1a" aria-expanded="false">File upload<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597311irmn3i16j1a" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/file-upload/multiple-file-upload"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Multiple file upload</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/file-upload/simple-file-upload"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Simple file upload</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28165"><button class="pf-v6-c-nav__link" id="pf-17436955973111b3g81g6rne" aria-expanded="false">Forms<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-17436955973111b3g81g6rne" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/forms/checkbox"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Checkbox</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/forms/form"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Form</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/forms/form-control"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Form control</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/forms/form-select"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Form select</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/forms/radio"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Radio</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/forms/text-area"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Text area</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/forms/text-input"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Text input</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/helper-text"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">
19Helper text</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/hint"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Hint</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/icon"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Icon</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/inline-edit"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Inline edit</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/input-group"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Input group</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/jump-links"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Jump links</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/label"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Label</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/list"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">List</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/login-page"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Login page</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/masthead"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Masthead</div></div></a></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28166"><button class="pf-v6-c-nav__link" id="pf-1743695597311sr97pocp8u" aria-expanded="false">Menus<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597311sr97pocp8u" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/application-launcher"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Application launcher</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/context-selector"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Context selector</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/custom-menus"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Custom menus</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/dropdown"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Dropdown</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/menu"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Menu</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/menu-toggle"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Menu toggle</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/options-menu"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Options menu</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/menus/select"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Select</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/modal"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Modal</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/navigation"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Navigation</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/notification-badge"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Notification badge</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/notification-drawer"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Notification drawer</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/number-input"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Number input</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/overflow-menu"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Overflow menu</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/page"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Page</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/pagination"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Pagination</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/panel"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Panel</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/password-generator"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Password generator</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/password-strength"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Password strength</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/popover"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Popover</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/progress"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Progress</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/progress-stepper"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Progress stepper</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/search-input"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Search input</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/sidebar"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Sidebar</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/simple-list"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Simple list</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/skeleton"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Skeleton</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/skip-to-content"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Skip to content</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/slider"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Slider</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/spinner"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Spinner</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/switch"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Switch</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/table"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Table</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/tabs"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Tabs</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/text-input-group"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Text input group</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/tile"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Tile</div><div class=""><span class="pf-v6-c-label pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Deprecated</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/timestamp"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Timestamp</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/title"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Title</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/toggle-group"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Toggle group</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/toolbar"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Toolbar</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/tooltip"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Tooltip</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/tree-view"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Tree view</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/truncate"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Truncate</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/components/wizard"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Wizard</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28167"><button class="pf-v6-c-nav__link" id="pf-1743695597313i3i2kmxt48" aria-expanded="false">Patterns<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597313i3i2kmxt48" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/about-patterns"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About patterns</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/actions"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Actions</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/bulk-selection"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Bulk selection</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/card-view"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Card view</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/dashboard"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Dashboard</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/filters"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Filters</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/password-generator"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Password generator</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/password-strength"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Password strength</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/primary-detail"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Primary-detail</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/right-to-left"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Right-to-left</div><div class=""><span class="pf-v6-c-label pf-m-purple pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Demo</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/patterns/status-and-severity"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Status and severity</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28168"><button class="pf-v6-c-nav__link" id="pf-17436955973134hkzge20an" aria-expanded="false">Extensions<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-17436955973134hkzge20an" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/about-extensions"><div class="pf-v6-l-flex pf-m-
19space-items-sm"><div class="">About extensions</div></div></a></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28169"><button class="pf-v6-c-nav__link" id="pf-1743695597313ynmldht9sq" aria-expanded="false">Catalog view<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597313ynmldht9sq" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/catalog-view/catalog-item-header"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Catalog item header</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/catalog-view/catalog-tile"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Catalog tile</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/catalog-view/filter-side-panel"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Filter side panel</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/catalog-view/properties-side-panel"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Properties side panel</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/catalog-view/vertical-tabs"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Vertical tabs</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28170"><button class="pf-v6-c-nav__link" id="pf-1743695597314hqjxidmic8h" aria-expanded="false">Data view<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597314hqjxidmic8h" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/data-view/overview"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Overview</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/data-view/toolbar"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Toolbar</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/data-view/table"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Table</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/log-viewer"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Log viewer</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/quick-starts"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Quick starts</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/react-console"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">React console</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/extensions/user-feedback"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">User feedback</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28171"><button class="pf-v6-c-nav__link" id="pf-1743695597314exctn8w9ri" aria-expanded="false">Component groups<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597314exctn8w9ri" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/about-component-groups"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About component groups</div></div></a></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28172"><button class="pf-v6-c-nav__link" id="pf-1743695597314f4jpohqnz1b" aria-expanded="false">Content containers<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597314f4jpohqnz1b" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/content-containers/multi-content-card"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Multi-content card</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/content-containers/page-header"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Page header</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/content-containers/service-card"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Service card</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28173">
19<button class="pf-v6-c-nav__link" id="pf-1743695597314kt08yiszbdr" aria-expanded="false">Controls<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597314kt08yiszbdr" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/controls/bulk-select"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Bulk select</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/controls/close-button"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Close button</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/controls/responsive-actions"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Responsive actions</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28174"><button class="pf-v6-c-nav__link" id="pf-1743695597314z26mrrtrson" aria-expanded="false">Error communication<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597314z26mrrtrson" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/error-communication/error-boundary"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Error boundary</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/error-communication/error-state"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Error state</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/error-communication/maintenance"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Maintenance</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/error-communication/missing-page"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Missing page</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/error-communication/unauthorized-access"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Unauthorized access</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/error-communication/unavailable-content"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Unavailable content</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/error-communication/warning-modal"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Warning modal</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28175"><button class="pf-v6-c-nav__link" id="pf-1743695597315wnaw9wrm5kg" aria-expanded="false">Helpers<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597315wnaw9wrm5kg" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/helpers/column-management-modal"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Column management modal</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/helpers/log-sni
19ppet"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Log snippet</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/helpers/shortcut-grid"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Shortcut grid</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28176"><button class="pf-v6-c-nav__link" id="pf-1743695597315wiroc6h9lme" aria-expanded="false">Status and state indicators<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597315wiroc6h9lme" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/status-and-state-indicators/ansible"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Ansible</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/status-and-state-indicators/severity"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Severity</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/status-and-state-indicators/skeleton-table"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Skeleton table</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/status-and-state-indicators/stale-data-warning"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Stale data warning</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/status-and-state-indicators/status"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Status</div><div class=""><span class="pf-v6-c-label pf-m-blue pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Beta</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/component-groups/status-and-state-indicators/tag-count"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Tag count</div></div></a></li></ul></section></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28177"><button class="pf-v6-c-nav__link" id="pf-1743695597315llvyz8o29m" aria-expanded="false">Charts<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597315llvyz8o29m" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/about-charts"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About charts</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/area-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Area chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/bar-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Bar chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/box-plot-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Box plot chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/bullet-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Bullet chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/colors-for-charts"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Colors for charts</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/donut-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Donut chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/donut-utilization-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Donut utilization chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/legends"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Legends</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/line-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Line chart</div><div class=""><span class="pf-v6-c-label pf-m-blue pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Beta</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/patterns"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Patterns</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/pie-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Pie chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/resize-observer"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Resize observer</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/sankey-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Sankey chart</div><div class=""><span class="pf-v6-c-label pf-m-blue pf-m-filled pf-m-compact"><span class="pf-v6-c-label__content"><span class="pf-v6-c-label__text">Beta</span></span></span></div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/scatter-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Scatter chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/skeletons"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Skeletons</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/sparkline-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Sparkline chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/stack-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Stack chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/themes"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Themes</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/threshold-chart"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Threshold chart</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/charts/tooltips"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Tooltips</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28178"><button class="pf-v6-c-nav__link" id="pf-1743695597316bdtw3h9bckm" aria-expanded="false">Topology<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597316bdtw3h9bckm" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/about-topology"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About Topology</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/custom-nodes"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Custom nodes</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/custom-edges"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Custom edges</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/anchors"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Anchors</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/selection"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Selection</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/pan-and-zoom"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Pan and zoom</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/context-menu"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Context menu</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/drag-and-drop"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Drag and drop</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/control-bar"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Control bar</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/toolbar"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Toolbar</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/sidebar"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Sidebar</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/layouts"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Layouts</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/topology/pipelines"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Pipelines</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28179"><button class="pf-v6-c-nav__link" id="pf-1743695597316q7v75zzbwt" aria-expanded="false">Layouts<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597316q7v75zzbwt" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/about-layouts"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About layouts</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/bullseye"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Bullseye</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/flex"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Flex</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/gallery"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Gallery</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/grid"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Grid</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/level"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Level</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/split"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Split</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/layouts/stack"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Stack</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28180"><button class="pf-v6-c-nav__link" id="pf-17436955973173d1wjlkzu75" aria-expanded="false">Utility classes<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-17436955973173d1wjlkzu75" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item">
19<a class="pf-v6-c-nav__link" href="/utility-classes/about-utility-classes"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">About utility classes</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/accessibility"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Accessibility</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/alignment"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Alignment</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/background-color"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Background color</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/box-shadow"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Box shadow</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/display"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Display</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/flex"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Flex</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/float"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Float</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/sizing"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Sizing</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/spacing"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Spacing</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/utility-classes/text"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Text</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28181"><button class="pf-v6-c-nav__link" id="pf-1743695597317bia0rcdyvld" aria-expanded="false">Developer resources<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-1743695597317bia0rcdyvld" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/developer-resources/dark-theme-handbook"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Dark theme handbook</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/developer-resources/open-ui-automation"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Open UI Automation</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/developer-resources/right-to-left-handbook"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">Right-to-left handbook</div></div></a></li></ul></section></li><li class="pf-v6-c-nav__item" data-ouia-component-type="PF6/NavExpandable" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-NavExpandable-28182"><button class="pf-v6-c-nav__link" id="pf-17436955973178lesyyxjxm" aria-expanded="false">Training<span class="pf-v6-c-nav__toggle"><span class="pf-v6-c-nav__toggle-icon"><svg class="pf-v6-svg" viewBox="0 0 256 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"></path></svg></span></span></button><section class="pf-v6-c-nav__subnav" aria-labelledby="pf-17436955973178lesyyxjxm" hidden=""><ul class="pf-v6-c-nav__list" role="list"><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/training/html"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">HTML</div></div></a></li><li class="pf-v6-c-nav__item"><a class="pf-v6-c-nav__link" href="/training/react"><div class="pf-v6-l-flex pf-m-space-items-sm"><div class="">
19React</div></div></a></li></ul></section></li></ul></nav></div></div><div class="pf-v6-c-page__main-container"><div id="ws-page-main" class="pf-v6-c-page__main" tabindex="-1"><main style="outline:none" tabindex="-1" id="ws-page-content-router"><div class="pf-v6-c-page__main-group"><section class="pf-v6-c-page__main-section pf-m-limit-width pf-m-light-100"><div class="pf-v6-c-page__main-body"><div data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-13235" data-pf-content="true" class="pf-v6-c-content pf-m-editorial"><div class="pf-v6-l-flex pf-m-align-items-center"><div class=""><h1 data-ouia-component-type="PF6/Title" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Title-1302" id="ws-page-title" class="pf-v6-c-title pf-m-4xl">Product tours</h1></div><div class=""><div class="pf-v6-l-flex pf-m-inline-flex"></div></div></div></div></div></section><section id="main-content" class="pf-v6-c-page__main-section pf-m-fill pf-m-light-100"><div class="pf-v6-c-page__main-body"><div class="pf-v6-l-flex"><div style="max-width:825px" class="pf-v6-l-stack pf-m-gutter"><p class="pf-v6-c-content--p pf-m-editorial ws-p ">A product tour, also referred to as an &quot;onboarding flow&quot;, includes a series of dialog boxes or pop-ups that introduce users to a new tool or a redesigned tool.</p><p class="pf-v6-c-content--p pf-m-editorial ws-p ">In product tours, your UX copy is never intended only to tell a user <em class="">how</em> something works. You need to convince them that using and learning about the product is worth their time.</p><p class="pf-v6-c-content--p pf-m-editorial ws-p ">When writing a product tour, refer to the following best practice guidelines and their respective before/after example:</p><ol class="pf-v6-c-content--ol pf-m-editorial ws-ol "><li class="pf-v6-c-content--li pf-m-editorial ws-li "><p class="pf-v6-c-content--p pf-m-editorial ws-p "><strong class="">Focus on the user’s goals</strong>: Emphasize what the user can do with the product.</p><div class="ws-content-table"><table class="ws-table  pf-v6-c-table pf-m-grid-lg pf-m-compact" role="grid"><thead class="pf-v6-c-table__thead"><tr role="row" class="pf-v6-c-table__tr"><th class="undefined pf-v6-c-table__th pf-m-wrap" role="columnheader" scope="col"><div class=""><strong class="">Before</strong></div></th><th class="undefined pf-v6-c-table__th pf-m-wrap" role="columnheader" scope="col"><div class=""><strong class="">After</strong></div></th></tr></thead><tbody role="rowgroup" class="pf-v6-c-table__tbody"><tr role="row" class="pf-v6-c-table__tr"><td role="cell" class="pf-v6-c-table__td" data-label="Before"><div class="">We introduced a new feature for designing called Flyer Fact. Discover how it works by taking a tour to learn more.<br/><strong class="">OK <!-- -->|<!-- --> Cancel</strong></div></td><td role="cell" class="pf-v6-c-table__td" data-label="After"><div class="">Create consistency and design faster with Flyer Fact.<br/><strong class="">Start tour <!-- -->|<!-- --> Not now</strong></div></td></tr></tbody></table></div></li><li class="pf-v6-c-content--li pf-m-editorial ws-li "><p class="pf-v6-c-content--p pf-m-editorial ws-p "><strong class="">Be conversational</strong>: Imagine that you’re sitting beside the user and walking them through the product. Avoid jargon and be casual.</p><div class="ws-content-table"><table class="ws-table  pf-v6-c-table pf-m-grid-lg pf-m-compact" role="grid"><thead class="pf-v6-c-table__thead"><tr role="row" class="pf-v6-c-table__tr"><th class="undefined pf-v6-c-table__th pf-m-wrap" role="columnheader" scope="col"><div class=""><strong class="">Before</strong></div></th><th class="undefined pf-v6-c-table__th pf-m-wrap" role="columnheader" scope="col"><div class=""><strong class="">After</strong></div></th></tr></thead><tbody role="rowgroup" class="pf-v6-c-table__tbody"><tr role="row" class="pf-v6-c-table__tr"><td role="cell" class="pf-v6-c-table__td" data-label="Before"><div class="">There are three major areas of Flyer Fact: components, layouts, and documentation. These are for designers to utilize in order to build user experiences that serve the needs of their users.</div></td><td role="cell" class="pf-v6-c-table__td" data-label="After"><div class="">Create accessible and intuitive interfaces with Flyer Fact’s components, layouts, and documentation.</div></td></tr></tbody></table></div></li><li class="pf-v6-c-content--li pf-m-editorial ws-li "><p class="pf-v6-c-content--p pf-m-editorial ws-p "><strong class="">Empathize with the user</strong>: Learning new things can be scary, so don’t stuff your onboarding flow with exclamation marks, and avoid telling the user how hard y
19ou worked on the new tool or how excited you are. Instead, understand that the user might be a little intimidated and focus on giving them information and guidance in a straightforward way.</p><div class="ws-content-table"><table class="ws-table  pf-v6-c-table pf-m-grid-lg pf-m-compact" role="grid"><thead class="pf-v6-c-table__thead"><tr role="row" class="pf-v6-c-table__tr"><th class="undefined pf-v6-c-table__th pf-m-wrap" role="columnheader" scope="col"><div class=""><strong class="">Before</strong></div></th><th class="undefined pf-v6-c-table__th pf-m-wrap" role="columnheader" scope="col"><div class=""><strong class="">After</strong></div></th></tr></thead><tbody role="rowgroup" class="pf-v6-c-table__tbody"><tr role="row" class="pf-v6-c-table__tr"><td role="cell" class="pf-v6-c-table__td" data-label="Before"><div class="">We are so excited to announce the Flyer Fact redesign! We can’t wait to show you around.</div></td><td role="cell" class="pf-v6-c-table__td" data-label="After"><div class="">Flyer Fact has a new look. Let’s explore what you can do.</div></td></tr></tbody></table></div></li></ol><div class="pf-v6-l-stack__item"><br/><a href="https://github.com/patternfly/patternfly-org/blob/main/packages/documentation-site/patternfly-docs/content/design-guidelines/content/product-tours.md" target="_blank">Edit this page on GitHub</a></div></div></div></div></section><div class="pf-v6-c-back-to-top pf-m-hidden ws-back-to-top"><button class="pf-v6-c-button pf-m-primary" type="button" data-ouia-component-type="PF6/Button" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Button-primary-2380"><span class="pf-v6-c-button__text">Back to top</span><span class="pf-v6-c-button__icon pf-m-end"><svg class="pf-v6-svg" viewBox="0 0 320 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M177 159.7l136 136c9.4 9.4 9.4 24.6 0 33.9l-22.6 22.6c-9.4 9.4-24.6 9.4-33.9 0L160 255.9l-96.4 96.4c-9.4 9.4-24.6 9.4-33.9 0L7 329.7c-9.4-9.4-9.4-24.6 0-33.9l136-136c9.4-9.5 24.6-9.5 34-.1z"></path></svg></span></button></div></div></main><footer class="pf-v6-c-page__main-section ws-org-pfsite-l-footer"><div class="pf-v6-c-page__main-body"><div class="pf-v6-l-grid"><div class="pf-v6-l-grid__item pf-m-12-col-on-sm pf-m-6-col-on-md pf-m-offset-1-col-on-md pf-v6-u-mb-lg pf-v6-u-mb-0-on-sm"><div class="pf-v6-l-grid pf-v6-u-py-xl"><div class="pf-v6-l-grid__item pf-m-6-col-on-sm pf-m-4-col-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"><p class="ws-org-pfsite-footer-menu-list-title">What&#x27;s new</p><nav aria-label="Quick Links"><ul role="list" class="pf-v6-c-list pf-m-plain ws-org-pfsite-footer-menu-list"><li class="ws-org-pfsite-footer-menu-list-item"><span><a class="ws-org-pfsite-footer-menu-link" aria-label="Latest PatternFly upgrade guide" href="/get-started/upgrade">Upgrade</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a class="ws-org-pfsite-footer-menu-link" aria-label="PatternFly release highlights" href="/get-started/release-highlights/">Releases</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a class="ws-org-pfsite-footer-menu-link" aria-label="PatternFly&#x27;s new AI resources" href="/patternfly-ai/about-ai">PatternFly AI</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a class="ws-org-pfsite-footer-menu-link" aria-label="PatternFly&#x27;s new token system" href="/tokens/about-tokens">Tokens</a></span></li></ul></nav></div><div class="pf-v6-l-grid__item pf-m-6-col-on-sm pf-m-4-col-on-md pf-v6-u-mt-lg pf-v6-u-mt-0-on-sm pf-v6-u-ml-md pf-v6-u-ml-0-on-md pf-v6-u-mb-xl pf-v6-u-mb-0-on-md"><p class="ws-org-pfsite-footer-menu-list-title">Contribute</p><nav aria-label="Contribute"><ul role="list" class="pf-v6-c-list pf-m-plain ws-org-pfsite-footer-menu-list"><li class="ws-org-pfsite-footer-menu-list-item"><span><a class="ws-org-pfsite-footer-menu-link" aria-label="Learn about PatternFly" href="/get-started/about-patternfly">About PatternFly</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a href="https://github.com/patternfly/patternfly/blob/main/CODE_OF_CONDUCT.md" class="ws-org-pfsite-footer-menu-link" aria-label="Our code of conduct for contributions">Code of conduct</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a class="ws-org-pfsite-footer-menu-link" aria-label="Learn how to contribute to PatternFly" href="/get-started/contribute">
19Contribute</a></span></li></ul></nav></div><div class="pf-v6-l-grid__item pf-m-6-col-on-sm pf-m-4-col-on-md pf-v6-u-mt-lg pf-v6-u-mt-0-on-md pf-v6-u-ml-md pf-v6-u-ml-0-on-md"><p class="ws-org-pfsite-footer-menu-list-title">Community</p><nav aria-label="Stay in touch"><ul role="list" class="pf-v6-c-list pf-m-plain ws-org-pfsite-footer-menu-list"><li class="ws-org-pfsite-footer-menu-list-item"><span><a href="//join.slack.com/t/patternfly/shared_invite/zt-1npmqswgk-bF2R1E2rglV8jz5DNTezMQ" class="ws-org-pfsite-footer-menu-link" target="top" aria-label="Join the PatternFly Slack">Slack</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a href="//medium.com/patternfly" class="ws-org-pfsite-footer-menu-link" target="top" aria-label="Read the PatternFly blog">Blog</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a href="https://www.redhat.com/dynamic-form/instance/934b1674-bc8a-4a13-8c9d-d19abcceb263" class="ws-org-pfsite-footer-menu-link" target="top" aria-label="Join the PatternFly mailing list">Mailing list</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a href="https://calendar.google.com/calendar/embed?src=patternflyteam%40gmail.com&amp;ctz=America%2FNew_York" class="ws-org-pfsite-footer-menu-link" aria-label="Join PatternFly meetings">Calendar</a></span></li><li class="ws-org-pfsite-footer-menu-list-item"><span><a href="//github.com/orgs/patternfly/discussions" class="ws-org-pfsite-footer-menu-link" target="top" aria-label="Visit the PatternFly discussion forum">Discussions</a></span></li></ul></nav></div></div></div><div class="pf-v6-l-grid__item pf-m-12-col-on-sm pf-m-4-col-on-md"><div class="pf-v6-l-grid pf-v6-u-pt-xl pf-v6-u-pb-xl ws-org-pfsite-l-footer-column"><div class="pf-v6-l-grid__item"><a class="pf-v6-c-page__header-brand-link pf-v6-c-brand ws-org-pfsite-footer-menu-about-logo pf-v6-u-pb-md" href="/"><svg height="40px" viewBox="0 0 679 158"><title>PatternFly</title><defs><linearGradient x1="68%" y1="2.25860997e-13%" x2="32%" y2="100%" id="linearGradient-website-masthead"><stop stop-color="#2B9AF3" offset="0%"></stop><stop stop-color="#73BCF7" stop-opacity="0.502212631" offset="100%"></stop></linearGradient></defs><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(206.000000, 45.750000)" fill="var(--pf-t--global--text--color--regular)" fill-rule="nonzero"><path d="M0,65.25 L0,2.25 L33.21,2.25 C37.35,2.25 41.025,3.135 44.235,4.905 C47.445,6.675 49.98,9.09 51.84,12.15 C53.7,15.21 54.63,18.72 54.63,22.68 C54.63,26.46 53.7,29.865 51.84,32.895 C49.98,35.925 47.43,38.31 44.19,40.05 C40.95,41.79 37.29,42.66 33.21,42.66 L15.48,42.66 L15.48,65.25 L0,65.25 Z M15.48,29.88 L31.41,29.88 C33.69,29.88 35.52,29.22 36.9,27.9 C38.28,26.58 38.97,24.87 38.97,22.77 C38.97,20.61 38.28,18.855 36.9,17.505 C35.52,16.155 33.69,15.48 31.41,15.48 L15.48,15.48 L15.48,29.88 Z"></path><path d="M77.04,66.06 C73.68,66.06 70.695,65.43 68.085,64.17 C65.475,62.91 63.435,61.17 61.965,58.95 C60.495,56.73 59.76,54.18 59.76,51.3 C59.76,46.74 61.485,43.215 64.935,40.725 C68.385,38.235 73.2,36.99 79.38,36.99 C83.1,36.99 86.7,37.44 90.18,38.34 L90.18,36 C90.18,31.26 87.15,28.89 81.09,28.89 C77.49,28.89 72.69,30.15 66.69,32.67 L61.47,21.96 C69.15,18.48 76.56,16.74 83.7,16.74 C90.3,16.74 95.43,18.315 99.09,21.465 C102.75,24.615 104.58,29.04 104.58,34.74 L104.58,65.25 L90.18,65.25 L90.18,62.37 C88.26,63.69 86.235,64.635 84.105,65.205 C81.975,65.775 79.62,66.06 77.04,66.06 Z M73.62,51.03 C73.62,52.53 74.28,53.7 75.6,54.54 C76.92,55.38 78.75,55.8 81.09,55.8 C84.69,55.8 87.72,55.05 90.18,53.55 L90.18,47.43 C87.42,46.71 84.54,46.35 81.54,46.35 C79.02,46.35 77.07,46.755 75.69,47.565 C74.31,48.375 73.62,49.53 73.62,51.03 Z"></path><path d="M137.25,65.88 C125.73,65.88 119.97,60.84 119.97,50.76 L119.97,29.79 L110.34,29.79 L110.34,17.64 L119.97,17.64 L119.97,5.4 L134.55,2.25 L134.55,17.64 L147.87,17.64 L147.87,29.79 L134.55,29.79 L134.55,47.88 C134.55,49.98 135.015,51.465 135.945,52.335 C136.875,53.205 138.51,53.64 140.85,53.64 C143.01,53.64 145.2,53.31 147.42,52.65 L147.42,64.44 C146.1,64.86 144.42,65.205 142.38,65.475 C140.34,65.745 138.63,65.88 137.25,65.88 Z"></path><path d="M177.57,65.88 C166.05,65.88 160.29,60.84 160.29,50.76 L160.29,29.79 L150.66,29.79 L150.66,17.64 L160.29,17.64 L160.29,5.4 L174.87,2.25 L174.87,17.64 L188.19,17.64 L188.19,29.79 L174.87,29.79 L174.87,47.88 C174.87,49.98 175.335,51.465 176.265,52.335 C177.195,53.205 178.83,53.64 181.17,53.64 C183.33,53.64 185.52,53.31 187.74,52.65 L187.74,64.44 C186.42,64.86 184.74,65.205 182.7,65.475 C180.66,65.745 178.95,65.88 177.57,65.88 Z"></path><path d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,
1963.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"></path><path d="M247.41,65.25 L247.41,17.64 L261.99,17.64 L261.99,22.41 C265.23,18.51 269.4,16.56 274.5,16.56 C277.08,16.62 278.91,17.01 279.99,17.73 L279.99,30.42 C277.95,29.46 275.64,28.98 273.06,28.98 C270.78,28.98 268.665,29.505 266.715,30.555 C264.765,31.605 263.19,33.09 261.99,35.01 L261.99,65.25 L247.41,65.25 Z"></path><path d="M286.29,65.25 L286.29,17.64 L300.87,17.64 L300.87,20.88 C304.47,18.12 308.73,16.74 313.65,16.74 C317.37,16.74 320.655,17.55 323.505,19.17 C326.355,20.79 328.59,23.04 330.21,25.92 C331.83,28.8 332.64,32.13 332.64,35.91 L332.64,65.25 L318.06,65.25 L318.06,37.89 C318.06,35.25 317.28,33.15 315.72,31.59 C314.16,30.03 312.06,29.25 309.42,29.25 C305.76,29.25 302.91,30.51 300.87,33.03 L300.87,65.25 L286.29,65.25 Z"></path><polygon points="342 65.25 342 2.25 392.04 2.25 392.04 15.66 357.48 15.66 357.48 27.45 380.52 27.45 380.52 40.41 357.48 40.41 357.48 65.25"></polygon><polygon points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"></polygon><path d="M429.21,84.69 C428.07,84.69 426.96,84.645 425.88,84.555 C424.8,84.465 423.9,84.33 423.18,84.15 L423.18,71.73 C424.38,71.97 425.88,72.09 427.68,72.09 C432.36,72.09 435.51,70.05 437.13,65.97 L437.13,65.88 L418.86,17.64 L434.97,17.64 L445.5,47.61 L457.74,17.64 L473.49,17.64 L452.16,67.68 C450.42,71.82 448.5,75.135 446.4,77.625 C444.3,80.115 441.87,81.915 439.11,83.025 C436.35,84.135 433.05,84.69 429.21,84.69 Z"></path></g><g transform="translate(0.000000, 0.000000)"><path d="M61.826087,0 L158,0 L158,96.173913 L147.695652,96.173913 C100.271201,96.173913 61.826087,57.7287992 61.826087,10.3043478 L61.826087,0 L61.826087,0 Z" fill="var(--pf-t--color--blue--50)"></path><path d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z" fill="url(#linearGradient-website-masthead)"></path><path d="M123.652174,-30.9130435 L30.9130435,123.652174 L103.652174,123.652174 C114.697869,123.652174 123.652174,114.697869 123.652174,103.652174 L123.652174,-30.9130435 L123.652174,-30.9130435 Z" fill="url(#linearGradient-website-masthead)" transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "></path></g></g></svg></a><p data-ouia-component-type="PF6/Content" data-ouia-safe="true" data-ouia-component-id="OUIA-Generated-Content-13236" data-pf-content="true" class="pf-v6-c-content--p pf-m-editorial ws-org-pfsite-footer-menu-about-description">PatternFly is an open source design system built to drive consistency and unify teams. From documentation and components to code examples and tutorials, PatternFly is a place where design and development can thrive. We’re on a mission to help teams build consistent, accessible, and scalable enterprise product experiences—the open source way.</p></div><div class="pf-v6-l-grid__item ws-org-pfsite-footer-menu-social-links"><a href="//github.com/patternfly" target="top" aria-label="Link to PatternFly GitHub page"><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></a><a href="//x.com/patternfly" target="top" aria-label="Link to PatternFly X page"><svg class="pf-v6-svg" viewBox="0 0 512 512" fill="currentColor" aria-hidden="true" role="img" width="1em" height="1em"><path d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"></path></svg></a></div></div></div></div></div></footer><section class="pf-v6-c-page__main-section ws-org-pfsite-l-footer-dark pf-m-no-fill"><div class="pf-v6-c-page__main-body"><div class="pf-v6-l-grid pf-m-gutter pf-v6-u-py-xl-on-sm pf-v6-u-py-0-on-md pf-v6-u-align-items-center"><div class="pf-v6-l-grid__item pf-m-2-col-on-md pf-m-offset-1-col-on-md"><a href="//www.redhat.com" target="top"><img src="/images/RHLogoDark.baf03961fc7be6d5.png" alt="Red Hat" width="145px" height="613px"/></a></div><div class="pf-v6-l-grid__item pf-m-3-col-on-md pf-m-3-col-on-lg pf-m-2-col-on-xl"><span class="ws-org-pfsite-site-copyright">Copyright © 2014-<!-- -->2025<!-- --> Red Hat, Inc.</span></div><div class="pf-v6-l-grid__item pf-m-5-col-on-md pf-m-5-col-on-lg pf-v6-u-ml-xl-on-xl"><a href="//www.redhat.com/en/about/privacy-policy" target="top" aria-label="Privacy statement">Privacy statement</a><a href="//www.redhat.com/en/about/terms-use" target="top" aria-label="Terms of use">Terms of use</a><a href="//www.redhat.com/en/about/all-policies-guidelines" target="top" aria-label="All policies and guidelines">All policies and guidelines</a></div></div></div></section></div></div></div><div id="ws-page-banners"></div></div></div>
20    
21    
22    
22<script
23      async
24      crossorigin
25      type="module"
26      src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"
27    ></script>
27
28    <link
29      href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
30      crossorigin
31      rel="stylesheet"
32      media="print"
33      onload="this.media='all'; this.onload=null;"
34    >
35    
36    
37      <!-- Global site tag (gtag.js) - Google Analytics -->
vendor: 70 bytes, lines 37-38
37
38      <script async src="https://www.googletagmanager.com/gtag/js?id=
38G-XRM3R81HJ6
vendor: 18 bytes, lines 38-39
38"></script>
39      
39<script>
40        if(!(parseInt(navigator.doNotTrack) === 1 || parseInt(window.doNotTrack) === 1 || parseInt(navigator.msDoNotTrack) === 1 || navigator.doNotTrack === "yes")) {
41          
vendor: 158 bytes, lines 41-45
41window.dataLayer = window.dataLayer || [];
42          function gtag(){dataLayer.push(arguments);}
43          gtag('js', new Date());
44
45          gtag('config', '
45G-XRM3R81HJ6
vendor: 12 bytes, lines 45-46
45');
46        
46}
47      </script>
47
48    
49  </body>
50</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.