Boxes

Documentation of boxes components.

Files

app/styles/modules/_boxes.scss

Box

Box with header and footer shown on example below. Box content can have class .box_content-gray to change background to gray.

Example:

Display name

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe rerum voluptate, id similique totam alias vel nisi autem delectus nesciunt, dolores quae iste repudiandae deleniti aspernatur est! Veniam, facere, deleniti.

Code:

<div class="box">
  <div class="box_header">
    <h3 class="text-upper">Display name</h3>
  </div>
  <div class="box_content">
    ..
  </div>
  <div class="box_content box_content-gray">
    ...
  </div>
  <div class="box_footer">
    ...
  </div>
</div>

Box togglable

Special kind of box is togglable box with clickable header to show/hide box content.

Example:

Profile picture

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure quae, adipisci. Nesciunt, reprehenderit dignissimos ipsam voluptas repudiandae ea. Vel hic placeat dignissimos odio cupiditate sunt molestias non perspiciatis, dicta nihil.

Code:

<div class="box box-togglable box-footerless">
  <div data-target="parent" data-toggle-icon="chevrondown" class="box_header js-toggle"> 
    <h3 class="text-upper">Display name</h3>
    <i class="icon icon-m js-icon">chevronup</i>
  </div>
  <div class="box_content box_content-gray">
    ...
  </div>
</div>