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
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
-
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.
-
Close Button: Clicking the close button (pficon-close) will dismiss the modal and return the background to it’s original state.
-
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.
-
Corner Graphic: Corner graphic allows the opportunity for branding.
Multi-Line
<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>