@patternfly/patternfly 6.5.0-prerelease.39 → 6.5.0-prerelease.40

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/base/patternfly-common.css +4 -0
  2. package/base/patternfly-common.scss +3 -0
  3. package/components/Table/table-grid.css +28 -36
  4. package/components/Table/table-grid.scss +4 -4
  5. package/components/_index.css +28 -36
  6. package/docs/components/Table/examples/Table.md +1 -0
  7. package/docs/demos/Table/examples/Table.md +1847 -0
  8. package/package.json +1 -1
  9. package/patternfly-base-no-globals.css +4 -0
  10. package/patternfly-base.css +4 -0
  11. package/patternfly-no-globals.css +32 -36
  12. package/patternfly.css +32 -36
  13. package/patternfly.min.css +1 -1
  14. package/patternfly.min.css.map +1 -1
package/docs/demos/Table/examples/Table.md CHANGED
@@ -16581,3 +16581,1850 @@ By default, table cell alignment is set to baseline. This retains vertical align
16581
16581
  </div>
16582
16582
 
16583
16583
  ```
16584
+
16585
+ ### Container query with drawer
16586
+
16587
+ This demo shows how tables can use container queries to respond to the size of their container. The drawer panel is defined as a container using `container-type: inline-size; container-name: pf-v6-contain-table`. This allows the table in the drawer to respond to the panel's width rather than the viewport width.
16588
+
16589
+ Because the table in the main content area does not have a specific container around it, its responsive behavior defaults to the container specified on the `:root` element.
16590
+
16591
+ Note that the table in the main content area uses the `pf-m-grid-lg` modifier and will change between the stacked and grid layout when the viewport reaches the large breakpoint. The table in the drawer uses the medium breakpoint, but changes from stacked to grid layout when its container (the drawer) reaches the medium breakpoint.
16592
+
16593
+ ```html isFullscreen
16594
+ <div class="pf-v6-c-page" id="table-drawer-container">
16595
+ <div class="pf-v6-c-skip-to-content">
16596
+ <a
16597
+ class="pf-v6-c-button pf-m-primary"
16598
+ href="#main-content-table-drawer-container"
16599
+ >
16600
+ <span class="pf-v6-c-button__text">Skip to content</span>
16601
+ </a>
16602
+ </div>
16603
+ <header class="pf-v6-c-masthead" id="table-drawer-container-docked">
16604
+ <div class="pf-v6-c-masthead__main">
16605
+ <span class="pf-v6-c-masthead__toggle">
16606
+ <button
16607
+ class="pf-v6-c-button pf-m-hamburger pf-m-plain"
16608
+ type="button"
16609
+ aria-label="Global navigation"
16610
+ >
16611
+ <span class="pf-v6-c-button__icon">
16612
+ <svg
16613
+ viewBox="0 0 10 10"
16614
+ class="pf-v6-c-button--hamburger-icon pf-v6-svg"
16615
+ width="1em"
16616
+ height="1em"
16617
+ >
16618
+ <path class="pf-v6-c-button--hamburger-icon--top" d="M1,1 L9,1" />
16619
+ <path
16620
+ class="pf-v6-c-button--hamburger-icon--middle"
16621
+ d="M1,5 L9,5"
16622
+ />
16623
+ <path
16624
+ class="pf-v6-c-button--hamburger-icon--arrow"
16625
+ d="M1,5 L1,5 L1,5"
16626
+ />
16627
+ <path
16628
+ class="pf-v6-c-button--hamburger-icon--bottom"
16629
+ d="M9,9 L1,9"
16630
+ />
16631
+ </svg>
16632
+ </span>
16633
+ </button>
16634
+ </span>
16635
+ <div class="pf-v6-c-masthead__brand">
16636
+ <a class="pf-v6-c-masthead__logo" href="#">
16637
+ <svg height="37px" viewBox="0 0 679 158">
16638
+ <title>PF-HorizontalLogo-Color</title>
16639
+ <defs>
16640
+ <linearGradient
16641
+ x1="68%"
16642
+ y1="2.25860997e-13%"
16643
+ x2="32%"
16644
+ y2="100%"
16645
+ id="linearGradient-table-drawer-container-docked"
16646
+ >
16647
+ <stop stop-color="#2B9AF3" offset="0%" />
16648
+ <stop
16649
+ stop-color="#73BCF7"
16650
+ stop-opacity="0.502212631"
16651
+ offset="100%"
16652
+ />
16653
+ </linearGradient>
16654
+ </defs>
16655
+ <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
16656
+ <g
16657
+ transform="translate(206.000000, 45.750000)"
16658
+ fill="var(--pf-t--global--text--color--regular)"
16659
+ fill-rule="nonzero"
16660
+ >
16661
+ <path
16662
+ 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"
16663
+ />
16664
+ <path
16665
+ 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"
16666
+ />
16667
+ <path
16668
+ 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"
16669
+ />
16670
+ <path
16671
+ 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"
16672
+ />
16673
+ <path
16674
+ d="M217.62,66.15 C212.76,66.15 208.365,65.055 204.435,62.865 C200.505,60.675 197.4,57.72 195.12,54 C192.84,50.28 191.7,46.11 191.7,41.49 C191.7,36.87 192.795,32.7 194.985,28.98 C197.175,25.26 200.16,22.305 203.94,20.115 C207.72,17.925 211.92,16.83 216.54,16.83 C221.22,16.83 225.36,17.955 228.96,20.205 C232.56,22.455 235.395,25.53 237.465,29.43 C239.535,33.33 240.57,37.8 240.57,42.84 L240.57,46.44 L206.64,46.44 C207.6,48.66 209.1,50.475 211.14,51.885 C213.18,53.295 215.58,54 218.34,54 C222.42,54 225.6,52.8 227.88,50.4 L237.51,58.95 C234.51,61.47 231.435,63.3 228.285,64.44 C225.135,65.58 221.58,66.15 217.62,66.15 Z M206.37,36.27 L226.26,36.27 C225.48,33.99 224.205,32.16 222.435,30.78 C220.665,29.4 218.61,28.71 216.27,28.71 C213.87,28.71 211.8,29.37 210.06,30.69 C208.32,32.01 207.09,33.87 206.37,36.27 Z"
16675
+ />
16676
+ <path
16677
+ 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"
16678
+ />
16679
+ <path
16680
+ 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"
16681
+ />
16682
+ <polygon
16683
+ 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"
16684
+ />
16685
+ <polygon
16686
+ points="399.96 65.25 399.96 2.25 414.54 0 414.54 65.25"
16687
+ />
16688
+ <path
16689
+ 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"
16690
+ />
16691
+ </g>
16692
+ <g transform="translate(0.000000, 0.000000)">
16693
+ <path
16694
+ 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"
16695
+ fill="#0066CC"
16696
+ />
16697
+ <path
16698
+ d="M158,3.43478261 L65.2608696,158 L138,158 C149.045695,158 158,149.045695 158,138 L158,3.43478261 L158,3.43478261 Z"
16699
+ fill="url(#linearGradient-table-drawer-container-docked)"
16700
+ />
16701
+ <path
16702
+ 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"
16703
+ fill="url(#linearGradient-table-drawer-container-docked)"
16704
+ transform="translate(77.282609, 46.369565) scale(1, -1) rotate(90.000000) translate(-77.282609, -46.369565) "
16705
+ />
16706
+ </g>
16707
+ </g>
16708
+ </svg>
16709
+ </a>
16710
+ </div>
16711
+ </div>
16712
+ <div class="pf-v6-c-masthead__content">
16713
+ <div
16714
+ class="pf-v6-c-toolbar pf-m-static"
16715
+ id="table-drawer-container-docked-toolbar"
16716
+ >
16717
+ <div class="pf-v6-c-toolbar__content">
16718
+ <div class="pf-v6-c-toolbar__content-section">
16719
+ <div
16720
+ class="pf-v6-c-toolbar__group pf-m-align-end pf-m-spacer-none pf-m-spacer-md-on-md pf-m-action-group-plain"
16721
+ >
16722
+ <div
16723
+ class="pf-v6-c-toolbar__group pf-m-hidden pf-m-visible-on-lg pf-m-action-group-plain"
16724
+ >
16725
+ <div class="pf-v6-c-toolbar__item">
16726
+ <button
16727
+ class="pf-v6-c-menu-toggle pf-m-plain"
16728
+ type="button"
16729
+ aria-expanded="false"
16730
+ aria-label="Application launcher"
16731
+ >
16732
+ <span class="pf-v6-c-menu-toggle__icon">
16733
+ <i class="fas fa-th" aria-hidden="true"></i>
16734
+ </span>
16735
+ </button>
16736
+ </div>
16737
+ <div class="pf-v6-c-toolbar__item">
16738
+ <button
16739
+ class="pf-v6-c-menu-toggle pf-m-settings pf-m-plain"
16740
+ type="button"
16741
+ aria-expanded="false"
16742
+ aria-label="Settings"
16743
+ >
16744
+ <span class="pf-v6-c-menu-toggle__icon">
16745
+ <i class="fas fa-cog" aria-hidden="true"></i>
16746
+ </span>
16747
+ </button>
16748
+ </div>
16749
+ <div class="pf-v6-c-toolbar__item">
16750
+ <button
16751
+ class="pf-v6-c-menu-toggle pf-m-plain"
16752
+ type="button"
16753
+ aria-expanded="false"
16754
+ aria-label="Help"
16755
+ >
16756
+ <span class="pf-v6-c-menu-toggle__icon">
16757
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
16758
+ </span>
16759
+ </button>
16760
+ </div>
16761
+ </div>
16762
+
16763
+ <div class="pf-v6-c-toolbar__item pf-m-hidden-on-lg">
16764
+ <button
16765
+ class="pf-v6-c-menu-toggle pf-m-plain"
16766
+ type="button"
16767
+ aria-expanded="false"
16768
+ aria-label="Actions"
16769
+ >
16770
+ <span class="pf-v6-c-menu-toggle__icon">
16771
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
16772
+ </span>
16773
+ </button>
16774
+ </div>
16775
+ </div>
16776
+ </div>
16777
+ </div>
16778
+ </div>
16779
+ </div>
16780
+ </header>
16781
+ <div class="pf-v6-c-page__sidebar">
16782
+ <div class="pf-v6-c-page__sidebar-body">
16783
+ <nav
16784
+ class="pf-v6-c-nav"
16785
+ id="table-drawer-container-primary-nav"
16786
+ aria-label="Global"
16787
+ >
16788
+ <ul class="pf-v6-c-nav__list" role="list">
16789
+ <li class="pf-v6-c-nav__item">
16790
+ <a href="#" class="pf-v6-c-nav__link">
16791
+ <span class="pf-v6-c-nav__link-text">System panel</span>
16792
+ </a>
16793
+ </li>
16794
+ <li class="pf-v6-c-nav__item">
16795
+ <a
16796
+ href="#"
16797
+ class="pf-v6-c-nav__link pf-m-current"
16798
+ aria-current="page"
16799
+ >
16800
+ <span class="pf-v6-c-nav__link-text">Policy</span>
16801
+ </a>
16802
+ </li>
16803
+ <li class="pf-v6-c-nav__item">
16804
+ <a href="#" class="pf-v6-c-nav__link">
16805
+ <span class="pf-v6-c-nav__link-text">Authentication</span>
16806
+ </a>
16807
+ </li>
16808
+ <li class="pf-v6-c-nav__item">
16809
+ <a href="#" class="pf-v6-c-nav__link">
16810
+ <span class="pf-v6-c-nav__link-text">Network services</span>
16811
+ </a>
16812
+ </li>
16813
+ <li class="pf-v6-c-nav__item">
16814
+ <a href="#" class="pf-v6-c-nav__link">
16815
+ <span class="pf-v6-c-nav__link-text">Server</span>
16816
+ </a>
16817
+ </li>
16818
+ </ul>
16819
+ </nav>
16820
+ </div>
16821
+ </div>
16822
+ <div class="pf-v6-c-page__main-container" tabindex="-1">
16823
+ <main
16824
+ class="pf-v6-c-page__main"
16825
+ tabindex="-1"
16826
+ id="main-content-table-drawer-container"
16827
+ >
16828
+ <section class="pf-v6-c-page__main-breadcrumb pf-m-limit-width">
16829
+ <div class="pf-v6-c-page__main-body">
16830
+ <nav class="pf-v6-c-breadcrumb" aria-label="breadcrumb">
16831
+ <ol class="pf-v6-c-breadcrumb__list" role="list">
16832
+ <li class="pf-v6-c-breadcrumb__item">
16833
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section home</a>
16834
+ </li>
16835
+ <li class="pf-v6-c-breadcrumb__item">
16836
+ <span class="pf-v6-c-breadcrumb__item-divider">
16837
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16838
+ </span>
16839
+
16840
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
16841
+ </li>
16842
+ <li class="pf-v6-c-breadcrumb__item">
16843
+ <span class="pf-v6-c-breadcrumb__item-divider">
16844
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16845
+ </span>
16846
+
16847
+ <a href="#" class="pf-v6-c-breadcrumb__link">Section title</a>
16848
+ </li>
16849
+ <li class="pf-v6-c-breadcrumb__item">
16850
+ <span class="pf-v6-c-breadcrumb__item-divider">
16851
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
16852
+ </span>
16853
+
16854
+ <a
16855
+ href="#"
16856
+ class="pf-v6-c-breadcrumb__link pf-m-current"
16857
+ aria-current="page"
16858
+ >Section landing</a>
16859
+ </li>
16860
+ </ol>
16861
+ </nav>
16862
+ </div>
16863
+ </section>
16864
+ <section class="pf-v6-c-page__main-section pf-m-limit-width">
16865
+ <div class="pf-v6-c-page__main-body">
16866
+ <h1 class="pf-v6-c-content--h1 pf-m-page-title">Main title</h1>
16867
+ <p class="pf-v6-c-content--p">This is a full page demo.</p>
16868
+ </div>
16869
+ </section>
16870
+ <section class="pf-v6-c-page__main-section pf-m-no-padding">
16871
+ <div class="pf-v6-c-page__main-body">
16872
+ <div class="pf-v6-c-drawer pf-m-expanded pf-m-inline">
16873
+ <div class="pf-v6-c-drawer__main">
16874
+ <div class="pf-v6-c-drawer__content">
16875
+ <div class="pf-v6-c-drawer__body">
16876
+ <div class="pf-v6-c-drawer__body pf-m-padding">
16877
+ <div
16878
+ class="pf-v6-c-toolbar"
16879
+ id="table-drawer-container-main-toolbar"
16880
+ >
16881
+ <div class="pf-v6-c-toolbar__content">
16882
+ <div
16883
+ class="pf-v6-c-toolbar__content-section pf-m-nowrap"
16884
+ >
16885
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
16886
+ <div
16887
+ class="pf-v6-c-menu-toggle pf-m-split-button"
16888
+ id="table-drawer-container-main-toolbar-check"
16889
+ >
16890
+ <label
16891
+ class="pf-v6-c-check pf-m-standalone"
16892
+ for="table-drawer-container-main-toolbar-check-check-input"
16893
+ >
16894
+ <input
16895
+ class="pf-v6-c-check__input"
16896
+ type="checkbox"
16897
+ id="table-drawer-container-main-toolbar-check-check-input"
16898
+ name="table-drawer-container-main-toolbar-check-check-input"
16899
+ aria-label="Standalone check"
16900
+ />
16901
+ </label>
16902
+ <button
16903
+ class="pf-v6-c-menu-toggle__button"
16904
+ type="button"
16905
+ aria-expanded="false"
16906
+ id="table-drawer-container-main-toolbar-menu-toggle-toggle-button"
16907
+ aria-label="Menu toggle"
16908
+ >
16909
+ <span class="pf-v6-c-menu-toggle__controls">
16910
+ <span
16911
+ class="pf-v6-c-menu-toggle__toggle-icon"
16912
+ >
16913
+ <i
16914
+ class="fas fa-caret-down fa-fw"
16915
+ aria-hidden="true"
16916
+ ></i>
16917
+ </span>
16918
+ </span>
16919
+ </button>
16920
+ </div>
16921
+ </div>
16922
+
16923
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
16924
+ <div
16925
+ class="pf-v6-c-input-group"
16926
+ aria-label="search filter"
16927
+ role="group"
16928
+ >
16929
+ <div class="pf-v6-c-input-group__item">
16930
+ <button
16931
+ class="pf-v6-c-menu-toggle"
16932
+ type="button"
16933
+ aria-expanded="false"
16934
+ id="table-drawer-container-main-toolbar-search-filter-menu"
16935
+ >
16936
+ <span class="pf-v6-c-menu-toggle__icon">
16937
+ <i class="fas fa-filter" aria-hidden="true"></i>
16938
+ </span>
16939
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
16940
+ <span class="pf-v6-c-menu-toggle__controls">
16941
+ <span
16942
+ class="pf-v6-c-menu-toggle__toggle-icon"
16943
+ >
16944
+ <i
16945
+ class="fas fa-caret-down fa-fw"
16946
+ aria-hidden="true"
16947
+ ></i>
16948
+ </span>
16949
+ </span>
16950
+ </button>
16951
+ </div>
16952
+ <div class="pf-v6-c-input-group__item pf-m-fill">
16953
+ <div class="pf-v6-c-text-input-group">
16954
+ <div
16955
+ class="pf-v6-c-text-input-group__main pf-m-icon"
16956
+ >
16957
+ <span
16958
+ class="pf-v6-c-text-input-group__text"
16959
+ >
16960
+ <span
16961
+ class="pf-v6-c-text-input-group__icon"
16962
+ >
16963
+ <i class="fas fa-fw fa-search"></i>
16964
+ </span>
16965
+ <input
16966
+ class="pf-v6-c-text-input-group__text-input"
16967
+ type="text"
16968
+ placeholder="Filter by name"
16969
+ value
16970
+ aria-label="Search input"
16971
+ />
16972
+ </span>
16973
+ </div>
16974
+ </div>
16975
+ </div>
16976
+ </div>
16977
+ </div>
16978
+
16979
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
16980
+ <div class="pf-v6-c-pagination pf-m-compact">
16981
+ <div class="pf-v6-c-pagination__page-menu">
16982
+ <button
16983
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
16984
+ type="button"
16985
+ aria-expanded="false"
16986
+ aria-label="Menu toggle"
16987
+ id="table-drawer-container-main-toolbar-top-pagination"
16988
+ >
16989
+ <span class="pf-v6-c-menu-toggle__text">
16990
+ <b>1 - 10</b>&nbsp;of&nbsp;
16991
+ <b>36</b>
16992
+ </span>
16993
+ <span class="pf-v6-c-menu-toggle__controls">
16994
+ <span
16995
+ class="pf-v6-c-menu-toggle__toggle-icon"
16996
+ >
16997
+ <i
16998
+ class="fas fa-caret-down fa-fw"
16999
+ aria-hidden="true"
17000
+ ></i>
17001
+ </span>
17002
+ </span>
17003
+ </button>
17004
+ </div>
17005
+ <nav
17006
+ class="pf-v6-c-pagination__nav"
17007
+ aria-label="Toolbar top pagination"
17008
+ >
17009
+ <div
17010
+ class="pf-v6-c-pagination__nav-control pf-m-prev"
17011
+ >
17012
+ <button
17013
+ class="pf-v6-c-button pf-m-plain"
17014
+ type="button"
17015
+ disabled
17016
+ aria-label="Go to previous page"
17017
+ >
17018
+ <span class="pf-v6-c-button__icon">
17019
+ <i
17020
+ class="fas fa-angle-left"
17021
+ aria-hidden="true"
17022
+ ></i>
17023
+ </span>
17024
+ </button>
17025
+ </div>
17026
+ <div
17027
+ class="pf-v6-c-pagination__nav-control pf-m-next"
17028
+ >
17029
+ <button
17030
+ class="pf-v6-c-button pf-m-plain"
17031
+ type="button"
17032
+ aria-label="Go to next page"
17033
+ >
17034
+ <span class="pf-v6-c-button__icon">
17035
+ <i
17036
+ class="fas fa-angle-right"
17037
+ aria-hidden="true"
17038
+ ></i>
17039
+ </span>
17040
+ </button>
17041
+ </div>
17042
+ </nav>
17043
+ </div>
17044
+ </div>
17045
+ </div>
17046
+
17047
+ <div
17048
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
17049
+ id="table-drawer-container-main-toolbar-expandable-content"
17050
+ hidden
17051
+ ></div>
17052
+ </div>
17053
+ </div>
17054
+ <table
17055
+ class="pf-v6-c-table pf-m-grid-md pf-m-grid-lg"
17056
+ role="grid"
17057
+ aria-label="This is a table with checkboxes"
17058
+ id="table-drawer-container-table"
17059
+ >
17060
+ <thead class="pf-v6-c-table__thead">
17061
+ <tr class="pf-v6-c-table__tr" role="row">
17062
+ <th
17063
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17064
+ role="columnheader"
17065
+ scope="col"
17066
+ >
17067
+ <span class="pf-v6-screen-reader">Row select</span>
17068
+ </th>
17069
+
17070
+ <th
17071
+ class="pf-v6-c-table__th"
17072
+ role="columnheader"
17073
+ scope="col"
17074
+ >Repositories</th>
17075
+
17076
+ <th
17077
+ class="pf-v6-c-table__th"
17078
+ role="columnheader"
17079
+ scope="col"
17080
+ >Branches</th>
17081
+
17082
+ <th
17083
+ class="pf-v6-c-table__th"
17084
+ role="columnheader"
17085
+ scope="col"
17086
+ >Pull requests</th>
17087
+
17088
+ <th
17089
+ class="pf-v6-c-table__th"
17090
+ role="columnheader"
17091
+ scope="col"
17092
+ >Workspaces</th>
17093
+
17094
+ <th
17095
+ class="pf-v6-c-table__th"
17096
+ role="columnheader"
17097
+ scope="col"
17098
+ >Last commit</th>
17099
+
17100
+ <th
17101
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17102
+ role="columnheader"
17103
+ scope="col"
17104
+ >
17105
+ <span class="pf-v6-screen-reader">Actions</span>
17106
+ </th>
17107
+
17108
+ <th
17109
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17110
+ role="columnheader"
17111
+ scope="col"
17112
+ >
17113
+ <span class="pf-v6-screen-reader">Actions</span>
17114
+ </th>
17115
+ </tr>
17116
+ </thead>
17117
+
17118
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
17119
+ <tr class="pf-v6-c-table__tr" role="row">
17120
+ <td
17121
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17122
+ aria-label="Check row"
17123
+ >
17124
+ <label
17125
+ class="pf-v6-c-check pf-m-standalone"
17126
+ for="table-drawer-container-table-checkrow-2-check-input"
17127
+ >
17128
+ <input
17129
+ class="pf-v6-c-check__input"
17130
+ type="checkbox"
17131
+ id="table-drawer-container-table-checkrow-2-check-input"
17132
+ name="table-drawer-container-table-checkrow-2-check-input"
17133
+ aria-label="Select row"
17134
+ />
17135
+ </label>
17136
+ </td>
17137
+
17138
+ <th
17139
+ class="pf-v6-c-table__th"
17140
+ role="columnheader"
17141
+ data-label="Repository name"
17142
+ >
17143
+ <div>
17144
+ <div
17145
+ id="table-drawer-container-table-node1"
17146
+ >Node 1</div>
17147
+ <a href="#">siemur/test-space</a>
17148
+ </div>
17149
+ </th>
17150
+
17151
+ <td
17152
+ class="pf-v6-c-table__td"
17153
+ role="cell"
17154
+ data-label="Branches"
17155
+ >
17156
+ <span>
17157
+ <i class="fas fa-code-branch"></i> 10
17158
+ </span>
17159
+ </td>
17160
+ <td
17161
+ class="pf-v6-c-table__td"
17162
+ role="cell"
17163
+ data-label="Pull requests"
17164
+ >
17165
+ <span>
17166
+ <i class="fas fa-code"></i> 25
17167
+ </span>
17168
+ </td>
17169
+ <td
17170
+ class="pf-v6-c-table__td"
17171
+ role="cell"
17172
+ data-label="Workspaces"
17173
+ >
17174
+ <span>
17175
+ <i class="fas fa-cube"></i> 5
17176
+ </span>
17177
+ </td>
17178
+ <td
17179
+ class="pf-v6-c-table__td"
17180
+ role="cell"
17181
+ data-label="Last commit"
17182
+ >2 days ago</td>
17183
+ <td
17184
+ class="pf-v6-c-table__td"
17185
+ role="cell"
17186
+ data-label="Action"
17187
+ >
17188
+ <a href="#">Action link</a>
17189
+ </td>
17190
+
17191
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17192
+ <button
17193
+ class="pf-v6-c-menu-toggle pf-m-plain"
17194
+ type="button"
17195
+ aria-expanded="false"
17196
+ aria-label="Table actions"
17197
+ >
17198
+ <span class="pf-v6-c-menu-toggle__icon">
17199
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17200
+ </span>
17201
+ </button>
17202
+ </td>
17203
+ </tr>
17204
+
17205
+ <tr class="pf-v6-c-table__tr" role="row">
17206
+ <td
17207
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17208
+ aria-label="Check row"
17209
+ >
17210
+ <label
17211
+ class="pf-v6-c-check pf-m-standalone"
17212
+ for="table-drawer-container-table-checkrow-3-check-input"
17213
+ >
17214
+ <input
17215
+ class="pf-v6-c-check__input"
17216
+ type="checkbox"
17217
+ id="table-drawer-container-table-checkrow-3-check-input"
17218
+ name="table-drawer-container-table-checkrow-3-check-input"
17219
+ aria-label="Select row"
17220
+ />
17221
+ </label>
17222
+ </td>
17223
+
17224
+ <th
17225
+ class="pf-v6-c-table__th"
17226
+ role="columnheader"
17227
+ data-label="Repository name"
17228
+ >
17229
+ <div>
17230
+ <div
17231
+ id="table-drawer-container-table-node2"
17232
+ >Node 2</div>
17233
+ <a href="#">siemur/test-space</a>
17234
+ </div>
17235
+ </th>
17236
+
17237
+ <td
17238
+ class="pf-v6-c-table__td"
17239
+ role="cell"
17240
+ data-label="Branches"
17241
+ >
17242
+ <span>
17243
+ <i class="fas fa-code-branch"></i> 8
17244
+ </span>
17245
+ </td>
17246
+ <td
17247
+ class="pf-v6-c-table__td"
17248
+ role="cell"
17249
+ data-label="Pull requests"
17250
+ >
17251
+ <span>
17252
+ <i class="fas fa-code"></i> 30
17253
+ </span>
17254
+ </td>
17255
+ <td
17256
+ class="pf-v6-c-table__td"
17257
+ role="cell"
17258
+ data-label="Workspaces"
17259
+ >
17260
+ <span>
17261
+ <i class="fas fa-cube"></i> 2
17262
+ </span>
17263
+ </td>
17264
+ <td
17265
+ class="pf-v6-c-table__td"
17266
+ role="cell"
17267
+ data-label="Last commit"
17268
+ >2 days ago</td>
17269
+ <td
17270
+ class="pf-v6-c-table__td"
17271
+ role="cell"
17272
+ data-label="Action"
17273
+ >
17274
+ <a href="#">Action link</a>
17275
+ </td>
17276
+
17277
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17278
+ <button
17279
+ class="pf-v6-c-menu-toggle pf-m-plain"
17280
+ type="button"
17281
+ aria-expanded="false"
17282
+ aria-label="Table actions"
17283
+ >
17284
+ <span class="pf-v6-c-menu-toggle__icon">
17285
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17286
+ </span>
17287
+ </button>
17288
+ </td>
17289
+ </tr>
17290
+
17291
+ <tr class="pf-v6-c-table__tr" role="row">
17292
+ <td
17293
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17294
+ aria-label="Check row"
17295
+ >
17296
+ <label
17297
+ class="pf-v6-c-check pf-m-standalone"
17298
+ for="table-drawer-container-table-checkrow-4-check-input"
17299
+ >
17300
+ <input
17301
+ class="pf-v6-c-check__input"
17302
+ type="checkbox"
17303
+ id="table-drawer-container-table-checkrow-4-check-input"
17304
+ name="table-drawer-container-table-checkrow-4-check-input"
17305
+ aria-label="Select row"
17306
+ />
17307
+ </label>
17308
+ </td>
17309
+
17310
+ <th
17311
+ class="pf-v6-c-table__th"
17312
+ role="columnheader"
17313
+ data-label="Repository name"
17314
+ >
17315
+ <div>
17316
+ <div
17317
+ id="table-drawer-container-table-node3"
17318
+ >Node 3</div>
17319
+ <a href="#">siemur/test-space</a>
17320
+ </div>
17321
+ </th>
17322
+
17323
+ <td
17324
+ class="pf-v6-c-table__td"
17325
+ role="cell"
17326
+ data-label="Branches"
17327
+ >
17328
+ <span>
17329
+ <i class="fas fa-code-branch"></i> 12
17330
+ </span>
17331
+ </td>
17332
+ <td
17333
+ class="pf-v6-c-table__td"
17334
+ role="cell"
17335
+ data-label="Pull requests"
17336
+ >
17337
+ <span>
17338
+ <i class="fas fa-code"></i> 48
17339
+ </span>
17340
+ </td>
17341
+ <td
17342
+ class="pf-v6-c-table__td"
17343
+ role="cell"
17344
+ data-label="Workspaces"
17345
+ >
17346
+ <span>
17347
+ <i class="fas fa-cube"></i> 13
17348
+ </span>
17349
+ </td>
17350
+ <td
17351
+ class="pf-v6-c-table__td"
17352
+ role="cell"
17353
+ data-label="Last commit"
17354
+ >30 days ago</td>
17355
+ <td
17356
+ class="pf-v6-c-table__td"
17357
+ role="cell"
17358
+ data-label="Action"
17359
+ >
17360
+ <a href="#">Action link</a>
17361
+ </td>
17362
+
17363
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17364
+ <button
17365
+ class="pf-v6-c-menu-toggle pf-m-plain"
17366
+ type="button"
17367
+ aria-expanded="false"
17368
+ aria-label="Table actions"
17369
+ >
17370
+ <span class="pf-v6-c-menu-toggle__icon">
17371
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17372
+ </span>
17373
+ </button>
17374
+ </td>
17375
+ </tr>
17376
+
17377
+ <tr class="pf-v6-c-table__tr" role="row">
17378
+ <td
17379
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17380
+ aria-label="Check row"
17381
+ >
17382
+ <label
17383
+ class="pf-v6-c-check pf-m-standalone"
17384
+ for="table-drawer-container-table-checkrow-5-check-input"
17385
+ >
17386
+ <input
17387
+ class="pf-v6-c-check__input"
17388
+ type="checkbox"
17389
+ id="table-drawer-container-table-checkrow-5-check-input"
17390
+ name="table-drawer-container-table-checkrow-5-check-input"
17391
+ aria-label="Select row"
17392
+ />
17393
+ </label>
17394
+ </td>
17395
+
17396
+ <th
17397
+ class="pf-v6-c-table__th"
17398
+ role="columnheader"
17399
+ data-label="Repository name"
17400
+ >
17401
+ <div>
17402
+ <div
17403
+ id="table-drawer-container-table-node4"
17404
+ >Node 4</div>
17405
+ <a href="#">siemur/test-space</a>
17406
+ </div>
17407
+ </th>
17408
+
17409
+ <td
17410
+ class="pf-v6-c-table__td"
17411
+ role="cell"
17412
+ data-label="Branches"
17413
+ >
17414
+ <span>
17415
+ <i class="fas fa-code-branch"></i> 3
17416
+ </span>
17417
+ </td>
17418
+ <td
17419
+ class="pf-v6-c-table__td"
17420
+ role="cell"
17421
+ data-label="Pull requests"
17422
+ >
17423
+ <span>
17424
+ <i class="fas fa-code"></i> 8
17425
+ </span>
17426
+ </td>
17427
+ <td
17428
+ class="pf-v6-c-table__td"
17429
+ role="cell"
17430
+ data-label="Workspaces"
17431
+ >
17432
+ <span>
17433
+ <i class="fas fa-cube"></i> 20
17434
+ </span>
17435
+ </td>
17436
+ <td
17437
+ class="pf-v6-c-table__td"
17438
+ role="cell"
17439
+ data-label="Last commit"
17440
+ >8 days ago</td>
17441
+ <td
17442
+ class="pf-v6-c-table__td"
17443
+ role="cell"
17444
+ data-label="Action"
17445
+ >
17446
+ <a href="#">Action link</a>
17447
+ </td>
17448
+
17449
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17450
+ <button
17451
+ class="pf-v6-c-menu-toggle pf-m-plain"
17452
+ type="button"
17453
+ aria-expanded="false"
17454
+ aria-label="Table actions"
17455
+ >
17456
+ <span class="pf-v6-c-menu-toggle__icon">
17457
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17458
+ </span>
17459
+ </button>
17460
+ </td>
17461
+ </tr>
17462
+
17463
+ <tr class="pf-v6-c-table__tr" role="row">
17464
+ <td
17465
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17466
+ aria-label="Check row"
17467
+ >
17468
+ <label
17469
+ class="pf-v6-c-check pf-m-standalone"
17470
+ for="table-drawer-container-table-checkrow-6-check-input"
17471
+ >
17472
+ <input
17473
+ class="pf-v6-c-check__input"
17474
+ type="checkbox"
17475
+ id="table-drawer-container-table-checkrow-6-check-input"
17476
+ name="table-drawer-container-table-checkrow-6-check-input"
17477
+ aria-label="Select row"
17478
+ />
17479
+ </label>
17480
+ </td>
17481
+
17482
+ <td
17483
+ class="pf-v6-c-table__td"
17484
+ role="cell"
17485
+ data-label="Repository name"
17486
+ >
17487
+ <div>
17488
+ <div
17489
+ id="table-drawer-container-table-node5"
17490
+ >Node 5</div>
17491
+ <a href="#">siemur/test-space</a>
17492
+ </div>
17493
+ </td>
17494
+ <td
17495
+ class="pf-v6-c-table__td"
17496
+ role="cell"
17497
+ data-label="Branches"
17498
+ >
17499
+ <span>
17500
+ <i class="fas fa-code-branch"></i> 34
17501
+ </span>
17502
+ </td>
17503
+ <td
17504
+ class="pf-v6-c-table__td"
17505
+ role="cell"
17506
+ data-label="Pull requests"
17507
+ >
17508
+ <span>
17509
+ <i class="fas fa-code"></i> 21
17510
+ </span>
17511
+ </td>
17512
+ <td
17513
+ class="pf-v6-c-table__td"
17514
+ role="cell"
17515
+ data-label="Workspaces"
17516
+ >
17517
+ <span>
17518
+ <i class="fas fa-cube"></i> 26
17519
+ </span>
17520
+ </td>
17521
+ <td
17522
+ class="pf-v6-c-table__td"
17523
+ role="cell"
17524
+ data-label="Last commit"
17525
+ >2 days ago</td>
17526
+ <td
17527
+ class="pf-v6-c-table__td"
17528
+ role="cell"
17529
+ data-label="Action"
17530
+ >
17531
+ <a href="#">Action link</a>
17532
+ </td>
17533
+
17534
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17535
+ <button
17536
+ class="pf-v6-c-menu-toggle pf-m-plain"
17537
+ type="button"
17538
+ aria-expanded="false"
17539
+ aria-label="Table actions"
17540
+ >
17541
+ <span class="pf-v6-c-menu-toggle__icon">
17542
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17543
+ </span>
17544
+ </button>
17545
+ </td>
17546
+ </tr>
17547
+ </tbody>
17548
+ </table>
17549
+ <div class="pf-v6-c-pagination pf-m-bottom">
17550
+ <div class="pf-v6-c-pagination__page-menu">
17551
+ <button
17552
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
17553
+ type="button"
17554
+ aria-expanded="false"
17555
+ aria-label="Menu toggle"
17556
+ id="table-drawer-container-pagination-menu-toggle-bottom-example"
17557
+ >
17558
+ <span class="pf-v6-c-menu-toggle__text">
17559
+ <b>1 - 10</b>&nbsp;of&nbsp;
17560
+ <b>36</b>
17561
+ </span>
17562
+ <span class="pf-v6-c-menu-toggle__controls">
17563
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
17564
+ <i
17565
+ class="fas fa-caret-down fa-fw"
17566
+ aria-hidden="true"
17567
+ ></i>
17568
+ </span>
17569
+ </span>
17570
+ </button>
17571
+ </div>
17572
+ <nav
17573
+ class="pf-v6-c-pagination__nav"
17574
+ aria-label="Pagination"
17575
+ >
17576
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
17577
+ <button
17578
+ class="pf-v6-c-button pf-m-plain"
17579
+ type="button"
17580
+ disabled
17581
+ aria-label="Go to first page"
17582
+ >
17583
+ <span class="pf-v6-c-button__icon">
17584
+ <i
17585
+ class="fas fa-angle-double-left"
17586
+ aria-hidden="true"
17587
+ ></i>
17588
+ </span>
17589
+ </button>
17590
+ </div>
17591
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
17592
+ <button
17593
+ class="pf-v6-c-button pf-m-plain"
17594
+ type="button"
17595
+ disabled
17596
+ aria-label="Go to previous page"
17597
+ >
17598
+ <span class="pf-v6-c-button__icon">
17599
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
17600
+ </span>
17601
+ </button>
17602
+ </div>
17603
+ <div class="pf-v6-c-pagination__nav-page-select">
17604
+ <span class="pf-v6-c-form-control">
17605
+ <input
17606
+ aria-label="Current page"
17607
+ type="number"
17608
+ min="1"
17609
+ max="4"
17610
+ value="1"
17611
+ />
17612
+ </span>
17613
+ <span aria-hidden="true">of 4</span>
17614
+ </div>
17615
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
17616
+ <button
17617
+ class="pf-v6-c-button pf-m-plain"
17618
+ type="button"
17619
+ aria-label="Go to next page"
17620
+ >
17621
+ <span class="pf-v6-c-button__icon">
17622
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
17623
+ </span>
17624
+ </button>
17625
+ </div>
17626
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
17627
+ <button
17628
+ class="pf-v6-c-button pf-m-plain"
17629
+ type="button"
17630
+ disabled
17631
+ aria-label="Go to last page"
17632
+ >
17633
+ <span class="pf-v6-c-button__icon">
17634
+ <i
17635
+ class="fas fa-angle-double-right"
17636
+ aria-hidden="true"
17637
+ ></i>
17638
+ </span>
17639
+ </button>
17640
+ </div>
17641
+ </nav>
17642
+ </div>
17643
+ </div>
17644
+ </div>
17645
+ </div>
17646
+
17647
+ <div
17648
+ class="pf-v6-c-drawer__panel pf-m-width-50"
17649
+ hidden
17650
+ style="container-type: inline-size; container-name: pf-v6-contain-table;"
17651
+ >
17652
+ <div class="pf-v6-c-drawer__head">
17653
+ <h2 class="pf-v6-c-title pf-m-2xl">Drawer as a container</h2>
17654
+ <div class="pf-v6-c-drawer__actions">
17655
+ <div class="pf-v6-c-drawer__close">
17656
+ <button
17657
+ class="pf-v6-c-button pf-m-plain"
17658
+ type="button"
17659
+ aria-label="Close drawer panel"
17660
+ >
17661
+ <span class="pf-v6-c-button__icon">
17662
+ <i class="fas fa-times" aria-hidden="true"></i>
17663
+ </span>
17664
+ </button>
17665
+ </div>
17666
+ </div>
17667
+ </div>
17668
+
17669
+ <div class="pf-v6-c-drawer__body">
17670
+ <div
17671
+ class="pf-v6-c-toolbar"
17672
+ id="table-drawer-container-drawer-toolbar"
17673
+ >
17674
+ <div class="pf-v6-c-toolbar__content">
17675
+ <div class="pf-v6-c-toolbar__content-section pf-m-nowrap">
17676
+ <div class="pf-v6-c-toolbar__item pf-m-bulk-select">
17677
+ <div
17678
+ class="pf-v6-c-menu-toggle pf-m-split-button"
17679
+ id="table-drawer-container-drawer-toolbar-check"
17680
+ >
17681
+ <label
17682
+ class="pf-v6-c-check pf-m-standalone"
17683
+ for="table-drawer-container-drawer-toolbar-check-check-input"
17684
+ >
17685
+ <input
17686
+ class="pf-v6-c-check__input"
17687
+ type="checkbox"
17688
+ id="table-drawer-container-drawer-toolbar-check-check-input"
17689
+ name="table-drawer-container-drawer-toolbar-check-check-input"
17690
+ aria-label="Standalone check"
17691
+ />
17692
+ </label>
17693
+ <button
17694
+ class="pf-v6-c-menu-toggle__button"
17695
+ type="button"
17696
+ aria-expanded="false"
17697
+ id="table-drawer-container-drawer-toolbar-menu-toggle-toggle-button"
17698
+ aria-label="Menu toggle"
17699
+ >
17700
+ <span class="pf-v6-c-menu-toggle__controls">
17701
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
17702
+ <i
17703
+ class="fas fa-caret-down fa-fw"
17704
+ aria-hidden="true"
17705
+ ></i>
17706
+ </span>
17707
+ </span>
17708
+ </button>
17709
+ </div>
17710
+ </div>
17711
+
17712
+ <div class="pf-v6-c-toolbar__item pf-m-search-filter">
17713
+ <div
17714
+ class="pf-v6-c-input-group"
17715
+ aria-label="search filter"
17716
+ role="group"
17717
+ >
17718
+ <div class="pf-v6-c-input-group__item">
17719
+ <button
17720
+ class="pf-v6-c-menu-toggle"
17721
+ type="button"
17722
+ aria-expanded="false"
17723
+ id="table-drawer-container-drawer-toolbar-search-filter-menu"
17724
+ >
17725
+ <span class="pf-v6-c-menu-toggle__icon">
17726
+ <i class="fas fa-filter" aria-hidden="true"></i>
17727
+ </span>
17728
+ <span class="pf-v6-c-menu-toggle__text">Name</span>
17729
+ <span class="pf-v6-c-menu-toggle__controls">
17730
+ <span
17731
+ class="pf-v6-c-menu-toggle__toggle-icon"
17732
+ >
17733
+ <i
17734
+ class="fas fa-caret-down fa-fw"
17735
+ aria-hidden="true"
17736
+ ></i>
17737
+ </span>
17738
+ </span>
17739
+ </button>
17740
+ </div>
17741
+ <div class="pf-v6-c-input-group__item pf-m-fill">
17742
+ <div class="pf-v6-c-text-input-group">
17743
+ <div
17744
+ class="pf-v6-c-text-input-group__main pf-m-icon"
17745
+ >
17746
+ <span class="pf-v6-c-text-input-group__text">
17747
+ <span
17748
+ class="pf-v6-c-text-input-group__icon"
17749
+ >
17750
+ <i class="fas fa-fw fa-search"></i>
17751
+ </span>
17752
+ <input
17753
+ class="pf-v6-c-text-input-group__text-input"
17754
+ type="text"
17755
+ placeholder="Filter by name"
17756
+ value
17757
+ aria-label="Search input"
17758
+ />
17759
+ </span>
17760
+ </div>
17761
+ </div>
17762
+ </div>
17763
+ </div>
17764
+ </div>
17765
+
17766
+ <div class="pf-v6-c-toolbar__item pf-m-pagination">
17767
+ <div class="pf-v6-c-pagination pf-m-compact">
17768
+ <div class="pf-v6-c-pagination__page-menu">
17769
+ <button
17770
+ class="pf-v6-c-menu-toggle pf-m-text pf-m-plain"
17771
+ type="button"
17772
+ aria-expanded="false"
17773
+ aria-label="Menu toggle"
17774
+ id="table-drawer-container-drawer-toolbar-top-pagination"
17775
+ >
17776
+ <span class="pf-v6-c-menu-toggle__text">
17777
+ <b>1 - 10</b>&nbsp;of&nbsp;
17778
+ <b>36</b>
17779
+ </span>
17780
+ <span class="pf-v6-c-menu-toggle__controls">
17781
+ <span
17782
+ class="pf-v6-c-menu-toggle__toggle-icon"
17783
+ >
17784
+ <i
17785
+ class="fas fa-caret-down fa-fw"
17786
+ aria-hidden="true"
17787
+ ></i>
17788
+ </span>
17789
+ </span>
17790
+ </button>
17791
+ </div>
17792
+ <nav
17793
+ class="pf-v6-c-pagination__nav"
17794
+ aria-label="Toolbar top pagination"
17795
+ >
17796
+ <div
17797
+ class="pf-v6-c-pagination__nav-control pf-m-prev"
17798
+ >
17799
+ <button
17800
+ class="pf-v6-c-button pf-m-plain"
17801
+ type="button"
17802
+ disabled
17803
+ aria-label="Go to previous page"
17804
+ >
17805
+ <span class="pf-v6-c-button__icon">
17806
+ <i
17807
+ class="fas fa-angle-left"
17808
+ aria-hidden="true"
17809
+ ></i>
17810
+ </span>
17811
+ </button>
17812
+ </div>
17813
+ <div
17814
+ class="pf-v6-c-pagination__nav-control pf-m-next"
17815
+ >
17816
+ <button
17817
+ class="pf-v6-c-button pf-m-plain"
17818
+ type="button"
17819
+ aria-label="Go to next page"
17820
+ >
17821
+ <span class="pf-v6-c-button__icon">
17822
+ <i
17823
+ class="fas fa-angle-right"
17824
+ aria-hidden="true"
17825
+ ></i>
17826
+ </span>
17827
+ </button>
17828
+ </div>
17829
+ </nav>
17830
+ </div>
17831
+ </div>
17832
+ </div>
17833
+
17834
+ <div
17835
+ class="pf-v6-c-toolbar__expandable-content pf-m-hidden"
17836
+ id="table-drawer-container-drawer-toolbar-expandable-content"
17837
+ hidden
17838
+ ></div>
17839
+ </div>
17840
+ </div>
17841
+ <table
17842
+ class="pf-v6-c-table pf-m-grid-md"
17843
+ role="grid"
17844
+ aria-label="This is a table with checkboxes"
17845
+ id="table-drawer-container-table"
17846
+ >
17847
+ <thead class="pf-v6-c-table__thead">
17848
+ <tr class="pf-v6-c-table__tr" role="row">
17849
+ <th
17850
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17851
+ role="columnheader"
17852
+ scope="col"
17853
+ >
17854
+ <span class="pf-v6-screen-reader">Row select</span>
17855
+ </th>
17856
+
17857
+ <th
17858
+ class="pf-v6-c-table__th"
17859
+ role="columnheader"
17860
+ scope="col"
17861
+ >Repositories</th>
17862
+
17863
+ <th
17864
+ class="pf-v6-c-table__th"
17865
+ role="columnheader"
17866
+ scope="col"
17867
+ >Branches</th>
17868
+
17869
+ <th
17870
+ class="pf-v6-c-table__th"
17871
+ role="columnheader"
17872
+ scope="col"
17873
+ >Pull requests</th>
17874
+
17875
+ <th
17876
+ class="pf-v6-c-table__th"
17877
+ role="columnheader"
17878
+ scope="col"
17879
+ >Workspaces</th>
17880
+
17881
+ <th
17882
+ class="pf-v6-c-table__th"
17883
+ role="columnheader"
17884
+ scope="col"
17885
+ >Last commit</th>
17886
+
17887
+ <th
17888
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17889
+ role="columnheader"
17890
+ scope="col"
17891
+ >
17892
+ <span class="pf-v6-screen-reader">Actions</span>
17893
+ </th>
17894
+
17895
+ <th
17896
+ class="pf-v6-c-table__th pf-v6-c-table__cell-empty"
17897
+ role="columnheader"
17898
+ scope="col"
17899
+ >
17900
+ <span class="pf-v6-screen-reader">Actions</span>
17901
+ </th>
17902
+ </tr>
17903
+ </thead>
17904
+
17905
+ <tbody class="pf-v6-c-table__tbody" role="rowgroup">
17906
+ <tr class="pf-v6-c-table__tr" role="row">
17907
+ <td
17908
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17909
+ aria-label="Check row"
17910
+ >
17911
+ <label
17912
+ class="pf-v6-c-check pf-m-standalone"
17913
+ for="table-drawer-container-table-checkrow-2-check-input"
17914
+ >
17915
+ <input
17916
+ class="pf-v6-c-check__input"
17917
+ type="checkbox"
17918
+ id="table-drawer-container-table-checkrow-2-check-input"
17919
+ name="table-drawer-container-table-checkrow-2-check-input"
17920
+ aria-label="Select row"
17921
+ />
17922
+ </label>
17923
+ </td>
17924
+
17925
+ <th
17926
+ class="pf-v6-c-table__th"
17927
+ role="columnheader"
17928
+ data-label="Repository name"
17929
+ >
17930
+ <div>
17931
+ <div id="table-drawer-container-table-node1">Node 1</div>
17932
+ <a href="#">siemur/test-space</a>
17933
+ </div>
17934
+ </th>
17935
+
17936
+ <td
17937
+ class="pf-v6-c-table__td"
17938
+ role="cell"
17939
+ data-label="Branches"
17940
+ >
17941
+ <span>
17942
+ <i class="fas fa-code-branch"></i> 10
17943
+ </span>
17944
+ </td>
17945
+ <td
17946
+ class="pf-v6-c-table__td"
17947
+ role="cell"
17948
+ data-label="Pull requests"
17949
+ >
17950
+ <span>
17951
+ <i class="fas fa-code"></i> 25
17952
+ </span>
17953
+ </td>
17954
+ <td
17955
+ class="pf-v6-c-table__td"
17956
+ role="cell"
17957
+ data-label="Workspaces"
17958
+ >
17959
+ <span>
17960
+ <i class="fas fa-cube"></i> 5
17961
+ </span>
17962
+ </td>
17963
+ <td
17964
+ class="pf-v6-c-table__td"
17965
+ role="cell"
17966
+ data-label="Last commit"
17967
+ >2 days ago</td>
17968
+ <td
17969
+ class="pf-v6-c-table__td"
17970
+ role="cell"
17971
+ data-label="Action"
17972
+ >
17973
+ <a href="#">Action link</a>
17974
+ </td>
17975
+
17976
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
17977
+ <button
17978
+ class="pf-v6-c-menu-toggle pf-m-plain"
17979
+ type="button"
17980
+ aria-expanded="false"
17981
+ aria-label="Table actions"
17982
+ >
17983
+ <span class="pf-v6-c-menu-toggle__icon">
17984
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
17985
+ </span>
17986
+ </button>
17987
+ </td>
17988
+ </tr>
17989
+
17990
+ <tr class="pf-v6-c-table__tr" role="row">
17991
+ <td
17992
+ class="pf-v6-c-table__td pf-v6-c-table__check"
17993
+ aria-label="Check row"
17994
+ >
17995
+ <label
17996
+ class="pf-v6-c-check pf-m-standalone"
17997
+ for="table-drawer-container-table-checkrow-3-check-input"
17998
+ >
17999
+ <input
18000
+ class="pf-v6-c-check__input"
18001
+ type="checkbox"
18002
+ id="table-drawer-container-table-checkrow-3-check-input"
18003
+ name="table-drawer-container-table-checkrow-3-check-input"
18004
+ aria-label="Select row"
18005
+ />
18006
+ </label>
18007
+ </td>
18008
+
18009
+ <th
18010
+ class="pf-v6-c-table__th"
18011
+ role="columnheader"
18012
+ data-label="Repository name"
18013
+ >
18014
+ <div>
18015
+ <div id="table-drawer-container-table-node2">Node 2</div>
18016
+ <a href="#">siemur/test-space</a>
18017
+ </div>
18018
+ </th>
18019
+
18020
+ <td
18021
+ class="pf-v6-c-table__td"
18022
+ role="cell"
18023
+ data-label="Branches"
18024
+ >
18025
+ <span>
18026
+ <i class="fas fa-code-branch"></i> 8
18027
+ </span>
18028
+ </td>
18029
+ <td
18030
+ class="pf-v6-c-table__td"
18031
+ role="cell"
18032
+ data-label="Pull requests"
18033
+ >
18034
+ <span>
18035
+ <i class="fas fa-code"></i> 30
18036
+ </span>
18037
+ </td>
18038
+ <td
18039
+ class="pf-v6-c-table__td"
18040
+ role="cell"
18041
+ data-label="Workspaces"
18042
+ >
18043
+ <span>
18044
+ <i class="fas fa-cube"></i> 2
18045
+ </span>
18046
+ </td>
18047
+ <td
18048
+ class="pf-v6-c-table__td"
18049
+ role="cell"
18050
+ data-label="Last commit"
18051
+ >2 days ago</td>
18052
+ <td
18053
+ class="pf-v6-c-table__td"
18054
+ role="cell"
18055
+ data-label="Action"
18056
+ >
18057
+ <a href="#">Action link</a>
18058
+ </td>
18059
+
18060
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18061
+ <button
18062
+ class="pf-v6-c-menu-toggle pf-m-plain"
18063
+ type="button"
18064
+ aria-expanded="false"
18065
+ aria-label="Table actions"
18066
+ >
18067
+ <span class="pf-v6-c-menu-toggle__icon">
18068
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18069
+ </span>
18070
+ </button>
18071
+ </td>
18072
+ </tr>
18073
+
18074
+ <tr class="pf-v6-c-table__tr" role="row">
18075
+ <td
18076
+ class="pf-v6-c-table__td pf-v6-c-table__check"
18077
+ aria-label="Check row"
18078
+ >
18079
+ <label
18080
+ class="pf-v6-c-check pf-m-standalone"
18081
+ for="table-drawer-container-table-checkrow-4-check-input"
18082
+ >
18083
+ <input
18084
+ class="pf-v6-c-check__input"
18085
+ type="checkbox"
18086
+ id="table-drawer-container-table-checkrow-4-check-input"
18087
+ name="table-drawer-container-table-checkrow-4-check-input"
18088
+ aria-label="Select row"
18089
+ />
18090
+ </label>
18091
+ </td>
18092
+
18093
+ <th
18094
+ class="pf-v6-c-table__th"
18095
+ role="columnheader"
18096
+ data-label="Repository name"
18097
+ >
18098
+ <div>
18099
+ <div id="table-drawer-container-table-node3">Node 3</div>
18100
+ <a href="#">siemur/test-space</a>
18101
+ </div>
18102
+ </th>
18103
+
18104
+ <td
18105
+ class="pf-v6-c-table__td"
18106
+ role="cell"
18107
+ data-label="Branches"
18108
+ >
18109
+ <span>
18110
+ <i class="fas fa-code-branch"></i> 12
18111
+ </span>
18112
+ </td>
18113
+ <td
18114
+ class="pf-v6-c-table__td"
18115
+ role="cell"
18116
+ data-label="Pull requests"
18117
+ >
18118
+ <span>
18119
+ <i class="fas fa-code"></i> 48
18120
+ </span>
18121
+ </td>
18122
+ <td
18123
+ class="pf-v6-c-table__td"
18124
+ role="cell"
18125
+ data-label="Workspaces"
18126
+ >
18127
+ <span>
18128
+ <i class="fas fa-cube"></i> 13
18129
+ </span>
18130
+ </td>
18131
+ <td
18132
+ class="pf-v6-c-table__td"
18133
+ role="cell"
18134
+ data-label="Last commit"
18135
+ >30 days ago</td>
18136
+ <td
18137
+ class="pf-v6-c-table__td"
18138
+ role="cell"
18139
+ data-label="Action"
18140
+ >
18141
+ <a href="#">Action link</a>
18142
+ </td>
18143
+
18144
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18145
+ <button
18146
+ class="pf-v6-c-menu-toggle pf-m-plain"
18147
+ type="button"
18148
+ aria-expanded="false"
18149
+ aria-label="Table actions"
18150
+ >
18151
+ <span class="pf-v6-c-menu-toggle__icon">
18152
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18153
+ </span>
18154
+ </button>
18155
+ </td>
18156
+ </tr>
18157
+
18158
+ <tr class="pf-v6-c-table__tr" role="row">
18159
+ <td
18160
+ class="pf-v6-c-table__td pf-v6-c-table__check"
18161
+ aria-label="Check row"
18162
+ >
18163
+ <label
18164
+ class="pf-v6-c-check pf-m-standalone"
18165
+ for="table-drawer-container-table-checkrow-5-check-input"
18166
+ >
18167
+ <input
18168
+ class="pf-v6-c-check__input"
18169
+ type="checkbox"
18170
+ id="table-drawer-container-table-checkrow-5-check-input"
18171
+ name="table-drawer-container-table-checkrow-5-check-input"
18172
+ aria-label="Select row"
18173
+ />
18174
+ </label>
18175
+ </td>
18176
+
18177
+ <th
18178
+ class="pf-v6-c-table__th"
18179
+ role="columnheader"
18180
+ data-label="Repository name"
18181
+ >
18182
+ <div>
18183
+ <div id="table-drawer-container-table-node4">Node 4</div>
18184
+ <a href="#">siemur/test-space</a>
18185
+ </div>
18186
+ </th>
18187
+
18188
+ <td
18189
+ class="pf-v6-c-table__td"
18190
+ role="cell"
18191
+ data-label="Branches"
18192
+ >
18193
+ <span>
18194
+ <i class="fas fa-code-branch"></i> 3
18195
+ </span>
18196
+ </td>
18197
+ <td
18198
+ class="pf-v6-c-table__td"
18199
+ role="cell"
18200
+ data-label="Pull requests"
18201
+ >
18202
+ <span>
18203
+ <i class="fas fa-code"></i> 8
18204
+ </span>
18205
+ </td>
18206
+ <td
18207
+ class="pf-v6-c-table__td"
18208
+ role="cell"
18209
+ data-label="Workspaces"
18210
+ >
18211
+ <span>
18212
+ <i class="fas fa-cube"></i> 20
18213
+ </span>
18214
+ </td>
18215
+ <td
18216
+ class="pf-v6-c-table__td"
18217
+ role="cell"
18218
+ data-label="Last commit"
18219
+ >8 days ago</td>
18220
+ <td
18221
+ class="pf-v6-c-table__td"
18222
+ role="cell"
18223
+ data-label="Action"
18224
+ >
18225
+ <a href="#">Action link</a>
18226
+ </td>
18227
+
18228
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18229
+ <button
18230
+ class="pf-v6-c-menu-toggle pf-m-plain"
18231
+ type="button"
18232
+ aria-expanded="false"
18233
+ aria-label="Table actions"
18234
+ >
18235
+ <span class="pf-v6-c-menu-toggle__icon">
18236
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18237
+ </span>
18238
+ </button>
18239
+ </td>
18240
+ </tr>
18241
+
18242
+ <tr class="pf-v6-c-table__tr" role="row">
18243
+ <td
18244
+ class="pf-v6-c-table__td pf-v6-c-table__check"
18245
+ aria-label="Check row"
18246
+ >
18247
+ <label
18248
+ class="pf-v6-c-check pf-m-standalone"
18249
+ for="table-drawer-container-table-checkrow-6-check-input"
18250
+ >
18251
+ <input
18252
+ class="pf-v6-c-check__input"
18253
+ type="checkbox"
18254
+ id="table-drawer-container-table-checkrow-6-check-input"
18255
+ name="table-drawer-container-table-checkrow-6-check-input"
18256
+ aria-label="Select row"
18257
+ />
18258
+ </label>
18259
+ </td>
18260
+
18261
+ <td
18262
+ class="pf-v6-c-table__td"
18263
+ role="cell"
18264
+ data-label="Repository name"
18265
+ >
18266
+ <div>
18267
+ <div id="table-drawer-container-table-node5">Node 5</div>
18268
+ <a href="#">siemur/test-space</a>
18269
+ </div>
18270
+ </td>
18271
+ <td
18272
+ class="pf-v6-c-table__td"
18273
+ role="cell"
18274
+ data-label="Branches"
18275
+ >
18276
+ <span>
18277
+ <i class="fas fa-code-branch"></i> 34
18278
+ </span>
18279
+ </td>
18280
+ <td
18281
+ class="pf-v6-c-table__td"
18282
+ role="cell"
18283
+ data-label="Pull requests"
18284
+ >
18285
+ <span>
18286
+ <i class="fas fa-code"></i> 21
18287
+ </span>
18288
+ </td>
18289
+ <td
18290
+ class="pf-v6-c-table__td"
18291
+ role="cell"
18292
+ data-label="Workspaces"
18293
+ >
18294
+ <span>
18295
+ <i class="fas fa-cube"></i> 26
18296
+ </span>
18297
+ </td>
18298
+ <td
18299
+ class="pf-v6-c-table__td"
18300
+ role="cell"
18301
+ data-label="Last commit"
18302
+ >2 days ago</td>
18303
+ <td
18304
+ class="pf-v6-c-table__td"
18305
+ role="cell"
18306
+ data-label="Action"
18307
+ >
18308
+ <a href="#">Action link</a>
18309
+ </td>
18310
+
18311
+ <td class="pf-v6-c-table__td pf-v6-c-table__action">
18312
+ <button
18313
+ class="pf-v6-c-menu-toggle pf-m-plain"
18314
+ type="button"
18315
+ aria-expanded="false"
18316
+ aria-label="Table actions"
18317
+ >
18318
+ <span class="pf-v6-c-menu-toggle__icon">
18319
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
18320
+ </span>
18321
+ </button>
18322
+ </td>
18323
+ </tr>
18324
+ </tbody>
18325
+ </table>
18326
+ <div class="pf-v6-c-pagination pf-m-bottom">
18327
+ <div class="pf-v6-c-pagination__page-menu">
18328
+ <button
18329
+ class="pf-v6-c-menu-toggle pf-m-top pf-m-text pf-m-plain"
18330
+ type="button"
18331
+ aria-expanded="false"
18332
+ aria-label="Menu toggle"
18333
+ id="table-drawer-container-pagination-menu-toggle-bottom-example"
18334
+ >
18335
+ <span class="pf-v6-c-menu-toggle__text">
18336
+ <b>1 - 10</b>&nbsp;of&nbsp;
18337
+ <b>36</b>
18338
+ </span>
18339
+ <span class="pf-v6-c-menu-toggle__controls">
18340
+ <span class="pf-v6-c-menu-toggle__toggle-icon">
18341
+ <i
18342
+ class="fas fa-caret-down fa-fw"
18343
+ aria-hidden="true"
18344
+ ></i>
18345
+ </span>
18346
+ </span>
18347
+ </button>
18348
+ </div>
18349
+ <nav
18350
+ class="pf-v6-c-pagination__nav"
18351
+ aria-label="Pagination"
18352
+ >
18353
+ <div class="pf-v6-c-pagination__nav-control pf-m-first">
18354
+ <button
18355
+ class="pf-v6-c-button pf-m-plain"
18356
+ type="button"
18357
+ disabled
18358
+ aria-label="Go to first page"
18359
+ >
18360
+ <span class="pf-v6-c-button__icon">
18361
+ <i
18362
+ class="fas fa-angle-double-left"
18363
+ aria-hidden="true"
18364
+ ></i>
18365
+ </span>
18366
+ </button>
18367
+ </div>
18368
+ <div class="pf-v6-c-pagination__nav-control pf-m-prev">
18369
+ <button
18370
+ class="pf-v6-c-button pf-m-plain"
18371
+ type="button"
18372
+ disabled
18373
+ aria-label="Go to previous page"
18374
+ >
18375
+ <span class="pf-v6-c-button__icon">
18376
+ <i class="fas fa-angle-left" aria-hidden="true"></i>
18377
+ </span>
18378
+ </button>
18379
+ </div>
18380
+ <div class="pf-v6-c-pagination__nav-page-select">
18381
+ <span class="pf-v6-c-form-control">
18382
+ <input
18383
+ aria-label="Current page"
18384
+ type="number"
18385
+ min="1"
18386
+ max="4"
18387
+ value="1"
18388
+ />
18389
+ </span>
18390
+ <span aria-hidden="true">of 4</span>
18391
+ </div>
18392
+ <div class="pf-v6-c-pagination__nav-control pf-m-next">
18393
+ <button
18394
+ class="pf-v6-c-button pf-m-plain"
18395
+ type="button"
18396
+ aria-label="Go to next page"
18397
+ >
18398
+ <span class="pf-v6-c-button__icon">
18399
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
18400
+ </span>
18401
+ </button>
18402
+ </div>
18403
+ <div class="pf-v6-c-pagination__nav-control pf-m-last">
18404
+ <button
18405
+ class="pf-v6-c-button pf-m-plain"
18406
+ type="button"
18407
+ disabled
18408
+ aria-label="Go to last page"
18409
+ >
18410
+ <span class="pf-v6-c-button__icon">
18411
+ <i
18412
+ class="fas fa-angle-double-right"
18413
+ aria-hidden="true"
18414
+ ></i>
18415
+ </span>
18416
+ </button>
18417
+ </div>
18418
+ </nav>
18419
+ </div>
18420
+ </div>
18421
+ </div>
18422
+ </div>
18423
+ </div>
18424
+ </div>
18425
+ </section>
18426
+ </main>
18427
+ </div>
18428
+ </div>
18429
+
18430
+ ```