Pattern Library

Popovers

Popovers should be used in situations outside forms to show contextual content. They can be more versatile than selects and contain links, actions, or further information.

Basic Popovers

A simple popover with links. Can be used for extra items in tabs or navbars, or with buttons that reveal additional actions.

<div class="popover">
  <div class="popover__container">
    <a href="#" class="button button--primary popover__button">Click me</a>
    <ul class="popover__menu">
      <li class="popover__listItem"><a class="popover__link" href="#">Sketch palette</a></li>
      <li class="popover__listItem"><a class="popover__link" href="#">Illustrator .ase</a></li>
      <li class="popover__listItem"><a class="popover__link" href="#">Photoshop .aco</a></li>
    </ul>
  </div>
</div>