@patternfly/patternfly

--- id: Card section: components wrapperTag: div ---import './Card.css' ## Demos ### Horizontal grid collapsed ```html <div class="pf-v6-c-card" id="card-demo-horizontal-grid-collapsed-example"> <div class="pf-v6-c-card__header"> <div class="pf-v6-c-card__header-toggle"> <button class="pf-v6-c-button pf-m-plain" id="card-demo-horizontal-grid-collapsed-example-toggle" type="button" aria-labelledby="card-demo-horizontal-grid-collapsed-example-title card-demo-horizontal-grid-collapsed-example-toggle" aria-label="Details" > <span class="pf-v6-c-button__icon pf-m-start"> <span class="pf-v6-c-card__header-toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> </div> <div class="pf-v6-c-card__actions"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Menu toggle" id="card-demo-horizontal-grid-collapsed-example-dropdown-kebab-right-aligned" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v6-c-card__header-main"> <div class="pf-v6-l-split pf-m-gutter pf-m-wrap"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text" id="card-demo-horizontal-grid-collapsed-example-title" >Getting started</h2> </div> <div class="pf-v6-c-label-group"> <div class="pf-v6-c-label-group__main"> <ul class="pf-v6-c-label-group__list" role="list" aria-label="Group of labels" > <li class="pf-v6-c-label-group__list-item"> <span class="pf-v6-c-label pf-m-compact"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">Set up your cluster</span> </span> </span> </li> <li class="pf-v6-c-label-group__list-item"> <span class="pf-v6-c-label pf-m-compact pf-m-purple"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">Guided tours</span> </span> </span> </li> <li class="pf-v6-c-label-group__list-item"> <span class="pf-v6-c-label pf-m-compact pf-m-green"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">Quick starts</span> </span> </span> </li> <li class="pf-v6-c-label-group__list-item"> <button class="pf-v6-c-label pf-m-compact pf-m-overflow" type="button" > <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__text">1 more</span> </span> </button> </li> </ul> </div> </div> </div> </div> </div> </div> ``` ### Horizontal grid expanded ```html <div class="pf-v6-c-card pf-m-expanded" id="card-demo-horizontal-grid-expanded-example" > <div class="pf-v6-c-card__header"> <div class="pf-v6-c-card__header-toggle"> <button class="pf-v6-c-button pf-m-plain" id="card-demo-horizontal-grid-expanded-example-toggle" type="button" aria-labelledby="card-demo-horizontal-grid-expanded-example-title card-demo-horizontal-grid-expanded-example-toggle" aria-label="Details" > <span class="pf-v6-c-button__icon pf-m-start"> <span class="pf-v6-c-card__header-toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </span> </button> </div> <div class="pf-v6-c-card__actions"> <button class="pf-v6-c-menu-toggle pf-m-plain" type="button" aria-expanded="false" aria-label="Menu toggle" id="card-demo-horizontal-grid-expanded-example-dropdown-kebab-right-aligned" > <span class="pf-v6-c-menu-toggle__icon"> <i class="fas fa-ellipsis-v" aria-hidden="true"></i> </span> </button> </div> <div class="pf-v6-c-card__header-main"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text" id="card-demo-horizontal-grid-expanded-example-title" >Getting started</h2> </div> </div> </div> <div class="pf-v6-c-card__expandable-content"> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-grid pf-m-all-6-col-on-md pf-m-all-3-col-on-lg pf-m-gutter" > <div class="pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start" > <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow" > <span class="pf-v6-c-label pf-m-blue"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">Set up your cluster</span> </span> </span> <p>Continue setting up your cluster to access all you can in the Console</p> <ul class="pf-v6-c-list pf-m-plain" role="list"> <li> <a href="#">Add identity provider</a> </li> <li> <a href="#">Configure alert receivers</a> </li> <li> <a href="#">Configure default ingress certificate</a> </li> </ul> </div> <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#"> <span class="pf-v6-c-button__text">View all set up cluster steps</span> <span class="pf-v6-c-button__icon pf-m-end"> <i class="fas fa-arrow-right" aria-hidden="true"></i> </span> </a> </div> <div class="pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start" > <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow" > <span class="pf-v6-c-label pf-m-purple"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">Guided tours</span> </span> </span> <p>Tour some of the key features around the console</p> <ul class="pf-v6-c-list pf-m-plain" role="list"> <li> <a href="#">Tour the console</a> </li> <li> <a href="#">Explore the Developer perspective</a> </li> </ul> </div> <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#"> <span class="pf-v6-c-button__text">View all guided tours</span> <span class="pf-v6-c-button__icon pf-m-end"> <i class="fas fa-arrow-right" aria-hidden="true"></i> </span> </a> </div> <div class="pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start" > <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow" > <span class="pf-v6-c-label pf-m-green"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">Quick starts</span> </span> </span> <p>Get started with features using our step-by-step documentation</p> <ul class="pf-v6-c-list pf-m-plain" role="list"> <li> <a href="#">Getting started with Serverless</a> </li> <li> <a href="#">Explore virtualization</a> </li> <li> <a href="#">Build pipelines</a> </li> </ul> </div> <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#"> <span class="pf-v6-c-button__text">View all quick starts</span> <span class="pf-v6-c-button__icon pf-m-end"> <i class="fas fa-arrow-right" aria-hidden="true"></i> </span> </a> </div> <div class="pf-v6-l-flex pf-m-space-items-lg pf-m-column pf-m-align-items-flex-start" > <div class="pf-v6-l-flex pf-m-space-items-sm pf-m-column pf-m-align-items-flex-start pf-m-grow" > <span class="pf-v6-c-label pf-m-orange"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">Learning resources</span> </span> </span> <p>Learn about new features within the Console and get started with demo apps</p> <ul class="pf-v6-c-list pf-m-plain" role="list"> <li> <a href="#">See what's possible with the Explore page</a> </li> <li> <a href="#"> OpenShift 4.5: Top Tasks <i class="fas fa-external-link-alt" aria-hidden="true"></i> </a> </li> <li> <a href="#">Try a demo app</a> </li> </ul> </div> <a class="pf-v6-c-button pf-m-inline pf-m-link" href="#"> <span class="pf-v6-c-button__text">View all learning resources</span> <span class="pf-v6-c-button__icon pf-m-end"> <i class="fas fa-arrow-right" aria-hidden="true"></i> </span> </a> </div> </div> </div> </div> </div> ``` ### Horizontal split ```html <div class="pf-v6-c-card" id="card-demo-horizontal-split-example"> <div class="pf-v6-l-grid pf-m-all-6-col-on-md"> <div class="pf-v6-l-grid__item" style="min-height: 200px; background: no-repeat bottom right / auto 75% url(/assets/images/pf-background.svg) black;" ></div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text">Headline</h2> </div> <div class="pf-v6-c-card__body" >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse arcu purus, lobortis nec euismod eu, tristique ut sapien. Nullam turpis lectus, aliquet sit amet volutpat eu, semper eget quam. Maecenas in tempus diam. Aenean interdum velit sed massa aliquet, sit amet malesuada nulla hendrerit. Aenean non faucibus odio. Etiam non metus turpis. Praesent sollicitudin elit neque, id ullamcorper nibh faucibus eget.</div> <div class="pf-v6-c-card__footer"> <button class="pf-v6-c-button pf-m-tertiary" type="button"> <span class="pf-v6-c-button__text">Call to action</span> </button> </div> </div> </div> </div> ``` ### Details card ```html <div class="pf-v6-l-gallery pf-m-gutter" style="--pf-v6-l-gallery--GridTemplateColumns--min: 260px;" > <div class="pf-v6-c-card"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-title pf-m-xl">Details</h2> </div> <div class="pf-v6-c-card__body"> <dl class="pf-v6-c-description-list" aria-label="API 1"> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Cluster API Address</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text"> <a href="#">https://api1.devcluster.openshift.com</a> </div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Cluster ID</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text" >63b97ac1-b850-41d9-8820-239becde9e86</div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Provider</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text">AWS</div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">OpenShift Version</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text" >4.5.0.ci-2020-06-16-015028</div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Update Channel</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text">stable-4.5</div> </dd> </div> </dl> </div> <hr class="pf-v6-c-divider" /> <div class="pf-v6-c-card__footer"> <a href="#">View Settings</a> </div> </div> <div class="pf-v6-c-card"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-title pf-m-xl">Details</h2> </div> <div class="pf-v6-c-card__body"> <dl class="pf-v6-c-description-list" aria-label="API 2"> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Cluster API Address</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text"> <a href="#">https://api2.devcluster.openshift.com</a> </div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Cluster ID</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text" >08908908-b850-41d9-8820-239becde9e86</div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Provider</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text">Azure</div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">OpenShift Version</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text" >4.5.0.ci-2020-06-16-015026</div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term">Update Channel</dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text">stable-4.4</div> </dd> </div> </dl> </div> <hr class="pf-v6-c-divider" /> <div class="pf-v6-c-card__footer"> <a href="#">View Settings</a> </div> </div> </div> ``` ### Aggregate status card ```html <div class="pf-v6-l-grid pf-m-gutter"> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-gallery pf-m-gutter"> <div class="pf-v6-c-card pf-v6-u-text-align-center"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text">5 Clusters</h2> </div> <div class="pf-v6-c-card__body"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-success"> <i class="fas fa-check-circle" aria-hidden="true"></i> </span> </span> </div> </div> <div class="pf-v6-c-card pf-v6-u-text-align-center"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text">15 Clusters</h2> </div> <div class="pf-v6-c-card__body"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-warning"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> </span> </div> </div> <div class="pf-v6-c-card pf-v6-u-text-align-center"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text">3 Clusters</h2> </div> <div class="pf-v6-c-card__body"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-danger"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> </span> </div> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-gallery pf-m-gutter"> <div class="pf-v6-c-card pf-v6-u-text-align-center"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text">10 Hosts</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-success"> <i class="fas fa-check-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <a href="#">2</a> </div> </div> <hr class="pf-v6-c-divider pf-m-vertical" /> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-warning"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <a href="#">1</a> </div> </div> </div> </div> </div> <div class="pf-v6-c-card pf-v6-u-text-align-center"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text">50 Hosts</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-success"> <i class="fas fa-check-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <a href="#">5</a> </div> </div> <hr class="pf-v6-c-divider pf-m-vertical" /> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-danger"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <a href="#">12</a> </div> </div> </div> </div> </div> <div class="pf-v6-c-card pf-v6-u-text-align-center"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text">12 Hosts</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-flex pf-m-inline-flex pf-m-space-items-md"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-warning"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <a href="#">2</a> </div> </div> <hr class="pf-v6-c-divider pf-m-vertical" /> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-danger"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <a href="#">7</a> </div> </div> </div> </div> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-gallery pf-m-gutter" style="--pf-v6-l-gallery--GridTemplateColumns--min: 260px;" > <div class="pf-v6-c-card"> <div class="pf-v6-c-card__title"> <h2 class="pf-v6-c-card__title-text pf-v6-u-text-align-center" >13 Hosts</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-flex pf-m-justify-content-center pf-m-space-items-md" > <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-danger"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-stack"> <a href="#">2 errors</a> <span>subtitle</span> </div> </div> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-warning"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-stack"> <a href="#">1 warnings</a> <span>subtitle</span> </div> </div> </div> </div> </div> <div class="pf-v6-c-card"> <div class="pf-v6-c-card__title pf-v6-u-text-align-center"> <h2 class="pf-v6-c-card__title-text">3 Hosts</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-flex pf-m-justify-content-center pf-m-space-items-md" > <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-success"> <i class="fas fa-check-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-stack"> <a href="#">2 successes</a> <span>subtitle</span> </div> </div> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-warning"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-stack"> <a href="#">3 warnings</a> <span>subtitle</span> </div> </div> </div> </div> </div> <div class="pf-v6-c-card"> <div class="pf-v6-c-card__title pf-v6-u-text-align-center"> <h2 class="pf-v6-c-card__title-text">50 Hosts</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-flex pf-m-justify-content-center pf-m-space-items-md" > <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-warning"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-stack"> <a href="#">7 warnings</a> <span>subtitle</span> </div> </div> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-danger"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-stack"> <a href="#">1 error</a> <span>subtitle</span> </div> </div> </div> </div> </div> </div> </div> </div> ``` ### Status, tabbed card ```html <div class="pf-v6-c-card"> <div class="pf-v6-c-card__header"> <div class="pf-v6-c-card__header-main"> <h2 class="pf-v6-c-title pf-m-lg">Status</h2> </div> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-c-tabs pf-m-fill" role="region" id="status-tabs"> <ul class="pf-v6-c-tabs__list" role="tablist"> <li class="pf-v6-c-tabs__item pf-m-current" role="presentation"> <button type="button" class="pf-v6-c-tabs__link" role="tab" id="status-tabs-object-1-link" > <span class="pf-v6-c-tabs__item-text">Object 1</span> </button> </li> <li class="pf-v6-c-tabs__item" role="presentation"> <button type="button" class="pf-v6-c-tabs__link" role="tab" id="status-tabs-object-2-link" > <span class="pf-v6-c-tabs__item-text">Object 2</span> </button> </li> <li class="pf-v6-c-tabs__item" role="presentation"> <button type="button" class="pf-v6-c-tabs__link" role="tab" id="status-tabs-object-3-link" > <span class="pf-v6-c-tabs__item-text">Object 3</span> </button> </li> </ul> </div> </div> <div class="pf-v6-c-card__body"> <section class="pf-v6-c-tab-content" id="-tab1-panel" role="tabpanel" tabindex="0" > <div class="pf-v6-c-tab-content__body"> <dl class="pf-v6-c-description-list pf-m-horizontal pf-m-2-col-on-lg" aria-label="Status" > <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term"> <span class="pf-v6-c-description-list__text"> <div class="pf-v6-l-grid"> <div class="pf-v6-l-grid__item pf-m-3-col"> <svg class="pf-v6-c-spinner pf-m-inline" role="progressbar" viewBox="0 0 100 100" aria-label="Loading" > <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" /> </svg> </div> <div class="pf-v6-l-grid__item pf-m-9-col"> <h3 class="pf-v6-c-title pf-m-md">Running</h3> </div> </div> </span> </dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text"> <div class="pf-v6-c-description-list__text"> <a href="#">Resource name that is long and can wrap</a> </div> <div class="pf-v6-c-description-list__text">121 systems</div> </div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term"> <span class="pf-v6-c-description-list__text"> <div class="pf-v6-l-flex"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-success"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <h3 class="pf-v6-c-title pf-m-md">Ready</h3> </div> </div> </span> </dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text"> <div class="pf-v6-c-description-list__text"> <a href="#">Resource name</a> </div> <div class="pf-v6-c-description-list__text">121 systems</div> </div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term"> <span class="pf-v6-c-description-list__text"> <div class="pf-v6-l-grid"> <div class="pf-v6-l-grid__item pf-m-3-col"> <svg class="pf-v6-c-spinner pf-m-inline" role="progressbar" viewBox="0 0 100 100" aria-label="Loading" > <circle class="pf-v6-c-spinner__path" cx="50" cy="50" r="45" fill="none" /> </svg> </div> <div class="pf-v6-l-grid__item pf-m-9-col"> <h3 class="pf-v6-c-title pf-m-md">Running</h3> </div> </div> </span> </dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text"> <div class="pf-v6-c-description-list__text"> <a href="#">Resource name that is long and can wrap</a> </div> <div class="pf-v6-c-description-list__text">121 systems</div> </div> </dd> </div> <div class="pf-v6-c-description-list__group"> <dt class="pf-v6-c-description-list__term"> <span class="pf-v6-c-description-list__text"> <div class="pf-v6-l-flex"> <div class="pf-v6-l-flex__item"> <span class="pf-v6-c-icon pf-m-inline"> <span class="pf-v6-c-icon__content pf-m-success"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> </span> </div> <div class="pf-v6-l-flex__item"> <h3 class="pf-v6-c-title pf-m-md">Ready</h3> </div> </div> </span> </dt> <dd class="pf-v6-c-description-list__description"> <div class="pf-v6-c-description-list__text"> <div class="pf-v6-c-description-list__text"> <a href="#">Resource name that is long and can wrap</a> </div> <div class="pf-v6-c-description-list__text">121 systems</div> </div> </dd> </div> </dl> </div> </section> <section class="pf-v6-c-tab-content" id="-tab2-panel" role="tabpanel" tabindex="0" hidden > <div class="pf-v6-c-tab-content__body">Panel 2</div> </section> <section class="pf-v6-c-tab-content" id="-tab3-panel" role="tabpanel" tabindex="0" hidden > <div class="pf-v6-c-tab-content__body">Panel 3</div> </section> </div> </div> ``` ### Status card ```html <div class="pf-v6-c-card" id="status-card-default-example"> <div class="pf-v6-c-card__header"> <h2 class="pf-v6-c-title pf-m-lg">Status</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-3-col-on-lg pf-m-gutter" > <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-check-circle pf-v6-u-success-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex__item"> <span>Cluster</span> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-exclamation-circle pf-v6-u-danger-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex__item"> <span class="popover-parent"> <a href="#">Control Panel</a> </span> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-exclamation-circle pf-v6-u-danger-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v6-l-flex__item"> <a href="#">Operators</a> </div> <div class="pf-v6-l-flex__item"> <span class="pf-v6-u-color-400">1 degraged</span> </div> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-check-circle pf-v6-u-success-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v6-l-flex__item"> <a href="#">Image Vulnerabilities</a> </div> <div class="pf-v6-l-flex__item"> <span class="pf-v6-u-color-400">0 vulnerable images</span> </div> </div> </div> </div> </div> </div> <hr class="pf-v6-c-divider" /> <div class="pf-v6-c-notification-drawer"> <div class="pf-v6-c-notification-drawer__body"> <section class="pf-v6-c-notification-drawer__group"> <button class="pf-v6-c-notification-drawer__group-toggle" aria-expanded="false" > <div class="pf-v6-c-notification-drawer__group-toggle-title"> <div class="pf-v6-l-flex"> <div class="pf-v6-c-notification-drawer__group-toggle-title"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item pf-m-spacer-md"> <span>Notifications</span> </div> <span class="pf-v6-c-label pf-m-red"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true" ></i> </span> <span class="pf-v6-c-label__text">1</span> </span> </span> <span class="pf-v6-c-label pf-m-orange"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true" ></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> <span class="pf-v6-c-label pf-m-green"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> <span class="pf-v6-c-label pf-m-blue"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> <span class="pf-v6-c-label pf-m-teal"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-bell" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> </div> </div> </div> </div> <span class="pf-v6-c-notification-drawer__group-toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> <ul class="pf-v6-c-notification-drawer__list" role="list" hidden> <li class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger" tabindex="0" > <div class="pf-v6-c-notification-drawer__list-item-header"> <span class="pf-v6-c-notification-drawer__list-item-header-icon"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> <h2 class="pf-v6-c-notification-drawer__list-item-header-title"> <span class="pf-v6-screen-reader">Danger notification:</span> Critical alert regarding control plane </h2> </div> <div class="pf-v6-c-notification-drawer__list-item-description" >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div> </li> <li class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning" tabindex="0" > <div class="pf-v6-c-notification-drawer__list-item-header"> <span class="pf-v6-c-notification-drawer__list-item-header-icon"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> <h2 class="pf-v6-c-notification-drawer__list-item-header-title"> <span class="pf-v6-screen-reader">Warning notification:</span> Warning alert </h2> </div> <div class="pf-v6-c-notification-drawer__list-item-description" >This is a warning notification description.</div> </li> </ul> </section> </div> </div> </div> ``` ### Status card expanded notifications ```html <div class="pf-v6-c-card" id="status-card-expanded-example"> <div class="pf-v6-c-card__header"> <h2 class="pf-v6-c-title pf-m-lg">Status</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-3-col-on-lg pf-m-gutter" > <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-check-circle pf-v6-u-success-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex__item"> <span>Cluster</span> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-exclamation-circle pf-v6-u-danger-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex__item"> <span class="popover-parent"> <a href="#">Control Panel</a> </span> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-exclamation-circle pf-v6-u-danger-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v6-l-flex__item"> <a href="#">Operators</a> </div> <div class="pf-v6-l-flex__item"> <span class="pf-v6-u-color-400">1 degraged</span> </div> </div> </div> </div> <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-check-circle pf-v6-u-success-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex pf-m-column pf-m-space-items-none"> <div class="pf-v6-l-flex__item"> <a href="#">Image Vulnerabilities</a> </div> <div class="pf-v6-l-flex__item"> <span class="pf-v6-u-color-400">0 vulnerable images</span> </div> </div> </div> </div> </div> </div> <hr class="pf-v6-c-divider" /> <div class="pf-v6-c-notification-drawer"> <div class="pf-v6-c-notification-drawer__body"> <section class="pf-v6-c-notification-drawer__group pf-m-expanded"> <button class="pf-v6-c-notification-drawer__group-toggle" aria-expanded="true" > <div class="pf-v6-c-notification-drawer__group-toggle-title"> <div class="pf-v6-l-flex"> <div class="pf-v6-c-notification-drawer__group-toggle-title"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item pf-m-spacer-md"> <span>Notifications</span> </div> <span class="pf-v6-c-label pf-m-red"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-exclamation-circle" aria-hidden="true" ></i> </span> <span class="pf-v6-c-label__text">1</span> </span> </span> <span class="pf-v6-c-label pf-m-orange"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-exclamation-triangle" aria-hidden="true" ></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> <span class="pf-v6-c-label pf-m-green"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-check-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> <span class="pf-v6-c-label pf-m-blue"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-info-circle" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> <span class="pf-v6-c-label pf-m-teal"> <span class="pf-v6-c-label__content"> <span class="pf-v6-c-label__icon"> <i class="fas fa-fw fa-bell" aria-hidden="true"></i> </span> <span class="pf-v6-c-label__text">3</span> </span> </span> </div> </div> </div> </div> <span class="pf-v6-c-notification-drawer__group-toggle-icon"> <i class="fas fa-angle-right" aria-hidden="true"></i> </span> </button> <ul class="pf-v6-c-notification-drawer__list" role="list"> <li class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-danger" tabindex="0" > <div class="pf-v6-c-notification-drawer__list-item-header"> <span class="pf-v6-c-notification-drawer__list-item-header-icon"> <i class="fas fa-exclamation-circle" aria-hidden="true"></i> </span> <h2 class="pf-v6-c-notification-drawer__list-item-header-title"> <span class="pf-v6-screen-reader">Danger notification:</span> Critical alert regarding control plane </h2> </div> <div class="pf-v6-c-notification-drawer__list-item-description" >This is a long description to show how the title will wrap if it is long and wraps to multiple lines.</div> </li> <li class="pf-v6-c-notification-drawer__list-item pf-m-hoverable pf-m-warning" tabindex="0" > <div class="pf-v6-c-notification-drawer__list-item-header"> <span class="pf-v6-c-notification-drawer__list-item-header-icon"> <i class="fas fa-exclamation-triangle" aria-hidden="true"></i> </span> <h2 class="pf-v6-c-notification-drawer__list-item-header-title"> <span class="pf-v6-screen-reader">Warning notification:</span> Warning alert </h2> </div> <div class="pf-v6-c-notification-drawer__list-item-description" >This is a warning notification description.</div> </li> </ul> </section> </div> </div> </div> ``` ### Status card expanded with popover ```html <div class="pf-v6-c-card" id="status-card-expanded-with-popover-example"> <div class="pf-v6-c-card__header"> <h2 class="pf-v6-c-title pf-m-lg">Status</h2> </div> <div class="pf-v6-c-card__body"> <div class="pf-v6-l-grid pf-m-all-6-col-on-sm pf-m-all-3-col-on-lg pf-m-gutter" > <div class="pf-v6-l-grid__item"> <div class="pf-v6-l-flex pf-m-space-items-sm"> <div class="pf-v6-l-flex__item"> <i class="fas fa-check-circle pf-v6-u-success-color-100" aria-hidden="true" ></i> </div> <div class="pf-v6-l-flex__item"> <span>Cluster</span> </di