ALF Boxes

A box is a simple container with visible boundaries. The markup is:

<div class="box">
  ... (without heading)
</div>

<section class="box">
  <h2>A heading</h2>
  ...
</section>

The contents of a box can be pretty much anything you want. There are a few optional classes:

  • .bordered
  • .rounded
  • .shadowed
  • One of the color identifiers: .main, .alt, .ok, .warning, .error
  • .clear: no baground color (should be combined at least with bordered or shadowed). Note that it can also be combined with one of the color identifiers (see examples below).

Examples

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

bordered

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

shadowed

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

rounded

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

clear main bordered

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

main

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

alt

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

clear alt bordered rounded

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

ok

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

warning

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

error

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

clear shadowed rounded

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

clear bordered

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

bordered shadowed

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

main rounded

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

alt bordered

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

warning shadowed bordered rounded

Mauris rhoncus id urna eu egestas. Nam ut enim volutpat, lobortis nulla quis, auctor dui. Suspendisse potenti. Praesent id facilisis nunc. Pellentesque at orci tellus. Nullam nec condimentum leo.

Boxes can be nested:

This box has a box inside

Really, I mean it. Look:

Nice!

Boxes can be any size, and include pretty much any type of content:

Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam faucibus felis eu massa hendrerit pharetra. Integer ut lectus quis libero tincidunt laoreet. In faucibus nunc vel quam tempus sodales. Nullam velit est, auctor in convallis et, condimentum vel elit. Ut et nisi nisi, vel fermentum tellus.

Heading, level 2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut auctor risus eu urna pretium mattis. Nam venenatis, risus et dignissim cursus, urna justo commodo metus, at viverra mauris libero at nunc. Donec tincidunt gravida volutpat. Ut nec est ac tortor ullamcorper auctor.

  • Item 1
  • Item 2
    • Item 2.1
    • Item 2.2
  • Item 3

Duis sed orci dui. Morbi ut libero leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer auctor iaculis adipiscing. Duis eu dolor quam, vitae faucibus nisi. Cras non mi dolor, in malesuada leo.

  1. Item 1
  2. Item 2
    • Item 2.1
    • Item 2.2
  3. Item 3