Popup

Default

Standard popup appears above the triggering element, centered, and with an arrow pointer.

Classes:

.Popup - Wrapper for both the popup toggle and the popup content
.Popup-toggle - Triggering element
.Popup-container - Positioning element for the popup content and arrow
.Popup-content - Popup box with content

<div class="Popup">
  <button class="Button Popup-toggle" data-control="popup" data-open="demo1">
    Default Popup
  </button>
  <div class="Popup-container js-popupContainer" data-popup="demo1">
    <div class="Popup-content u-padMd">
      <h3 class="u-spaceBottomSm u-textCenter">Confirm This Action</h3>
      <p>Are you sure you want to do this thing?</p>
      <div class="u-textCenter u-spaceTopMd">
        <button class="Button Button--negative" data-dismiss>Cancel</button>
        <button class="Button Button--primary">Confirm</button>
      </div>
    </div>
  </div>
</div>

Overlay

Popup-container--overlay makes the popup appear centered directly on top of the triggering element, obscuring the trigger, and has no arrow.

Classes:

.Popup-container--overlay as a modifier to Popup-container

<div class="Popup">
  <button class="Button Popup-toggle" data-control="popup" data-open="demo2">
    Overlay
  </button>
  <div class="Popup-container Popup-container--overlay" data-popup="demo2">
    <div class="Popup-content u-padMd">
      <h3 class="u-spaceBottomSm u-textCenter">Confirm This Action</h3>
      <p>Are you sure you want to do this thing?</p>
      <div class="u-textCenter u-spaceTopMd">
        <button class="Button Button--negative" data-dismiss>Cancel</button>
        <button class="Button Button--primary">Confirm</button>
      </div>
    </div>
  </div>
</div>

Down

Popup-container--down makes the popup appear below the triggering element. By default it is centered.

Classes:

.Popup-container--down as a modifier to Popup-container

<div class="Popup">
  <button class="Button" data-control="popup" data-open="demo3">
    Down
  </button>
  <div class="Popup-container Popup-container--down" data-popup="demo3" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

Right

Popup-container--right right-aligns the popup with the triggering element. Can be used in conjunction with Popup--down to make the popup appear below and right-aligned.

Classes:

.Popup-container--right as a modifier to Popup-container

<div class="Popup">
  <button class="Button" data-control="popup" data-open="demo4">
    Up Right
  </button>
  <div class="Popup-container Popup-container--right" data-popup="demo4" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="Popup">
  <button class="Button Button--square" data-control="popup" data-open="demo4a">
    Down Right
  </button>
  <div class="Popup-container Popup-container--down Popup-container--right" data-popup="demo4a" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

Right Hang

Popup-container--rightHang "hangs" the popup off the right edge of the triggering element. This one is particularly useful for small buttons or square icon buttons.

Classes:

.Popup-container--rightHang as a modifier to Popup-container

<div class="Popup">
  <button class="Button Button--primary Popup-toggle u-padSidesSm" data-control="popup" data-open="demo5">
    <svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M860 407c5.3 48.7 5.3 97.7 0 147-.7 10.7-5 19.7-13 27s-17.7 11-29 11H576v242c0 10.7-3.7 20-11 28s-16.3 12.7-27 14c-49.3 5.3-98.7 5.3-148 0-10.7-1.3-19.7-6-27-14s-11-17.3-11-28V592H111c-11.3 0-21-3.5-29-10.5S69.3 565.3 68 554c-5.3-49.3-5.3-98.3 0-147 1.3-11.3 6-20.7 14-28s17.7-11 29-11h241V127c0-11.3 3.7-21 11-29s16.3-12.7 27-14c49.3-5.3 98.7-5.3 148 0 10.7 1.3 19.7 6 27 14s11 17.7 11 29v241h242c10.7 0 20 3.7 28 11s12.7 16.7 14 28z" />
    </svg>
  </button>
  <div class="Popup-container Popup-container--rightHang js-popupContainer" data-popup="demo5" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="Popup">
  <button class="Button Button--smallSquare Button--yes Popup-toggle" data-control="popup" data-open="demo5a">
    <svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
    </svg>
  </button>
  <div class="Popup-container Popup-container--rightHang" data-popup="demo5a" style="width: 200px">
    <div class="Popup-content u-padSm">
      <div class="ButtonGroup js-ButtonGroupDemo">
        <button class="Button u-padSidesXs  Button--yes u-size1of3">
          Going
        </button>
        <button class="Button u-padSidesXs   Button--maybe  u-size1of3">
          Maybe
        </button>
        <button class="Button u-padSidesXs   Button--no u-size1of3">
          No
        </button>
      </div>
    </div>
  </div>
</div>

Left

Popup-container--left left-aligns the popup with the triggering element. Can be used in conjunction with Popup--down to make the popup appear below and left-aligned.

Classes:

.Popup-container--left as a modifier to Popup-container

<div class="Popup">
  <button class="Button" data-control="popup" data-open="demo6">
    Up Left
  </button>
  <div class="Popup-container Popup-container--left" data-popup="demo6" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="Popup">
  <button class="Button Button--square" data-control="popup" data-open="demo6a">
    Down Left
  </button>
  <div class="Popup-container Popup-container--down Popup-container--left" data-popup="demo6a" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

Left Hang

Popup-container--leftHang "hangs" the popup off the left edge of the triggering element. This one is particularly useful for small buttons or square icon buttons.

Classes:

.Popup-container--leftHang as a modifier to Popup-container

<div class="Popup">
  <button class="Button Button--primary Popup-toggle u-padSidesSm" data-control="popup" data-open="demo7">
    <svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M860 407c5.3 48.7 5.3 97.7 0 147-.7 10.7-5 19.7-13 27s-17.7 11-29 11H576v242c0 10.7-3.7 20-11 28s-16.3 12.7-27 14c-49.3 5.3-98.7 5.3-148 0-10.7-1.3-19.7-6-27-14s-11-17.3-11-28V592H111c-11.3 0-21-3.5-29-10.5S69.3 565.3 68 554c-5.3-49.3-5.3-98.3 0-147 1.3-11.3 6-20.7 14-28s17.7-11 29-11h241V127c0-11.3 3.7-21 11-29s16.3-12.7 27-14c49.3-5.3 98.7-5.3 148 0 10.7 1.3 19.7 6 27 14s11 17.7 11 29v241h242c10.7 0 20 3.7 28 11s12.7 16.7 14 28z" />
    </svg>
  </button>
  <div class="Popup-container Popup-container--leftHang" data-popup="demo7" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="Popup">
  <button class="Button Button--smallSquare Button--yes Popup-toggle" data-control="popup" data-open="demo7a">
    <svg viewBox="0 0 960 960" role="presentation" class="Icon">
      <path d="M915 178.9c8 6.7 12.3 15.5 13 26.5s-2.3 21.2-9 30.5c-252.7 360.7-389.3 555.3-410 584-21.3 28.7-48.8 43.2-82.5 43.5S365 849.2 343 819.9l-278-391c-6.7-9.3-9.7-19.7-9-31s5-20.3 13-27c34-29.3 72-55.7 114-79 8.7-4.7 18.3-5.3 29-2s19.3 9.7 26 19l188 264 321-456c6.7-9.3 15.2-15.5 25.5-18.5s20.2-2.2 29.5 2.5c44 24 81.7 50 113 78z" />
    </svg>
  </button>
  <div class="Popup-container Popup-container--leftHang" data-popup="demo7a" style="width: 200px">
    <div class="Popup-content u-padSm">
      <div class="ButtonGroup js-ButtonGroupDemo">
        <button class="Button u-padSidesXs  Button--yes u-size1of3">
          Going
        </button>
        <button class="Button u-padSidesXs   Button--maybe  u-size1of3">
          Maybe
        </button>
        <button class="Button u-padSidesXs   Button--no u-size1of3">
          No
        </button>
      </div>
    </div>
  </div>
</div>

Hover

Popup--hover makes the content hoverable instead of relying on a click to open; click to keep open still works

Classes:

.Popup--hover as a modifier to Popup works with all popup types

<div class="Popup Popup--hover">
  <button class="Button">
    Up
  </button>
  <div class="Popup-container Popup-container--up" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="Popup Popup--hover">
  <button class="Button">
    Down
  </button>
  <div class="Popup-container Popup-container--down" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="Popup Popup--hover">
  <button class="Button">
    Left
  </button>
  <div class="Popup-container Popup-container--left" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

<div class="Popup Popup--hover">
  <button class="Button">
    Right
  </button>
  <div class="Popup-container Popup-container--right" style="width: 200px">
    <div class="Popup-content">
      <div class="u-textBold">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">Action 1</p>
        </a>
        <hr class="Divider u-spaceEndsNone">
        <a href="">
          <p class="u-padEndsSm u-padSidesMd">
            Action 2
          </p>
        </a>
      </div>
    </div>
  </div>
</div>

Web Style Guide

Getting Started

Design Elements

Utilities

Components

Help Docs

Default

Overlay

Down

Right

Right Hang

Left

Left Hang

Hover