PF Next

About Modal Box

About Modal Box

Preview

<div class="pf-c-about-modal-box" role="dialog" aria-modal="true" aria-labelledby="about-modal-title">
  <div class="pf-c-about-modal-box__brand">
    <img class="pf-c-about-modal-box__brand-image" src="/assets/images/pf_mini_logo_white.svg" alt="Patternfly brand logo">
  </div>
  <div class="pf-c-about-modal-box__close" aria-label="Close Dialog">
    <button class="pf-c-button pf-m-plain">
      <i class="fas fa-times" aria-hidden="true"></i>
    </button>
  </div>
  <div class="pf-c-about-modal-box__header">
    <div class="pf-c-about-modal-box__header-strapline">
      <h2 class="pf-c-title pf-m-md">
        Trademark and copyright information here
      </h2>
    </div>
    <h1 class="pf-c-title pf-m-4xl" id="about-modal-title">
      Product Name
    </h1>
  </div>
  <div class="pf-c-about-modal-box__hero">
    <img class="pf-c-about-modal-box__hero-image" src="/assets/images/pfbg_992.jpg" alt="Patternfly Background Image">
  </div>
  <div class="pf-c-about-modal-box__logo">
    <img class="pf-c-about-modal-box__logo-image" src="/assets/images/pf_logo.svg" alt="Product Logo">
  </div>
  <div class="pf-c-about-modal-box__content">
    content
  </div>
</div>

Documentation

Overview

About modal layout.

Accessibility

Attribute Applies to Outcome
role="dialog" .pf-c-about-modal-box Identifies the element that serves as the modal container. Required
aria-labelledby="[id value of element describing modal]" .pf-c-about-modal-box Gives the modal an accessible name by referring to the element that provides the dialog title. Required when adequate titling element is present
aria-label="[title of modal]" .pf-c-about-modal-box Gives the modal an accessible name. Required when adequate titling element is not present
aria-describedby="[id value of applicable content]" .pf-c-about-modal-box Gives the modal an accessible description by referring to the modal content that describes the primary message or purpose of the dialog. Not used if there is no static text that describes the modal.
aria-modal="true" .pf-c-modal-box Tells assistive technologies that the windows underneath the current modal are not available for interaction. Required
aria-label="Close Dialog" .pf-c-modal-box__close .pf-c-button Provides an accessible name for the close button as it uses an icon instead of text. Required

Usage

Class Applied To Outcome
.pf-c-about-modal-box <div>, <article> Initiates a modal box.
.pf-c-about-modal-box__brand <div> Initiates a modal box brand cell.
.pf-c-about-modal-box__brand-image <img> Initiates a modal box brand image.
.pf-c-about-modal-box__close <div> Initiates a modal box close cell.
.pf-c-about-modal-box__header <div>, <header> Initiates a modal box header cell.
.pf-c-about-modal-box__hero <div> Initiates a modal box hero cell.
.pf-c-about-modal-box__hero-image <img> Initiates a modal box hero image.
.pf-c-about-modal-box__logo <div> Initiates a modal box logo cell.
.pf-c-about-modal-box__logo-image <img> Initiates a modal box logo image.
.pf-c-about-modal-box__content <div> Initiates a modal box content cell.
.pf-m-hover .pf-c-about-modal-box__close .pf-c-button.pf-m-action Forces display of the hover state of the button. This state is primarily for demonstration purposes and would not normally be used in lieu of the :hover pseudo-class.