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