@patternfly/patternfly

--- id: Primary-detail section: demos wrapperTag: div --- ## Demos ### Primary-detail expanded ```html isFullscreen <div class="pf-c-page" id="primary-detail-expanded-example"> <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-primary-detail-expanded-example">Skip to content</a> <header class="pf-c-page__header"> <div class="pf-c-page__header-brand"> <div class="pf-c-page__header-brand-toggle"> <button class="pf-c-button pf-m-plain" type="button" id="primary-detail-expanded-example-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="primary-detail-expanded-example-primary-nav"> <i class="fas fa-bars" aria-hidden="true"></i> </button> </div> <a href="#" class="pf-c-page__header-brand-link"> <img class="pf-c-brand" src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo" /> </a> </div> <div class="pf-c-page__header-tools"> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Settings"> <i class="fas fa-cog" aria-hidden="true"></i> </button> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Help"> <i class="pf-icon pf-icon-help" aria-hidden="true"></i> </button> </div> </div> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="primary-detail-expanded-example-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="primary-detail-expanded-example-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="primary-detail-expanded-example-dropdown-button" aria-expanded="false"> <span class="pf-c-dropdown__toggle-text">John Smith</span> <span class="pf-c-dropdown__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div> </div> </div> </div> <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar image" /> </div> </header> <div class="pf-c-page__sidebar"> <div class="pf-c-page__sidebar-body"> <nav class="pf-c-nav" id="primary-detail-expanded-example-primary-nav" aria-label="Global"> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">System panel</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Policy</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Authentication</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Network services</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Server</a> </li> </ul> </nav> </div> </div> <main class="pf-c-page__main" tabindex="-1"> <section class="pf-c-page__main-breadcrumb pf-m-limit-width"> <div class="pf-c-page__main-body"> <nav class="pf-c-breadcrumb" aria-label="breadcrumb"> <ol class="pf-c-breadcrumb__list"> <li class="pf-c-breadcrumb__item"> <a href="#" class="pf-c-breadcrumb__link">Section home</a> </li> <li class="pf-c-breadcrumb__item"> <span class="pf-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-c-breadcrumb__link">Section title</a> </li> <li class="pf-c-breadcrumb__item"> <span class="pf-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-c-breadcrumb__link">Section title</a> </li> <li class="pf-c-breadcrumb__item"> <span class="pf-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-c-breadcrumb__link pf-m-current" aria-current="page">Section landing</a> </li> </ol> </nav> </div> </section> <section class="pf-c-page__main-section pf-m-light"> <div class="pf-c-content"> <h1>Primary-detail expanded</h1> <p>Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5</p> </div> </section> <div class="pf-c-divider" role="separator"></div> <section class="pf-c-page__main-section pf-m-no-padding">  <div class="pf-c-drawer pf-m-inline-on-2xl pf-m-expanded"> <div class="pf-c-drawer__main">  <div class="pf-c-drawer__content"> <div class="pf-c-drawer__body"> <div class="pf-c-toolbar" id="primary-detail-expanded-example-toolbar"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show"> <div class="pf-c-toolbar__toggle"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Show filters" aria-expanded="false" aria-controls="primary-detail-expanded-example-toolbar-expandable-content"> <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-select" style='width: 150px'> <span id="primary-detail-expanded-example-toolbar-select-status-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="primary-detail-expanded-example-toolbar-select-status-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="primary-detail-expanded-example-toolbar-select-status-label primary-detail-expanded-example-toolbar-select-status-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-icon"> <i class="fas fa-filter" aria-hidden="true"></i> </span> <span class="pf-c-select__toggle-text">Status</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-c-select__menu" aria-labelledby="primary-detail-expanded-example-toolbar-select-status-label" hidden style='width: 150px'> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Running</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Stopped</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Down</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Degraded</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Needs Maintenance</button> </li> </ul> </div> </div> </div> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Sort"> <i class="fas fa-sort-amount-down" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item pf-m-overflow-menu "> <div class="pf-c-overflow-menu" id="primary-detail-expanded-example-toolbar-overflow-menu"> <div class="pf-c-overflow-menu__content"> <div class="pf-c-overflow-menu__group pf-m-button-group"> <div class="pf-c-overflow-menu__item"> <button class="pf-c-button pf-m-primary" type="button">Primary</button> </div> <div class="pf-c-overflow-menu__item"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> </div> </div> </div> <div class="pf-c-overflow-menu__control"> <div class="pf-c-dropdown"> <button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="primary-detail-expanded-example-toolbar-overflow-menu-dropdown-toggle" aria-label="Overflow menu"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu" aria-labelledby="primary-detail-expanded-example-toolbar-overflow-menu-dropdown-toggle" hidden> <li> <button class="pf-c-dropdown__menu-item">Tertiary</button> </li> </ul> </div> </div> </div> </div> <div class="pf-c-toolbar__item pf-m-pagination "> <div class="pf-c-pagination"> <div class="pf-c-pagination__total-items"> <b>1 - 10</b>of <b>37</b> </div> <div class="pf-c-options-menu"> <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain"> <span class="pf-c-options-menu__toggle-text"> <b>1 - 10</b> of  <b>37</b> </span> <button class="pf-c-options-menu__toggle-button" id="primary-detail-expanded-example-toolbar-pagination-options-menu-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page"> <span class="pf-c-options-menu__toggle-button-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> </div> <ul class="pf-c-options-menu__menu" aria-labelledby="primary-detail-expanded-example-toolbar-pagination-options-menu-toggle" hidden> <li> <button class="pf-c-options-menu__menu-item" type="button">5 per page</button> </li> <li> <button class="pf-c-options-menu__menu-item" type="button">10 per page <div class="pf-c-options-menu__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </div> </button> </li> <li> <button class="pf-c-options-menu__menu-item" type="button">20 per page</button> </li> </ul> </div> <nav class="pf-c-pagination__nav" aria-label="Pagination" aria-label="Pagination top"> <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page"> <i class="fas fa-angle-left" aria-hidden="true"></i> </button> <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page"> <i class="fas fa-angle-right" aria-hidden="true"></i> </button> </nav> </div> </div> </div> <div class="pf-c-toolbar__expandable-content pf-m-hidden" id="primary-detail-expanded-example-toolbar-expandable-content" hidden></div> </div> </div> <ul class="pf-c-data-list" role="list" aria-label="Simple data list example" id="primary-detail-expanded-example-data-list"> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-expanded-example-data-list-item1"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <div class="pf-l-flex pf-m-column"> <div class="pf-l-flex__item"> <p id='primary-detail-expanded-example-data-list-item1'>patternfly</p> <small>Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a> </small> </div> <div class="pf-l-flex"> <div class="pf-l-flex__item"> <i class="fas fa-code-branch" aria-hidden="true"></i> 10 </div> <div class="pf-l-flex__item"> <i class="fas fa-code" aria-hidden="true"></i> 4 </div> <div class="pf-l-flex__item"> <i class="fas fa-cube" aria-hidden="true"></i> 5 </div> <div class="pf-l-flex__item">Updated 2 days ago</div> </div> </div> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item pf-m-selectable pf-m-selected" aria-labelledby="primary-detail-expanded-example-data-list-item2"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <div> <div> <p id='primary-detail-expanded-example-data-list-item2'>patternfly-elements</p> <small>PatternFly elements</small> </div> <div class="pf-l-flex pf-m-wrap"> <div> <i class="fas fa-code-branch" aria-hidden="true"></i> 5 </div> <div> <i class="fas fa-code" aria-hidden="true"></i> 9 </div> <div> <i class="fas fa-cube" aria-hidden="true"></i> 2 </div> <div> <i class="fas fa-check-circle" aria-hidden="true"></i> 11 </div> <div> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> 4 </div> <div> <i class="fas fa-times-circle" aria-hidden="true"></i> 1 </div> <div>Updated 2 days ago</div> </div> </div> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-expanded-example-data-list-item3"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <p id='primary-detail-expanded-example-data-list-item3'>patternfly-unified-design-kit</p> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-expanded-example-data-list-item4"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <div> <div> <p id='primary-detail-expanded-example-data-list-item4'>patternfly</p> <small>Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a> </small> </div> <div class="pf-l-flex pf-m-wrap"> <div> <i class="fas fa-code-branch" aria-hidden="true"></i> 10 </div> <div> <i class="fas fa-code" aria-hidden="true"></i> 4 </div> <div> <i class="fas fa-cube" aria-hidden="true"></i> 5 </div> <div>Updated 2 days ago</div> </div> </div> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-expanded-example-data-list-item5"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <div> <div> <p id='primary-detail-expanded-example-data-list-item5'>patternfly-elements</p> <small>PatternFly elements</small> </div> <div class="pf-l-flex pf-m-wrap"> <div> <i class="fas fa-code-branch" aria-hidden="true"></i> 5 </div> <div> <i class="fas fa-code" aria-hidden="true"></i> 9 </div> <div> <i class="fas fa-cube" aria-hidden="true"></i> 2 </div> <div> <i class="fas fa-check-circle" aria-hidden="true"></i> 11 </div> <div> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> 4 </div> <div> <i class="fas fa-times-circle" aria-hidden="true"></i> 1 </div> <div>Updated 2 days ago</div> </div> </div> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> </ul> </div> </div>  <div class="pf-c-drawer__panel">  <div class="pf-c-drawer__body"> <div class="pf-l-flex pf-m-column"> <div class="pf-l-flex__item"> <div class="pf-c-drawer__head"> <div class="pf-c-drawer__actions"> <div class="pf-c-drawer__close"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Close drawer panel"> <i class="fas fa-times" aria-hidden="true"></i> </button> </div> </div> <h2 class="pf-c-title pf-m-lg" id="primary-detail-expanded-example-drawer-label">Node 2</h2> </div> </div> <div class="pf-l-flex__item"> <a href="#">siemur/test-space</a> </div> </div> </div>  <div class="pf-c-drawer__body pf-m-no-padding"> <div class="pf-c-tabs pf-m-box pf-m-fill" id="primary-detail-expanded-example-tabs"> <button class="pf-c-tabs__scroll-button" aria-label="Scroll left"> <i class="fas fa-angle-left" aria-hidden="true"></i> </button> <ul class="pf-c-tabs__list"> <li class="pf-c-tabs__item pf-m-current"> <button class="pf-c-tabs__link" id="primary-detail-expanded-example-tabs-overview-link"> <span class="pf-c-tabs__item-text">Overview</span> </button> </li> <li class="pf-c-tabs__item"> <button class="pf-c-tabs__link" id="primary-detail-expanded-example-tabs-activity-link"> <span class="pf-c-tabs__item-text">Activity</span> </button> </li> </ul> <button class="pf-c-tabs__scroll-button" aria-label="Scroll right"> <i class="fas fa-angle-right" aria-hidden="true"></i> </button> </div> </div>  <div class="pf-c-drawer__body"> <section class="pf-c-tab-content" id="primary-detail-expanded-example-tab1-panel" role="tabpanel" tabindex="0"> <div class="pf-l-flex pf-m-column pf-m-space-items-lg"> <div class="pf-l-flex__item"> <p>The content of the drawer really is up to you. It could have form fields, definition lists, text lists, labels, charts, progress bars, etc. Spacing recommendation is 24px margins. You can put tabs in here, and can also make the drawer scrollable.</p> </div> <div class="pf-l-flex__item"> <div class="pf-c-progress pf-m-sm" id="primary-detail-expanded-example-progress-example1"> <div class="pf-c-progress__description" id="primary-detail-expanded-example-progress-example1-description">Title</div> <div class="pf-c-progress__status" aria-hidden="true"> <span class="pf-c-progress__measure">33%</span> </div> <div class="pf-c-progress__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="33" aria-describedby="primary-detail-expanded-example-progress-example1-description"> <div class="pf-c-progress__indicator" style="width:33%;"></div> </div> </div> </div> <div class="pf-l-flex__item"> <div class="pf-c-progress pf-m-sm" id="primary-detail-expanded-example-progress-example2"> <div class="pf-c-progress__description" id="primary-detail-expanded-example-progress-example2-description">Title</div> <div class="pf-c-progress__status" aria-hidden="true"> <span class="pf-c-progress__measure">66%</span> </div> <div class="pf-c-progress__bar" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="66" aria-describedby="primary-detail-expanded-example-progress-example2-description"> <div class="pf-c-progress__indicator" style="width:66%;"></div> </div> </div> </div> </div> </section> <section class="pf-c-tab-content" id="primary-detail-expanded-example-tab2-panel" role="tabpanel" tabindex="0" hidden>Panel 2</section> </div> </div> </div> </div> </section> </main> </div> ``` ### Primary-detail collapsed ```html isFullscreen <div class="pf-c-page" id="primary-detail-collapsed-example"> <a class="pf-c-skip-to-content pf-c-button pf-m-primary" href="#main-content-primary-detail-collapsed-example">Skip to content</a> <header class="pf-c-page__header"> <div class="pf-c-page__header-brand"> <div class="pf-c-page__header-brand-toggle"> <button class="pf-c-button pf-m-plain" type="button" id="primary-detail-collapsed-example-nav-toggle" aria-label="Global navigation" aria-expanded="true" aria-controls="primary-detail-collapsed-example-primary-nav"> <i class="fas fa-bars" aria-hidden="true"></i> </button> </div> <a href="#" class="pf-c-page__header-brand-link"> <img class="pf-c-brand" src="/assets/images/PF-Masthead-Logo.svg" alt="PatternFly logo" /> </a> </div> <div class="pf-c-page__header-tools"> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Settings"> <i class="fas fa-cog" aria-hidden="true"></i> </button> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-lg"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Help"> <i class="pf-icon pf-icon-help" aria-hidden="true"></i> </button> </div> </div> <div class="pf-c-page__header-tools-group"> <div class="pf-c-page__header-tools-item pf-m-hidden-on-lg"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="primary-detail-collapsed-example-dropdown-kebab-right-aligned-1-button" aria-expanded="false" aria-label="Actions"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu pf-m-align-right" aria-labelledby="primary-detail-collapsed-example-dropdown-kebab-right-aligned-1-button" hidden> <li> <a class="pf-c-dropdown__menu-item" href="#">Link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button">Action</button> </li> <li> <a class="pf-c-dropdown__menu-item pf-m-disabled" href="#" aria-disabled="true" tabindex="-1">Disabled link</a> </li> <li> <button class="pf-c-dropdown__menu-item" type="button" disabled>Disabled action</button> </li> <li class="pf-c-divider" role="separator"></li> <li> <a class="pf-c-dropdown__menu-item" href="#">Separated link</a> </li> </ul> </div> </div> <div class="pf-c-page__header-tools-item pf-m-hidden pf-m-visible-on-md"> <div class="pf-c-dropdown"> <button class="pf-c-dropdown__toggle pf-m-plain" type="button" id="primary-detail-collapsed-example-dropdown-button" aria-expanded="false"> <span class="pf-c-dropdown__toggle-text">John Smith</span> <span class="pf-c-dropdown__toggle-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <div class="pf-c-dropdown__menu" hidden>[Panel contents here]</div> </div> </div> </div> <img class="pf-c-avatar" src="/assets/images/img_avatar.svg" alt="Avatar image" /> </div> </header> <div class="pf-c-page__sidebar"> <div class="pf-c-page__sidebar-body"> <nav class="pf-c-nav" id="primary-detail-collapsed-example-primary-nav" aria-label="Global"> <ul class="pf-c-nav__list"> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link pf-m-current" aria-current="page">System panel</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Policy</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Authentication</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Network services</a> </li> <li class="pf-c-nav__item"> <a href="#" class="pf-c-nav__link">Server</a> </li> </ul> </nav> </div> </div> <main class="pf-c-page__main" tabindex="-1"> <section class="pf-c-page__main-breadcrumb pf-m-limit-width"> <div class="pf-c-page__main-body"> <nav class="pf-c-breadcrumb" aria-label="breadcrumb"> <ol class="pf-c-breadcrumb__list"> <li class="pf-c-breadcrumb__item"> <a href="#" class="pf-c-breadcrumb__link">Section home</a> </li> <li class="pf-c-breadcrumb__item"> <span class="pf-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-c-breadcrumb__link">Section title</a> </li> <li class="pf-c-breadcrumb__item"> <span class="pf-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-c-breadcrumb__link">Section title</a> </li> <li class="pf-c-breadcrumb__item"> <span class="pf-c-breadcrumb__item-divider"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> <a href="#" class="pf-c-breadcrumb__link pf-m-current" aria-current="page">Section landing</a> </li> </ol> </nav> </div> </section> <section class="pf-c-page__main-section pf-m-light"> <div class="pf-c-content"> <h1>Primary-detail collapsed</h1> <p>Body text should be Red Hat Text Regular at 16px. It should have leading of 24px because of its relative line height of 1.5</p> </div> </section> <div class="pf-c-divider" role="separator"></div> <section class="pf-c-page__main-section pf-m-no-padding">  <div class="pf-c-drawer pf-m-inline-on-2xl"> <div class="pf-c-drawer__main">  <div class="pf-c-drawer__content"> <div class="pf-c-drawer__body"> <div class="pf-c-toolbar" id="primary-detail-collapsed-example-toolbar"> <div class="pf-c-toolbar__content"> <div class="pf-c-toolbar__content-section"> <div class="pf-c-toolbar__group pf-m-toggle-group pf-m-show"> <div class="pf-c-toolbar__toggle"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Show filters" aria-expanded="false" aria-controls="primary-detail-collapsed-example-toolbar-expandable-content"> <i class="fas fa-filter" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item"> <div class="pf-c-select" style='width: 150px'> <span id="primary-detail-collapsed-example-toolbar-select-status-label" hidden>Choose one</span> <button class="pf-c-select__toggle" type="button" id="primary-detail-collapsed-example-toolbar-select-status-toggle" aria-haspopup="true" aria-expanded="false" aria-labelledby="primary-detail-collapsed-example-toolbar-select-status-label primary-detail-collapsed-example-toolbar-select-status-toggle"> <div class="pf-c-select__toggle-wrapper"> <span class="pf-c-select__toggle-icon"> <i class="fas fa-filter" aria-hidden="true"></i> </span> <span class="pf-c-select__toggle-text">Status</span> </div> <span class="pf-c-select__toggle-arrow"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> <ul class="pf-c-select__menu" aria-labelledby="primary-detail-collapsed-example-toolbar-select-status-label" hidden style='width: 150px'> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Running</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Stopped</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Down</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Degraded</button> </li> <li> <button type="button" class="pf-c-select__menu-item" aria-selected="false">Needs Maintenance</button> </li> </ul> </div> </div> </div> <div class="pf-c-toolbar__item"> <button class="pf-c-button pf-m-plain" type="button" aria-label="Sort"> <i class="fas fa-sort-amount-down" aria-hidden="true"></i> </button> </div> <div class="pf-c-toolbar__item pf-m-overflow-menu "> <div class="pf-c-overflow-menu" id="primary-detail-collapsed-example-toolbar-overflow-menu"> <div class="pf-c-overflow-menu__content"> <div class="pf-c-overflow-menu__group pf-m-button-group"> <div class="pf-c-overflow-menu__item"> <button class="pf-c-button pf-m-primary" type="button">Primary</button> </div> <div class="pf-c-overflow-menu__item"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> </div> </div> </div> <div class="pf-c-overflow-menu__control"> <div class="pf-c-dropdown"> <button class="pf-c-button pf-c-dropdown__toggle pf-m-plain" type="button" id="primary-detail-collapsed-example-toolbar-overflow-menu-dropdown-toggle" aria-label="Overflow menu"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </button> <ul class="pf-c-dropdown__menu" aria-labelledby="primary-detail-collapsed-example-toolbar-overflow-menu-dropdown-toggle" hidden> <li> <button class="pf-c-dropdown__menu-item">Tertiary</button> </li> </ul> </div> </div> </div> </div> <div class="pf-c-toolbar__item pf-m-pagination "> <div class="pf-c-pagination"> <div class="pf-c-pagination__total-items"> <b>1 - 10</b>of <b>37</b> </div> <div class="pf-c-options-menu"> <div class="pf-c-options-menu__toggle pf-m-text pf-m-plain"> <span class="pf-c-options-menu__toggle-text"> <b>1 - 10</b> of  <b>37</b> </span> <button class="pf-c-options-menu__toggle-button" id="primary-detail-collapsed-example-toolbar-pagination-options-menu-toggle" aria-haspopup="listbox" aria-expanded="false" aria-label="Items per page"> <span class="pf-c-options-menu__toggle-button-icon"> <i class="fas fa-caret-down" aria-hidden="true"></i> </span> </button> </div> <ul class="pf-c-options-menu__menu" aria-labelledby="primary-detail-collapsed-example-toolbar-pagination-options-menu-toggle" hidden> <li> <button class="pf-c-options-menu__menu-item" type="button">5 per page</button> </li> <li> <button class="pf-c-options-menu__menu-item" type="button">10 per page <div class="pf-c-options-menu__menu-item-icon"> <i class="fas fa-check" aria-hidden="true"></i> </div> </button> </li> <li> <button class="pf-c-options-menu__menu-item" type="button">20 per page</button> </li> </ul> </div> <nav class="pf-c-pagination__nav" aria-label="Pagination" aria-label="Pagination top"> <button class="pf-c-button pf-m-plain" type="button" disabled aria-label="Go to previous page"> <i class="fas fa-angle-left" aria-hidden="true"></i> </button> <button class="pf-c-button pf-m-plain" type="button" aria-label="Go to next page"> <i class="fas fa-angle-right" aria-hidden="true"></i> </button> </nav> </div> </div> </div> <div class="pf-c-toolbar__expandable-content pf-m-hidden" id="primary-detail-collapsed-example-toolbar-expandable-content" hidden></div> </div> </div> <ul class="pf-c-data-list" role="list" aria-label="Simple data list example" id="primary-detail-collapsed-example-data-list"> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-collapsed-example-data-list-item1"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <div class="pf-l-flex pf-m-column"> <div class="pf-l-flex__item"> <p id='primary-detail-collapsed-example-data-list-item1'>patternfly</p> <small>Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a> </small> </div> <div class="pf-l-flex"> <div class="pf-l-flex__item"> <i class="fas fa-code-branch" aria-hidden="true"></i> 10 </div> <div class="pf-l-flex__item"> <i class="fas fa-code" aria-hidden="true"></i> 4 </div> <div class="pf-l-flex__item"> <i class="fas fa-cube" aria-hidden="true"></i> 5 </div> <div class="pf-l-flex__item">Updated 2 days ago</div> </div> </div> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item" aria-labelledby="primary-detail-collapsed-example-data-list-item2"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <div> <div> <p id='primary-detail-collapsed-example-data-list-item2'>patternfly-elements</p> <small>PatternFly elements</small> </div> <div class="pf-l-flex pf-m-wrap"> <div> <i class="fas fa-code-branch" aria-hidden="true"></i> 5 </div> <div> <i class="fas fa-code" aria-hidden="true"></i> 9 </div> <div> <i class="fas fa-cube" aria-hidden="true"></i> 2 </div> <div> <i class="fas fa-check-circle" aria-hidden="true"></i> 11 </div> <div> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> 4 </div> <div> <i class="fas fa-times-circle" aria-hidden="true"></i> 1 </div> <div>Updated 2 days ago</div> </div> </div> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-collapsed-example-data-list-item3"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <p id='primary-detail-collapsed-example-data-list-item3'>patternfly-unified-design-kit</p> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-collapsed-example-data-list-item4"> <div class="pf-c-data-list__item-row"> <div class="pf-c-data-list__item-content"> <div class="pf-c-data-list__cell pf-m-align-left"> <div> <div> <p id='primary-detail-collapsed-example-data-list-item4'>patternfly</p> <small>Working repo for PatternFly 4 <a>https://pf4.patternfly.org/</a> </small> </div> <div class="pf-l-flex pf-m-wrap"> <div> <i class="fas fa-code-branch" aria-hidden="true"></i> 10 </div> <div> <i class="fas fa-code" aria-hidden="true"></i> 4 </div> <div> <i class="fas fa-cube" aria-hidden="true"></i> 5 </div> <div>Updated 2 days ago</div> </div> </div> </div> <div class="pf-c-data-list__cell pf-m-align-right pf-m-no-fill"> <button class="pf-c-button pf-m-secondary" type="button">Secondary</button> <button class="pf-c-button pf-m-link" type="button">Link button</button> </div> </div> </div> </li> <li class="pf-c-data-list__item pf-m-selectable" aria-labelledby="primary-detail-collapsed-example-data-list-item5">