PF Next

About Modal Demo

About Modal Example

Preview

This Preview can only be accessed in full page mode.
<div class="pf-c-backdrop">
  <div class="pf-l-bullseye">
    <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">
        <button class="pf-c-button pf-m-plain" aria-label="Close Dialog">
          <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">
          Red Hat OpenShift Container Platform
        </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">
        <div class="pf-c-content">
          <dl>
            <dt>CFME Version</dt>
            <dd>5.5.3.4.20102789036450</dd>
            <dt>Cloudforms Version</dt>
            <dd>4.1</dd>
            <dt>Server Name</dt>
            <dd>40DemoMaster</dd>
            <dt>User Name</dt>
            <dd>Administrator</dd>
            <dt>User Role</dt>
            <dd>EvmRole-super_administrator</dd>
            <dt>Browser Version</dt>
            <dd>601.2</dd>
            <dt>Browser OS</dt>
            <dd>Mac</dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</div>

Documentation

This demo implements the about modal, including the backdrop.