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>