Info Boxes

Requires JavaScript

Info Box

Click the button to toggle the info box. You can also manually toggle this by adding the active class to info-box__content.

Demo

Markup

 <div class="info-box">
   <!-- Info Box Trigger -->
   <button class="button toggle-hidden">
     Open Info Box
   </button>
   <!-- Info Box Content -->
   <div class="info-box__content">
     <button class="button info-box__close">
       Close 
       <i class="pi-times"></i>
     </button>
     <!-- Info Box content goes here! -->
   </div>
 </div>

Modifiers

Modifier † Behavior
info-box--left The info box opens from the left.

The base class is always required.

You may need to specify a width or add the class flex-inline to info-box to ensure the box opens correctly based on your content. flex-inline was added to the example above.