Boxes

The atlas_assets gem ships with a few styles you can apply to div elements, to make them into grouped boxes, to use on e.g. a profile page to split up the content.

Default Box

This is just a normal box

1<div class="box">
2    <p>This is just a normal box</p>
3</div>

Box With Top

This is a box with a top Top Button

This is the content.

1<div class="box">
2    <div class="box-top">
3        This is a box with a top <i class="icn-round glyphicons leaf"></i> <a href="#" class="btn">Top Button</a>
4    </div>
5    <div class="box-inner">
6        <p>This is the content.</p>
7    </div>
8</div>

Box With Bottom

This is the content.

This is a box with a bottom Bottom Button
1<div class="box">
2    <div class="box-inner">
3        <p>This is the content.</p>
4    </div>
5    <div class="box-bottom">
6        This is a box with a bottom <i class="icn-round glyphicons leaf"></i> <a href="#" class="btn">Bottom Button</a>
7    </div>
8</div>

Box With All The Things

A Real World Example with a list instead of box-inner. Yo Dawg
  • Item 1
  • Item 2
  • Item 3
  • Item 4
This is the bottom!
 1<div class="box">
 2    <div class="box-top">
 3        A Real World Example with a list instead of box-inner. <span class="pull-right"><a href="#">Yo Dawg</a></span></span>
 4    </div>
 5    <ul class="list">
 6        <li class="list-item list-padding">Item 1</li>
 7        <li class="list-item list-padding">Item 2</li>
 8        <li class="list-item list-padding">Item 3</li>
 9        <li class="list-item list-padding">Item 4</li>
10    </ul>
11    <div class="box-bottom">
12        This is the bottom!
13    </div>
14</div>

It also works for gray lists.

My Heading

  • Item 1
  • Item 2
  • Item 3
  • Item 4
Bottom

Variations

Add .box-white to create a box with white background.

A Real World Example with a list instead of box-inner. Yo Dawg
  • Item 1
  • Item 2
  • Item 3
  • Item 4
This is the bottom!
1<div class="box box-white">
2    ...
3</div>