---
layout: default
title:  "Boxes"
date:   2013-05-17 23:24:04
---

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
-----------

Add a `.box` class to a `<div>` element to style as a sectioned box. The box has a no-op `.box-inner` div, and an optional `<h3>` element. The heading can hold a `<small>` tag that is automatically pulled to the right.

<div class="box">
	<h3>Heading <small>This goes to the right!</small></h3>
	<div class="box-inner">
		<p>This is a box with some content</p>
	</div>
</div>

~~~html
<div class="box">
	<h3>Heading <small>This goes to the right!</small></h3>
	<div class="box-inner">
		<p>This is a box with some content</p>
	</div>
</div>
~~~


Styles
------

Add `.box-white` to create a box with slightly better contrast.

<div class="box box-white">
	<h3>Heading</h3>
	<div class="box-inner">
		<p>This is a box with some content</p>
	</div>
</div>

~~~html
<div class="box box-white">
	...
</div>
~~~