ALF Panels

A panel is the advanced version of a box. The markup is:

<section class="panel">
  <header>
    <h2>...</h2>
  </header>
  
  <div class="content">
    ...
  </div>
  
  <div class="content">
    ...
  </div>
  
  <footer>
    ...
  </footer>
</section>

HTML content has to go inside the header, a DIV.content or the footer. The contents of each of these can be pretty much anything you want. They are all optional, and you can use one or more DIV.content blocks (they will be separated by a line).

There are a few optional classes for the panel, just like in boxes:

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

SECTION or DIV?

If you're using headings (h2 and h3 are supported), you should use a SECTION. Otherwise, use a DIV.

Embedding full-width content

It's also possible to put content directly in the panel, without a DIV.content. In this case it will occupy the whole width of the panel. This is useful for full-width images (see example below).

Examples

Simplest panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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 bordered clear main

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

Without header nor footer.

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.

Without footer, and a very long header that should wrap nicely

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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.

With full-width content

The image below is sitting directly in the panel, without a DIV.container.

Time Quest cover

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.