About Modal

The About Modal stores the version number(s) of the application as well as any appropriate legal text.

Jump to Multi-Line or One-Line

Multiple Line

Multiple Line

One Line

One Line

What’s not covered in the current design but will be covered in future sprints:

  • How the About Version Modal is accessed.
  • Content other than the title, version number(s) and legal text.
  • Minimum and maximum modal sizes.

About Modal

About modal with callouts

  1. Modal: The About Modal leverages the existing modal in PatternFly. Upon opening the modal, the background behind it should “dim” in order to provide a focused view, reducing confusion. The modal should use the default position, top and centered on the screen.

  2. Close Button: Clicking the close button (pficon-close) will dismiss the modal and return the background to it’s original state.

  3. Content: Title of product, label and version, and legal text are present. Adequate spacing and font weight consideration should be provided for legibility. Two columns are available for versions that contain both a release name and version number or in the event more space is needed.

  4. Corner Graphic: Corner graphic allows the opportunity for branding.

Multi-Line

Reference Markup

      <button class="btn btn-default" data-toggle="modal" data-target="#about-modal">Launch about modal</button>
      <div class="modal fade" id="about-modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
          <div class="modal-content about-modal-pf">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                <span class="pficon pficon-close"></span>
              </button>
            </div>
            <div class="modal-body">
              <h1>Product Title</h1>
              <div class="product-versions-pf">
                <ul class="list-unstyled">
                  <li><strong>Label</strong> Version</li>
                  <li><strong>Label</strong> Version</li>
                  <li><strong>Label</strong> Version</li>
                  <li><strong>Label</strong> Version</li>
                  <li><strong>Label</strong> Version</li>
                  <li><strong>Label</strong> Version</li>
                </ul>
              </div>
              <div class="trademark-pf">
                Trademark and Copyright Information
              </div>
            </div>
            <div class="modal-footer">
              <img src="/patternfly-org/assets/img/logo-alt.svg" alt="Patternfly Symbol">
            </div>
          </div>
        </div>
      </div>