Styleguide

Popup

We use Magnific Popup for popups. By writing HAML as illustrated below, you can create a popup, leveraging our MagnificPopup JavaScript component and without writing any JavaScript yourself.

Note: You'll probably want to apply a background color to your popup content.

List of cool things

  • Bicycles
  • Laughing
  • Dogs
Click to open popup
%div{"data-ui-component" => "magnific-popup"}
  .mfp-hide{"data-ui-component" => "magnific-src"}
    .xs-text-center
      .xs-text-left.box.box--white-light.xs-inline-block.xs-p2{"data-ui-component" => "magnific-close-button-container"}
        %h2 List of cool things
        %ul
          %li Bicycles
          %li Laughing
          %li Dogs
  %a.js-link.text-bold{"data-ui-component" => "magnific-popup-button"} Click to open popup
<div data-ui-component='magnific-popup'>
  <div class='mfp-hide' data-ui-component='magnific-src'>
    <div class='xs-text-center'>
      <div class='xs-text-left box box--white-light xs-inline-block xs-p2' data-ui-component='magnific-close-button-container'>
        <h2>List of cool things</h2>
        <ul>
          <li>Bicycles</li>
          <li>Laughing</li>
          <li>Dogs</li>
        </ul>
      </div>
    </div>
  </div>
  <a class='js-link text-bold' data-ui-component='magnific-popup-button'>Click to open popup</a>
</div>