Pop-ups

A pop-up is a component that displays content in a view at the bottom right corner of the page. Users can minimize and close the popup.

Example

<button class="sba-c-button new-popup">New Note</button>
    <div class="sba-c-popup">
    <a href="#" id="sba-c-popup-toggle" class="sba-c-popup__toggle">
      <header class="sba-c-popup__header">
        <h4 class="sba-c-popup__heading">New SBA Note</h4>
        <button type="button" id="sba-c-popup-close" class="sba-c-popup__close"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/certify-design-system-documentation/assets/svg-sprite/sprite.svg#white-x"></use>Close</button>
      </header>
    </a>
    <div class="sba-l-container sba-c-popup__contents">
    [CONTENT]
    </div>
  </div>
  

Guidance

• The pop-up component has not yet been tested on mobile.
• The pop-up area is scrollable.
• Clicking the header will toggle the visibility of the content area in the popup, maintaining the state of the contents and scroll position.
• Clicking the close button will hide the entire pop-up view.