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.