@patternfly/patternfly 4.196.1 → 4.196.4

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.
@@ -2,7 +2,9 @@
2
2
  id: Table
3
3
  section: components
4
4
  wrapperTag: div
5
- ---## Demos
5
+ ---import './Table.css'
6
+
7
+ ## Demos
6
8
 
7
9
  ### Basic
8
10
 
@@ -25473,3 +25475,1092 @@ wrapperTag: div
25473
25475
  </div>
25474
25476
 
25475
25477
  ```
25478
+
25479
+ ### Cell with image alignment
25480
+
25481
+ By default, table cell alignment is set to baseline. This retains vertical alignment with varying text size, but can cause visual inconsistencies with images. The vertical alignment of images within table cells may need to be specified to provide proper alignment.
25482
+
25483
+ ```html isFullscreen
25484
+ <div class="pf-c-page" id="image-alignment-demo">
25485
+ <a
25486
+ class="pf-c-skip-to-content pf-c-button pf-m-primary"
25487
+ href="#main-content-image-alignment-demo"
25488
+ >Skip to content</a>
25489
+ <header class="pf-c-masthead" id="image-alignment-demo-masthead">
25490
+ <span class="pf-c-masthead__toggle">
25491
+ <button
25492
+ class="pf-c-button pf-m-plain"
25493
+ type="button"
25494
+ aria-label="Global navigation"
25495
+ >
25496
+ <i class="fas fa-bars" aria-hidden="true"></i>
25497
+ </button>
25498
+ </span>
25499
+ <div class="pf-c-masthead__main">
25500
+ <a class="pf-c-masthead__brand" href="#">
25501
+ <picture
25502
+ class="pf-c-brand pf-m-picture"
25503
+ style="--pf-c-brand--Width: 180px; --pf-c-brand--Width-on-md: 180px; --pf-c-brand--Width-on-2xl: 220px;"
25504
+ >
25505
+ <source
25506
+ media="(min-width: 768px)"
25507
+ srcset="/assets/images/logo__pf--reverse-on-md.svg"
25508
+ />
25509
+ <source srcset="/assets/images/logo__pf--reverse--base.svg" />
25510
+ <img
25511
+ src="/assets/images/logo__pf--reverse--base.png"
25512
+ alt="Fallback patternFly default logo"
25513
+ />
25514
+ </picture>
25515
+ </a>
25516
+ </div>
25517
+ <div class="pf-c-masthead__content">
25518
+ <div
25519
+ class="pf-c-toolbar pf-m-full-height pf-m-static"
25520
+ id="image-alignment-demo-masthead-toolbar"
25521
+ >
25522
+ <div class="pf-c-toolbar__content">
25523
+ <div class="pf-c-toolbar__content-section">
25524
+ <div
25525
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-align-right pf-m-spacer-none pf-m-spacer-md-on-md"
25526
+ >
25527
+ <div class="pf-c-toolbar__item">
25528
+ <button
25529
+ class="pf-c-button pf-m-plain"
25530
+ type="button"
25531
+ aria-label="Notifications"
25532
+ >
25533
+ <span class="pf-c-notification-badge">
25534
+ <i class="pf-icon-bell" aria-hidden="true"></i>
25535
+ </span>
25536
+ </button>
25537
+ </div>
25538
+ <div
25539
+ class="pf-c-toolbar__group pf-m-icon-button-group pf-m-hidden pf-m-visible-on-lg"
25540
+ >
25541
+ <div class="pf-c-toolbar__item">
25542
+ <nav
25543
+ class="pf-c-app-launcher"
25544
+ aria-label="Application launcher"
25545
+ id="image-alignment-demo-masthead-icon-group--app-launcher"
25546
+ >
25547
+ <button
25548
+ class="pf-c-app-launcher__toggle"
25549
+ type="button"
25550
+ id="image-alignment-demo-masthead-icon-group--app-launcher-button"
25551
+ aria-expanded="false"
25552
+ aria-label="Application launcher"
25553
+ >
25554
+ <i class="fas fa-th" aria-hidden="true"></i>
25555
+ </button>
25556
+ <div
25557
+ class="pf-c-app-launcher__menu pf-m-align-right"
25558
+ hidden
25559
+ >
25560
+ <div class="pf-c-app-launcher__menu-search">
25561
+ <div class="pf-c-search-input">
25562
+ <div class="pf-c-search-input__bar">
25563
+ <span class="pf-c-search-input__text">
25564
+ <span class="pf-c-search-input__icon">
25565
+ <i
25566
+ class="fas fa-search fa-fw"
25567
+ aria-hidden="true"
25568
+ ></i>
25569
+ </span>
25570
+ <input
25571
+ class="pf-c-search-input__text-input"
25572
+ type="text"
25573
+ placeholder="Filter by name"
25574
+ aria-label="Filter by name"
25575
+ />
25576
+ </span>
25577
+ </div>
25578
+ </div>
25579
+ </div>
25580
+ <section class="pf-c-app-launcher__group">
25581
+ <h1 class="pf-c-app-launcher__group-title">Favorites</h1>
25582
+ <ul>
25583
+ <li
25584
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
25585
+ >
25586
+ <a class="pf-c-app-launcher__menu-item">
25587
+ Link 1
25588
+ <span
25589
+ class="pf-c-app-launcher__menu-item-external-icon"
25590
+ >
25591
+ <i
25592
+ class="fas fa-external-link-alt"
25593
+ aria-hidden="true"
25594
+ ></i>
25595
+ </span>
25596
+ <span class="pf-screen-reader">(opens new window)</span>
25597
+ </a>
25598
+ <button
25599
+ class="pf-c-app-launcher__menu-item pf-m-action"
25600
+ type="button"
25601
+ aria-label="Favorite"
25602
+ >
25603
+ <i class="fas fa-star" aria-hidden="true"></i>
25604
+ </button>
25605
+ </li>
25606
+ <li
25607
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
25608
+ >
25609
+ <a class="pf-c-app-launcher__menu-item">
25610
+ Link 2
25611
+ <span
25612
+ class="pf-c-app-launcher__menu-item-external-icon"
25613
+ >
25614
+ <i
25615
+ class="fas fa-external-link-alt"
25616
+ aria-hidden="true"
25617
+ ></i>
25618
+ </span>
25619
+ <span class="pf-screen-reader">(opens new window)</span>
25620
+ </a>
25621
+ <button
25622
+ class="pf-c-app-launcher__menu-item pf-m-action"
25623
+ type="button"
25624
+ aria-label="Favorite"
25625
+ >
25626
+ <i class="fas fa-star" aria-hidden="true"></i>
25627
+ </button>
25628
+ </li>
25629
+ </ul>
25630
+ </section>
25631
+ <hr class="pf-c-divider" />
25632
+ <section class="pf-c-app-launcher__group">
25633
+ <h1 class="pf-c-app-launcher__group-title">Group 1</h1>
25634
+ <ul>
25635
+ <li
25636
+ class="pf-c-app-launcher__menu-wrapper pf-m-external"
25637
+ >
25638
+ <a class="pf-c-app-launcher__menu-item">
25639
+ Link 1
25640
+ <span
25641
+ class="pf-c-app-launcher__menu-item-external-icon"
25642
+ >
25643
+ <i
25644
+ class="fas fa-external-link-alt"
25645
+ aria-hidden="true"
25646
+ ></i>
25647
+ </span>
25648
+ <span class="pf-screen-reader">(opens new window)</span>
25649
+ </a>
25650
+ <button
25651
+ class="pf-c-app-launcher__menu-item pf-m-action"
25652
+ type="button"
25653
+ aria-label="Favorite"
25654
+ >
25655
+ <i class="fas fa-star" aria-hidden="true"></i>
25656
+ </button>
25657
+ </li>
25658
+ <li
25659
+ class="pf-c-app-launcher__menu-wrapper pf-m-external pf-m-favorite"
25660
+ >
25661
+ <a class="pf-c-app-launcher__menu-item">
25662
+ Link 2
25663
+ <span
25664
+ class="pf-c-app-launcher__menu-item-external-icon"
25665
+ >
25666
+ <i
25667
+ class="fas fa-external-link-alt"
25668
+ aria-hidden="true"
25669
+ ></i>
25670
+ </span>
25671
+ <span class="pf-screen-reader">(opens new window)</span>
25672
+ </a>
25673
+ <button
25674
+ class="pf-c-app-launcher__menu-item pf-m-action"
25675
+ type="button"
25676
+ aria-label="Favorite"
25677
+ >
25678
+ <i class="fas fa-star" aria-hidden="true"></i>
25679
+ </button>
25680
+ </li>
25681
+ </ul>
25682
+ </section>
25683
+ </div>
25684
+ </nav>
25685
+ </div>
25686
+ <div class="pf-c-toolbar__item">
25687
+ <div class="pf-c-dropdown">
25688
+ <button
25689
+ class="pf-c-dropdown__toggle pf-m-plain"
25690
+ id="image-alignment-demo-masthead-settings-button"
25691
+ aria-expanded="false"
25692
+ type="button"
25693
+ aria-label="Settings"
25694
+ >
25695
+ <i class="fas fa-cog" aria-hidden="true"></i>
25696
+ </button>
25697
+ <ul
25698
+ class="pf-c-dropdown__menu pf-m-align-right"
25699
+ aria-labelledby="image-alignment-demo-masthead-settings-button"
25700
+ hidden
25701
+ >
25702
+ <li>
25703
+ <button
25704
+ class="pf-c-dropdown__menu-item"
25705
+ type="button"
25706
+ >Settings</button>
25707
+ </li>
25708
+ <li>
25709
+ <button
25710
+ class="pf-c-dropdown__menu-item"
25711
+ type="button"
25712
+ >Use the beta release</button>
25713
+ </li>
25714
+ </ul>
25715
+ </div>
25716
+ </div>
25717
+ <div class="pf-c-toolbar__item">
25718
+ <div class="pf-c-dropdown">
25719
+ <button
25720
+ class="pf-c-dropdown__toggle pf-m-plain"
25721
+ id="image-alignment-demo-masthead-help-button"
25722
+ aria-expanded="false"
25723
+ type="button"
25724
+ aria-label="Help"
25725
+ >
25726
+ <i class="fas fa-question-circle" aria-hidden="true"></i>
25727
+ </button>
25728
+ <ul
25729
+ class="pf-c-dropdown__menu pf-m-align-right"
25730
+ aria-labelledby="image-alignment-demo-masthead-help-button"
25731
+ hidden
25732
+ >
25733
+ <li>
25734
+ <button
25735
+ class="pf-c-dropdown__menu-item"
25736
+ type="button"
25737
+ >Support options</button>
25738
+ </li>
25739
+ <li>
25740
+ <button
25741
+ class="pf-c-dropdown__menu-item"
25742
+ type="button"
25743
+ >Open support case</button>
25744
+ </li>
25745
+ <li>
25746
+ <button
25747
+ class="pf-c-dropdown__menu-item"
25748
+ type="button"
25749
+ >API documentation</button>
25750
+ </li>
25751
+ </ul>
25752
+ </div>
25753
+ </div>
25754
+ </div>
25755
+ <div class="pf-c-toolbar__item pf-m-hidden-on-lg">
25756
+ <div class="pf-c-dropdown">
25757
+ <button
25758
+ class="pf-c-menu-toggle pf-m-plain"
25759
+ type="button"
25760
+ aria-expanded="false"
25761
+ aria-label="Actions"
25762
+ >
25763
+ <i class="fas fa-ellipsis-v" aria-hidden="true"></i>
25764
+ </button>
25765
+ <div class="pf-c-menu pf-m-drilldown pf-m-align-right" hidden>
25766
+ <div class="pf-c-menu__content">
25767
+ <section class="pf-c-menu__group pf-m-hidden-on-sm">
25768
+ <ul class="pf-c-menu__list" role="menu">
25769
+ <li
25770
+ class="pf-c-menu__list-item pf-m-disabled"
25771
+ role="none"
25772
+ >
25773
+ <button
25774
+ class="pf-c-menu__item"
25775
+ type="button"
25776
+ disabled
25777
+ role="menuitem"
25778
+ >
25779
+ <span class="pf-c-menu__item-description">
25780
+ <div class="pf-u-font-size-sm">Username:</div>
25781
+ <div class="pf-u-font-size-md">ned_username</div>
25782
+ </span>
25783
+ </button>
25784
+ </li>
25785
+ <li
25786
+ class="pf-c-menu__list-item pf-m-disabled"
25787
+ role="none"
25788
+ >
25789
+ <button
25790
+ class="pf-c-menu__item"
25791
+ type="button"
25792
+ disabled
25793
+ role="menuitem"
25794
+ >
25795
+ <span class="pf-c-menu__item-description">
25796
+ <div class="pf-u-font-size-sm">Account number:</div>
25797
+ <div class="pf-u-font-size-md">123456789</div>
25798
+ </span>
25799
+ </button>
25800
+ </li>
25801
+ <li class="pf-c-divider" role="separator"></li>
25802
+ <li class="pf-c-menu__list-item" role="none">
25803
+ <button
25804
+ class="pf-c-menu__item"
25805
+ type="button"
25806
+ role="menuitem"
25807
+ >
25808
+ <span class="pf-c-menu__item-main">
25809
+ <span class="pf-c-menu__item-text">My profile</span>
25810
+ </span>
25811
+ </button>
25812
+ </li>
25813
+ <li class="pf-c-menu__list-item" role="none">
25814
+ <button
25815
+ class="pf-c-menu__item"
25816
+ type="button"
25817
+ role="menuitem"
25818
+ >
25819
+ <span class="pf-c-menu__item-main">
25820
+ <span
25821
+ class="pf-c-menu__item-text"
25822
+ >User management</span>
25823
+ </span>
25824
+ </button>
25825
+ </li>
25826
+ <li class="pf-c-menu__list-item" role="none">
25827
+ <button
25828
+ class="pf-c-menu__item"
25829
+ type="button"
25830
+ role="menuitem"
25831
+ >
25832
+ <span class="pf-c-menu__item-main">
25833
+ <span class="pf-c-menu__item-text">Logout</span>
25834
+ </span>
25835
+ </button>
25836
+ </li>
25837
+ </ul>
25838
+ </section>
25839
+ <hr class="pf-c-divider pf-m-hidden-on-sm" />
25840
+ <section class="pf-c-menu__group">
25841
+ <ul class="pf-c-menu__list" role="menu">
25842
+ <li class="pf-c-menu__list-item" role="none">
25843
+ <button
25844
+ class="pf-c-menu__item"
25845
+ type="button"
25846
+ role="menuitem"
25847
+ aria-expanded="false"
25848
+ >
25849
+ <span class="pf-c-menu__item-main">
25850
+ <span class="pf-c-menu__item-icon">
25851
+ <i
25852
+ class="fas fa-fw fa-cog"
25853
+ aria-hidden="true"
25854
+ ></i>
25855
+ </span>
25856
+ <span class="pf-c-menu__item-text">Settings</span>
25857
+ <span class="pf-c-menu__item-toggle-icon">
25858
+ <i class="fas fa-angle-right"></i>
25859
+ </span>
25860
+ </span>
25861
+ </button>
25862
+ <div class="pf-c-menu" hidden>
25863
+ <div class="pf-c-menu__content">
25864
+ <ul class="pf-c-menu__list" role="menu">
25865
+ <li
25866
+ class="pf-c-menu__list-item pf-m-drill-up"
25867
+ role="none"
25868
+ >
25869
+ <button
25870
+ class="pf-c-menu__item"
25871
+ type="button"
25872
+ role="menuitem"
25873
+ >
25874
+ <span class="pf-c-menu__item-main">
25875
+ <span
25876
+ class="pf-c-menu__item-toggle-icon"
25877
+ >
25878
+ <i class="fas fa-angle-left"></i>
25879
+ </span>
25880
+ <span class="pf-c-menu__item-icon">
25881
+ <i
25882
+ class="fas fa-fw fa-cog"
25883
+ aria-hidden="true"
25884
+ ></i>
25885
+ </span>
25886
+ <span
25887
+ class="pf-c-menu__item-text"
25888
+ >Settings</span>
25889
+ </span>
25890
+ </button>
25891
+ </li>
25892
+ <li class="pf-c-divider" role="separator"></li>
25893
+ <li class="pf-c-menu__list-item" role="none">
25894
+ <a
25895
+ class="pf-c-menu__item"
25896
+ href="#"
25897
+ role="menuitem"
25898
+ >
25899
+ <span class="pf-c-menu__item-main">
25900
+ <span
25901
+ class="pf-c-menu__item-text"
25902
+ >Customer support</span>
25903
+ </span>
25904
+ </a>
25905
+ </li>
25906
+ <li class="pf-c-menu__list-item" role="none">
25907
+ <a
25908
+ class="pf-c-menu__item"
25909
+ href="#"
25910
+ role="menuitem"
25911
+ >
25912
+ <span class="pf-c-menu__item-main">
25913
+ <span class="pf-c-menu__item-text">About</span>
25914
+ </span>
25915
+ </a>
25916
+ </li>
25917
+ </ul>
25918
+ </div>
25919
+ </div>
25920
+ </li>
25921
+
25922
+ <li class="pf-c-menu__list-item" role="none">
25923
+ <button
25924
+ class="pf-c-menu__item"
25925
+ type="button"
25926
+ role="menuitem"
25927
+ aria-expanded="false"
25928
+ >
25929
+ <span class="pf-c-menu__item-main">
25930
+ <span class="pf-c-menu__item-icon">
25931
+ <i
25932
+ class="fas fa-fw fa-pf-icon pf-icon-help"
25933
+ aria-hidden="true"
25934
+ ></i>
25935
+ </span>
25936
+ <span class="pf-c-menu__item-text">Help</span>
25937
+ <span class="pf-c-menu__item-toggle-icon">
25938
+ <i class="fas fa-angle-right"></i>
25939
+ </span>
25940
+ </span>
25941
+ </button>
25942
+ <div class="pf-c-menu" hidden>
25943
+ <div class="pf-c-menu__content">
25944
+ <ul class="pf-c-menu__list" role="menu">
25945
+ <li
25946
+ class="pf-c-menu__list-item pf-m-drill-up"
25947
+ role="none"
25948
+ >
25949
+ <button
25950
+ class="pf-c-menu__item"
25951
+ type="button"
25952
+ role="menuitem"
25953
+ >
25954
+ <span class="pf-c-menu__item-main">
25955
+ <span
25956
+ class="pf-c-menu__item-toggle-icon"
25957
+ >
25958
+ <i class="fas fa-angle-left"></i>
25959
+ </span>
25960
+ <span class="pf-c-menu__item-icon">
25961
+ <i
25962
+ class="fas fa-fw fa-pf-icon pf-icon-help"
25963
+ aria-hidden="true"
25964
+ ></i>
25965
+ </span>
25966
+ <span class="pf-c-menu__item-text">Help</span>
25967
+ </span>
25968
+ </button>
25969
+ </li>
25970
+ <li class="pf-c-divider" role="separator"></li>
25971
+ <li class="pf-c-menu__list-item" role="none">
25972
+ <a
25973
+ class="pf-c-menu__item"
25974
+ href="#"
25975
+ role="menuitem"
25976
+ >
25977
+ <span class="pf-c-menu__item-main">
25978
+ <span
25979
+ class="pf-c-menu__item-text"
25980
+ >Support options</span>
25981
+ </span>
25982
+ </a>
25983
+ </li>
25984
+ <li class="pf-c-menu__list-item" role="none">
25985
+ <a
25986
+ class="pf-c-menu__item"
25987
+ href="#"
25988
+ role="menuitem"
25989
+ >
25990
+ <span class="pf-c-menu__item-main">
25991
+ <span
25992
+ class="pf-c-menu__item-text"
25993
+ >Open support case</span>
25994
+ </span>
25995
+ </a>
25996
+ </li>
25997
+ <li class="pf-c-menu__list-item" role="none">
25998
+ <a
25999
+ class="pf-c-menu__item"
26000
+ href="#"
26001
+ role="menuitem"
26002
+ >
26003
+ <span class="pf-c-menu__item-main">
26004
+ <span
26005
+ class="pf-c-menu__item-text"
26006
+ >API documentation</span>
26007
+ </span>
26008
+ </a>
26009
+ </li>
26010
+ </ul>
26011
+ </div>
26012
+ </div>
26013
+ </li>
26014
+
26015
+ <li class="pf-c-menu__list-item" role="none">
26016
+ <button
26017
+ class="pf-c-menu__item"
26018
+ type="button"
26019
+ role="menuitem"
26020
+ >
26021
+ <span class="pf-c-menu__item-main">
26022
+ <span class="pf-c-menu__item-icon">
26023
+ <i class="fas fa-fw fa-th" aria-hidden="true"></i>
26024
+ </span>
26025
+ <span
26026
+ class="pf-c-menu__item-text"
26027
+ >Application launcher</span>
26028
+ <span class="pf-c-menu__item-toggle-icon">
26029
+ <i class="fas fa-angle-right"></i>
26030
+ </span>
26031
+ </span>
26032
+ </button>
26033
+ <div class="pf-c-menu" hidden>
26034
+ <div class="pf-c-menu__header">
26035
+ <button
26036
+ class="pf-c-menu__item"
26037
+ type="button"
26038
+ role="menuitem"
26039
+ >
26040
+ <span class="pf-c-menu__item-main">
26041
+ <span class="pf-c-menu__item-toggle-icon">
26042
+ <i class="fas fa-angle-left"></i>
26043
+ </span>
26044
+ <span class="pf-c-menu__item-icon">
26045
+ <i
26046
+ class="fas fa-fw fa-th"
26047
+ aria-hidden="true"
26048
+ ></i>
26049
+ </span>
26050
+ <span
26051
+ class="pf-c-menu__item-text"
26052
+ >Application launcher</span>
26053
+ </span>
26054
+ </button>
26055
+ </div>
26056
+ <div class="pf-c-menu__search">
26057
+ <div class="pf-c-menu__search-input">
26058
+ <div class="pf-c-search-input">
26059
+ <div class="pf-c-search-input__bar">
26060
+ <span class="pf-c-search-input__text">
26061
+ <span class="pf-c-search-input__icon">
26062
+ <i
26063
+ class="fas fa-search fa-fw"
26064
+ aria-hidden="true"
26065
+ ></i>
26066
+ </span>
26067
+ <input
26068
+ class="pf-c-search-input__text-input"
26069
+ type="text"
26070
+ placeholder="Search"
26071
+ aria-label="Search"
26072
+ />
26073
+ </span>
26074
+ </div>
26075
+ </div>
26076
+ </div>
26077
+ </div>
26078
+ <hr class="pf-c-divider" />
26079
+ <section class="pf-c-menu__group">
26080
+ <h1 class="pf-c-menu__group-title">Favorites</h1>
26081
+ <ul class="pf-c-menu__list" role="menu">
26082
+ <li class="pf-c-menu__list-item" role="none">
26083
+ <a
26084
+ class="pf-c-menu__item"
26085
+ href="#"
26086
+ role="menuitem"
26087
+ >
26088
+ <span class="pf-c-menu__item-main">
26089
+ <span
26090
+ class="pf-c-menu__item-text"
26091
+ >Link 1</span>
26092
+ </span>
26093
+ </a>
26094
+ <button
26095
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
26096
+ type="button"
26097
+ aria-label="Starred"
26098
+ >
26099
+ <span class="pf-c-menu__item-action-icon">
26100
+ <i
26101
+ class="fas fa-star"
26102
+ aria-hidden="true"
26103
+ ></i>
26104
+ </span>
26105
+ </button>
26106
+ </li>
26107
+ <li class="pf-c-menu__list-item" role="none">
26108
+ <a
26109
+ class="pf-c-menu__item"
26110
+ href="#"
26111
+ role="menuitem"
26112
+ target="_blank"
26113
+ >
26114
+ <span class="pf-c-menu__item-main">
26115
+ <span
26116
+ class="pf-c-menu__item-text"
26117
+ >Link 2</span>
26118
+ <span
26119
+ class="pf-c-menu__item-external-icon"
26120
+ >
26121
+ <i
26122
+ class="fas fa-external-link-alt"
26123
+ aria-hidden="true"
26124
+ ></i>
26125
+ </span>
26126
+ <span
26127
+ class="pf-screen-reader"
26128
+ >(opens new window)</span>
26129
+ </span>
26130
+ </a>
26131
+ <button
26132
+ class="pf-c-menu__item-action pf-m-favorite"
26133
+ type="button"
26134
+ aria-label="Not starred"
26135
+ >
26136
+ <span class="pf-c-menu__item-action-icon">
26137
+ <i
26138
+ class="fas fa-star"
26139
+ aria-hidden="true"
26140
+ ></i>
26141
+ </span>
26142
+ </button>
26143
+ </li>
26144
+ </ul>
26145
+ </section>
26146
+ <hr class="pf-c-divider" />
26147
+ <section class="pf-c-menu__group">
26148
+ <h1 class="pf-c-menu__group-title">Group 1</h1>
26149
+ <ul class="pf-c-menu__list" role="menu">
26150
+ <li class="pf-c-menu__list-item" role="none">
26151
+ <a
26152
+ class="pf-c-menu__item"
26153
+ href="#"
26154
+ role="menuitem"
26155
+ >
26156
+ <span class="pf-c-menu__item-main">
26157
+ <span
26158
+ class="pf-c-menu__item-text"
26159
+ >Link 1</span>
26160
+ </span>
26161
+ </a>
26162
+ <button
26163
+ class="pf-c-menu__item-action pf-m-favorite"
26164
+ type="button"
26165
+ aria-label="Not starred"
26166
+ >
26167
+ <span class="pf-c-menu__item-action-icon">
26168
+ <i
26169
+ class="fas fa-star"
26170
+ aria-hidden="true"
26171
+ ></i>
26172
+ </span>
26173
+ </button>
26174
+ </li>
26175
+ <li class="pf-c-menu__list-item" role="none">
26176
+ <a
26177
+ class="pf-c-menu__item"
26178
+ href="#"
26179
+ role="menuitem"
26180
+ target="_blank"
26181
+ >
26182
+ <span class="pf-c-menu__item-main">
26183
+ <span
26184
+ class="pf-c-menu__item-text"
26185
+ >Link 2</span>
26186
+ <span
26187
+ class="pf-c-menu__item-external-icon"
26188
+ >
26189
+ <i
26190
+ class="fas fa-external-link-alt"
26191
+ aria-hidden="true"
26192
+ ></i>
26193
+ </span>
26194
+ <span
26195
+ class="pf-screen-reader"
26196
+ >(opens new window)</span>
26197
+ </span>
26198
+ </a>
26199
+ <button
26200
+ class="pf-c-menu__item-action pf-m-favorite pf-m-favorited"
26201
+ type="button"
26202
+ aria-label="Starred"
26203
+ >
26204
+ <span class="pf-c-menu__item-action-icon">
26205
+ <i
26206
+ class="fas fa-star"
26207
+ aria-hidden="true"
26208
+ ></i>
26209
+ </span>
26210
+ </button>
26211
+ </li>
26212
+ </ul>
26213
+ </section>
26214
+ </div>
26215
+ </li>
26216
+ </ul>
26217
+ </section>
26218
+ </div>
26219
+ </div>
26220
+ </div>
26221
+ </div>
26222
+ </div>
26223
+ <div class="pf-c-toolbar__item pf-m-hidden pf-m-visible-on-sm">
26224
+ <div
26225
+ class="pf-c-dropdown pf-m-full-height"
26226
+ style="--pf-c-dropdown--MaxWidth: 20ch;"
26227
+ >
26228
+ <button
26229
+ class="pf-c-dropdown__toggle"
26230
+ id="image-alignment-demo-masthead-profile-button"
26231
+ aria-expanded="false"
26232
+ type="button"
26233
+ >
26234
+ <span class="pf-c-dropdown__toggle-image">
26235
+ <img
26236
+ class="pf-c-avatar"
26237
+ src="/assets/images/img_avatar.svg"
26238
+ alt="Avatar image"
26239
+ />
26240
+ </span>
26241
+ <span class="pf-c-dropdown__toggle-text">Ned Username</span>
26242
+ <span class="pf-c-dropdown__toggle-icon">
26243
+ <i class="fas fa-caret-down" aria-hidden="true"></i>
26244
+ </span>
26245
+ </button>
26246
+ <div class="pf-c-dropdown__menu" hidden>
26247
+ <section class="pf-c-dropdown__group">
26248
+ <div class="pf-c-dropdown__menu-item pf-m-text">
26249
+ <div class="pf-u-font-size-sm">Account number:</div>
26250
+ <div>123456789</div>
26251
+ </div>
26252
+ <div class="pf-c-dropdown__menu-item pf-m-text">
26253
+ <div class="pf-u-font-size-sm">Username:</div>
26254
+ <div>mshaksho@redhat.com</div>
26255
+ </div>
26256
+ </section>
26257
+ <hr class="pf-c-divider" />
26258
+ <section class="pf-c-dropdown__group">
26259
+ <ul>
26260
+ <li>
26261
+ <a class="pf-c-dropdown__menu-item" href="#">My profile</a>
26262
+ </li>
26263
+ <li>
26264
+ <a
26265
+ class="pf-c-dropdown__menu-item"
26266
+ href="#"
26267
+ >User management</a>
26268
+ </li>
26269
+ <li>
26270
+ <a class="pf-c-dropdown__menu-item" href="#">Logout</a>
26271
+ </li>
26272
+ </ul>
26273
+ </section>
26274
+ </div>
26275
+ </div>
26276
+ </div>
26277
+ </div>
26278
+ </div>
26279
+ </div>
26280
+ </div>
26281
+ </header>
26282
+ <div class="pf-c-page__sidebar">
26283
+ <div class="pf-c-page__sidebar-body">
26284
+ <nav
26285
+ class="pf-c-nav"
26286
+ id="image-alignment-demo-primary-nav"
26287
+ aria-label="Global"
26288
+ >
26289
+ <ul class="pf-c-nav__list">
26290
+ <li class="pf-c-nav__item">
26291
+ <a href="#" class="pf-c-nav__link">System panel</a>
26292
+ </li>
26293
+ <li class="pf-c-nav__item">
26294
+ <a
26295
+ href="#"
26296
+ class="pf-c-nav__link pf-m-current"
26297
+ aria-current="page"
26298
+ >Policy</a>
26299
+ </li>
26300
+ <li class="pf-c-nav__item">
26301
+ <a href="#" class="pf-c-nav__link">Authentication</a>
26302
+ </li>
26303
+ <li class="pf-c-nav__item">
26304
+ <a href="#" class="pf-c-nav__link">Network services</a>
26305
+ </li>
26306
+ <li class="pf-c-nav__item">
26307
+ <a href="#" class="pf-c-nav__link">Server</a>
26308
+ </li>
26309
+ </ul>
26310
+ </nav>
26311
+ </div>
26312
+ </div>
26313
+ <main
26314
+ class="pf-c-page__main"
26315
+ tabindex="-1"
26316
+ id="main-content-image-alignment-demo"
26317
+ >
26318
+ <section class="pf-c-page__main-breadcrumb pf-m-limit-width">
26319
+ <div class="pf-c-page__main-body">
26320
+ <nav class="pf-c-breadcrumb" aria-label="breadcrumb">
26321
+ <ol class="pf-c-breadcrumb__list">
26322
+ <li class="pf-c-breadcrumb__item">
26323
+ <a href="#" class="pf-c-breadcrumb__link">Section home</a>
26324
+ </li>
26325
+ <li class="pf-c-breadcrumb__item">
26326
+ <span class="pf-c-breadcrumb__item-divider">
26327
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
26328
+ </span>
26329
+
26330
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
26331
+ </li>
26332
+ <li class="pf-c-breadcrumb__item">
26333
+ <span class="pf-c-breadcrumb__item-divider">
26334
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
26335
+ </span>
26336
+
26337
+ <a href="#" class="pf-c-breadcrumb__link">Section title</a>
26338
+ </li>
26339
+ <li class="pf-c-breadcrumb__item">
26340
+ <span class="pf-c-breadcrumb__item-divider">
26341
+ <i class="fas fa-angle-right" aria-hidden="true"></i>
26342
+ </span>
26343
+
26344
+ <a
26345
+ href="#"
26346
+ class="pf-c-breadcrumb__link pf-m-current"
26347
+ aria-current="page"
26348
+ >Section landing</a>
26349
+ </li>
26350
+ </ol>
26351
+ </nav>
26352
+ </div>
26353
+ </section>
26354
+ <section class="pf-c-page__main-section pf-m-limit-width pf-m-light">
26355
+ <div class="pf-c-page__main-body">
26356
+ <div class="pf-c-content">
26357
+ <h1>Main title</h1>
26358
+ <p>This is a full page demo.</p>
26359
+ </div>
26360
+ </div>
26361
+ </section>
26362
+ <section
26363
+ class="pf-c-page__main-section pf-m-limit-width pf-m-no-padding pf-m-padding-on-xl"
26364
+ >
26365
+ <div class="pf-c-page__main-body">
26366
+ <table
26367
+ class="pf-c-table pf-m-grid-lg"
26368
+ role="grid"
26369
+ aria-label="This is an example of how to control image and text alignment in table cells."
26370
+ id="image-alignment-demo-table"
26371
+ >
26372
+ <thead>
26373
+ <tr role="row">
26374
+ <th
26375
+ class="pf-m-nowrap pf-c-table__sort pf-m-selected"
26376
+ role="columnheader"
26377
+ aria-sort="ascending"
26378
+ scope="col"
26379
+ >
26380
+ <button class="pf-c-table__button">
26381
+ <div class="pf-c-table__button-content">
26382
+ <span class="pf-c-table__text">Repositories</span>
26383
+ <span class="pf-c-table__sort-indicator">
26384
+ <i class="fas fa-long-arrow-alt-up"></i>
26385
+ </span>
26386
+ </div>
26387
+ </button>
26388
+ </th>
26389
+ <th
26390
+ class="pf-m-fit-content pf-c-table__sort pf-m-help"
26391
+ role="columnheader"
26392
+ aria-sort="none"
26393
+ scope="col"
26394
+ >
26395
+ <div class="pf-c-table__column-help">
26396
+ <button class="pf-c-table__button">
26397
+ <div class="pf-c-table__button-content">
26398
+ <span class="pf-c-table__text">Branches</span>
26399
+ <span class="pf-c-table__sort-indicator">
26400
+ <i class="fas fa-arrows-alt-v"></i>
26401
+ </span>
26402
+ </div>
26403
+ </button>
26404
+ <span class="pf-c-table__column-help-action">
26405
+ <button
26406
+ class="pf-c-button pf-m-plain"
26407
+ type="button"
26408
+ aria-label="More info"
26409
+ >
26410
+ <i class="pficon pf-icon-help" aria-hidden="true"></i>
26411
+ </button>
26412
+ </span>
26413
+ </div>
26414
+ </th>
26415
+ <th
26416
+ class="pf-m-fit-content pf-c-table__sort"
26417
+ role="columnheader"
26418
+ aria-sort="none"
26419
+ scope="col"
26420
+ >
26421
+ <button class="pf-c-table__button">
26422
+ <div class="pf-c-table__button-content">
26423
+ <span class="pf-c-table__text">Pull requests</span>
26424
+ <span class="pf-c-table__sort-indicator">
26425
+ <i class="fas fa-arrows-alt-v"></i>
26426
+ </span>
26427
+ </div>
26428
+ </button>
26429
+ </th>
26430
+ <th
26431
+ class="pf-m-fit-content"
26432
+ role="columnheader"
26433
+ scope="col"
26434
+ >Workspaces</th>
26435
+ <th
26436
+ class="pf-m-fit-content pf-m-help"
26437
+ role="columnheader"
26438
+ scope="col"
26439
+ >
26440
+ <div class="pf-c-table__column-help">
26441
+ <span class="pf-c-table__text">Last commit</span>
26442
+ <span class="pf-c-table__column-help-action">
26443
+ <button
26444
+ class="pf-c-button pf-m-plain"
26445
+ type="button"
26446
+ aria-label="More info"
26447
+ >
26448
+ <i class="pficon pf-icon-help" aria-hidden="true"></i>
26449
+ </button>
26450
+ </span>
26451
+ </div>
26452
+ </th>
26453
+ </tr>
26454
+ </thead>
26455
+
26456
+ <tbody role="rowgroup">
26457
+ <tr role="row">
26458
+ <td role="cell" data-label="Repository name">
26459
+ <div class="pf-l-flex pf-m-nowrap">
26460
+ <div class="pf-l-flex pf-m-align-self-flex-start pf-u-mt-sm">
26461
+ <div class="table-demo-icon">
26462
+ <svg
26463
+ id="Layer_1"
26464
+ data-name="Layer 1"
26465
+ xmlns="http://www.w3.org/2000/svg"
26466
+ viewBox="0 0 192 145"
26467
+ >
26468
+ <defs>
26469
+ <style>
26470
+ .cls-1 {
26471
+ fill: #e00;
26472
+ }
26473
+ </style>
26474
+ </defs>
26475
+ <title>RedHat-Logo-Hat-Color</title>
26476
+ <path
26477
+ d="M157.77,62.61a14,14,0,0,1,.31,3.42c0,14.88-18.1,17.46-30.61,17.46C78.83,83.49,42.53,53.26,42.53,44a6.43,6.43,0,0,1,.22-1.94l-3.66,9.06a18.45,18.45,0,0,0-1.51,7.33c0,18.11,41,45.48,87.74,45.48,20.69,0,36.43-7.76,36.43-21.77,0-1.08,0-1.94-1.73-10.13Z"
26478
+ />
26479
+ <path
26480
+ class="cls-1"
26481
+ d="M127.47,83.49c12.51,0,30.61-2.58,30.61-17.46a14,14,0,0,0-.31-3.42l-7.45-32.36c-1.72-7.12-3.23-10.35-15.73-16.6C124.89,8.69,103.76.5,97.51.5,91.69.5,90,8,83.06,8c-6.68,0-11.64-5.6-17.89-5.6-6,0-9.91,4.09-12.93,12.5,0,0-8.41,23.72-9.49,27.16A6.43,6.43,0,0,0,42.53,44c0,9.22,36.3,39.45,84.94,39.45M160,72.07c1.73,8.19,1.73,9.05,1.73,10.13,0,14-15.74,21.77-36.43,21.77C78.54,104,37.58,76.6,37.58,58.49a18.45,18.45,0,0,1,1.51-7.33C22.27,52,.5,55,.5,74.22c0,31.48,74.59,70.28,133.65,70.28,45.28,0,56.7-20.48,56.7-36.65,0-12.72-11-27.16-30.83-35.78"
26482
+ />
26483
+ </svg>
26484
+ </div>
26485
+ </div>
26486
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
26487
+ <h1 class="pf-c-title pf-m-xl">Repository 1</h1>
26488
+ <span
26489
+ class="pf-u-font-size-sm"
26490
+ >2.6.6 provided by Red Hat Inc</span>
26491
+ </div>
26492
+ </div>
26493
+ </td>
26494
+ <td role="cell" data-label="Branches">10</td>
26495
+ <td role="cell" data-label="Pull requests">25</td>
26496
+ <td role="cell" data-label="Workspaces">5</td>
26497
+ <td role="cell" data-label="Last commit">2 days ago</td>
26498
+ </tr>
26499
+
26500
+ <tr role="row">
26501
+ <td role="cell" data-label="Repository name">
26502
+ <div class="pf-l-flex pf-m-nowrap">
26503
+ <div class="pf-l-flex pf-m-align-self-flex-start pf-u-mt-sm">
26504
+ <div class="table-demo-icon">
26505
+ <svg
26506
+ role="img"
26507
+ viewBox="0 0 24 24"
26508
+ xmlns="http://www.w3.org/2000/svg"
26509
+ fill="currentColor"
26510
+ >
26511
+ <title>GitHub logo</title>
26512
+ <path
26513
+ d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
26514
+ />
26515
+ </svg>
26516
+ </div>
26517
+ </div>
26518
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
26519
+ <h1 class="pf-c-title pf-m-xl">Repository 2</h1>
26520
+ <span class="pf-u-font-size-sm">2.6.6 provided by Github</span>
26521
+ </div>
26522
+ </div>
26523
+ </td>
26524
+ <td role="cell" data-label="Branches">10</td>
26525
+ <td role="cell" data-label="Pull requests">25</td>
26526
+ <td role="cell" data-label="Workspaces">5</td>
26527
+ <td role="cell" data-label="Last commit">2 days ago</td>
26528
+ </tr>
26529
+
26530
+ <tr role="row">
26531
+ <td role="cell" data-label="Repository name">
26532
+ <div class="pf-l-flex pf-m-nowrap">
26533
+ <div class="pf-l-flex pf-m-align-self-flex-start pf-u-mt-sm">
26534
+ <div class="table-demo-icon">
26535
+ <svg
26536
+ role="img"
26537
+ viewBox="0 0 24 24"
26538
+ xmlns="http://www.w3.org/2000/svg"
26539
+ fill="#4285F4"
26540
+ >
26541
+ <title>Google logo</title>
26542
+ <path
26543
+ d="M12.24 10.285V14.4h6.806c-.275 1.765-2.056 5.174-6.806 5.174-4.095 0-7.439-3.389-7.439-7.574s3.345-7.574 7.439-7.574c2.33 0 3.891.989 4.785 1.849l3.254-3.138C18.189 1.186 15.479 0 12.24 0c-6.635 0-12 5.365-12 12s5.365 12 12 12c6.926 0 11.52-4.869 11.52-11.726 0-.788-.085-1.39-.189-1.989H12.24z"
26544
+ />
26545
+ </svg>
26546
+ </div>
26547
+ </div>
26548
+ <div class="pf-l-flex pf-m-column pf-m-space-items-none">
26549
+ <h1 class="pf-c-title pf-m-xl">Repository 3</h1>
26550
+ <span class="pf-u-font-size-sm">1.2.3 provided by Google</span>
26551
+ </div>
26552
+ </div>
26553
+ </td>
26554
+ <td role="cell" data-label="Branches">10</td>
26555
+ <td role="cell" data-label="Pull requests">25</td>
26556
+ <td role="cell" data-label="Workspaces">5</td>
26557
+ <td role="cell" data-label="Last commit">2 days ago</td>
26558
+ </tr>
26559
+ </tbody>
26560
+ </table>
26561
+ </div>
26562
+ </section>
26563
+ </main>
26564
+ </div>
26565
+
26566
+ ```