Styleguide

Lightbox

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

Non-image Thumbnail

Click this question mark to discover what an image is: 
%div{"data-ui-component" => "magnific-popup"}
  %div{"data-ui-component" => "magnific-popup-gallery"}
    Click this question mark to discover what an image is:
    %a.xs-inline-block{href: "/assets/integrations/greenhouse_instructions/create_key-f054d5473d4ff93c3cd9632c8721c8a0a871895337ed4d16a61a0edfb62173fb.png", title: "Now you know what an image is!"}
      %i.fa.fa-question-circle.text-gray.xs-delta.xs-ml0

<div data-ui-component='magnific-popup'>
  <div data-ui-component='magnific-popup-gallery'>
    Click this question mark to discover what an image is:
    <a class='xs-inline-block' href='/assets/integrations/greenhouse_instructions/create_key-f054d5473d4ff93c3cd9632c8721c8a0a871895337ed4d16a61a0edfb62173fb.png' title='Now you know what an image is!'>
      <i class='fa fa-question-circle text-gray xs-delta xs-ml0'></i>
    </a>
  </div>
</div>

Image Thumbnails

%div{"data-ui-component" => "magnific-popup"}
  %div{"data-ui-component" => "magnific-popup-gallery"}
    %a.xs-inline-block{href: "/assets/integrations/greenhouse_instructions/required_permission-85bcd2af716589945d8ba83ea465cde107e44b0e46764dd0176ee7ff14685d3a.png", title: "This is a caption on the lightbox image"}
      %img{alt: "Alt text appears in lieu of the thumbnail if it fails to load", src: "/assets/integrations/greenhouse_instructions/required_permission_thumb-981b5e47759203a2863644d6418c14463605ecfaa33ff527dad199786f4ebc7d.png"}/
    %a.xs-inline-block{href: "/assets/integrations/greenhouse_instructions/create_key-f054d5473d4ff93c3cd9632c8721c8a0a871895337ed4d16a61a0edfb62173fb.png", title: "Another caption"}
      %img{alt: "Make separate thumbnails and full-size images if you want optimal performance", src: "/assets/integrations/greenhouse_instructions/create_key_thumb-9f8c594a87ef4ebf932ceceaeca616e0788264f245215cc6bf9f18c21117b666.png"}/

<div data-ui-component='magnific-popup'>
  <div data-ui-component='magnific-popup-gallery'>
    <a class='xs-inline-block' href='/assets/integrations/greenhouse_instructions/required_permission-85bcd2af716589945d8ba83ea465cde107e44b0e46764dd0176ee7ff14685d3a.png' title='This is a caption on the lightbox image'>
      <img alt="Alt text appears in lieu of the thumbnail if it fails to load" src="/assets/integrations/greenhouse_instructions/required_permission_thumb-981b5e47759203a2863644d6418c14463605ecfaa33ff527dad199786f4ebc7d.png" />
    </a>
    <a class='xs-inline-block' href='/assets/integrations/greenhouse_instructions/create_key-f054d5473d4ff93c3cd9632c8721c8a0a871895337ed4d16a61a0edfb62173fb.png' title='Another caption'>
      <img alt="Make separate thumbnails and full-size images if you want optimal performance" src="/assets/integrations/greenhouse_instructions/create_key_thumb-9f8c594a87ef4ebf932ceceaeca616e0788264f245215cc6bf9f18c21117b666.png" />
    </a>
  </div>
</div>