# Footer New!

## A simple and versatile footer component using the HTML5 'footer' tag.

A footer component conists of a body section and a bottom section. Neither of these are compulsory - you can create a footer without a bottom section and a footer without a body section.

The body section contains two further sections: a content section to put textual HTML in and a links section which contains columnised links.

Footers must be placed outside of a `<div class="container">`.

The example shown at the top of this page uses the following markup:

    <footer class="default">
      <div class="body">
        <div class="content">
          <h1>Example (title)</h1>
          <p>You can put a short (or long) description of your website here.</p>
          <p>Any HTML tag is supported.</p>
        </div>
        <div class="links">
          <ul>
            <li class="header">Column 1</li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <ul>
            <li class="header">Column 2</li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
          <ul>
            <li class="header">Column 3</li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
            <li><a href="#">Link</a></li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <p>Copyright message</p>
      </div>
    </footer>

## Colours

Footers can take any standard Magic colour. Refer to the colour docs for more info.

The colour of a footer can be set by giving the `<footer>` tag a standard Magic colour class. The bottom section gets its colour automatically. For example:

    <footer class="default">
      ...
    </footer>

    <footer class="red">
      ...
    </footer>