Cirrus

#Basics

The footer structure comes with a couple of classes to help out with designing.

Structure
  • footer serves as the main base component of the *drum roll...* footer. By default, it comes with equal padding at the top and bottom of 6rem and a margin top of 5rem to create a separation between the main content and the footer.
    • At this point, pretty much anything can be placed into the footer, but there are a few footer specific components worth mentioning.
    • footer__list-title is a standard list title in the footer with a bottom border.
    • footer__list-item provides default stylings for list items. These can be used in combination with Cirrus's columns to create a clean site map.
<footer class="footer">
    <h6 class="footer__title white uppercase">Logo</h6>
    <div class="content">
        <div class="divider"></div>

        <div class="row">
            <div class="col-4">
                <ul class="no-bullets">
                    <a href="!#">
                        <li class="footer__list-item">Home</li>
                    </a>
                    <a href="!#">
                        <li class="footer__list-item">Sign Up</li>
                    </a>
                    <a href="!#">
                        <li class="footer__list-item">Downloads</li>
                    </a>
                    <ul>
                    </ul>
                </ul>
            </div>
            <div class="col-4">
                <ul class="no-bullets">
                    <a href="!#">
                        <li class="footer__list-item">Company Information</li>
                    </a>
                    <a href="!#">
                        <li class="footer__list-item">Contact Us</li>
                    </a>
                    <a href="!#">
                        <li class="footer__list-item">Reviews</li>
                    </a>
                    <ul>
                    </ul>
                </ul>
            </div>
            <div class="col-4">
                <ul class="no-bullets">
                    <a href="!#">
                        <li class="footer__list-item">FAQ</li>
                    </a>
                    <a href="!#">
                        <li class="footer__list-item">Help Desk</li>
                    </a>
                    <a href="!#">
                        <li class="footer__list-item">Forums</li>
                    </a>
                    <ul>
                    </ul>
                </ul>
            </div>
        </div>
    </div>
    <p class="subtitle">Company © 2018.</p>
</footer>

#Static

Static footers are designed to stick to the bottom of a page. To make a static footer, add the footer--fixed class to the footer.

<footer class="footer footer--fixed" style="padding: 2rem 0; opacity: 0.95;">
    <h6 class="footer__title white uppercase">Footer</h6>
    <div class="content u-text-center">
        <p class="m-0">Sign up to hear about the latest updates via email</p>
        <div class="row">
            <div class="col-5">
                <input class="input-small" type="text" placeholder="Name">
            </div>
            <div class="col-5">
                <input class="input-small" type="text" placeholder="Email">
            </div>
            <div class="col-2">
                <button class="btn btn-small">Sign Up</button>
            </div>
        </div>
    </div>
</footer>

#Examples

Below are some examples to help you get started.

Custom Footer

The footer style used above.

footer {
    width: 100%;
    background-color: #fff;
    background: linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.5)),url(https://images.unsplash.com/photo-1514227765494-1bbd6ba05916?auto=format&fit=crop&w=1600&q=100) no-repeat;
}
Minimal Footer

A minimal footer for a clean website. Only having the copyright, logo, and social links can be sufficient. Simple, clean, and to the point.

Site Footer

A minimal footer for a clean website. Only having the copyright, logo, and social links can be sufficient. Simple, clean, and to the point.

Newsletter

Make your footer standout with a simple contact or sign up form. This is great for blogs and other media sites.

Newsletter

Make your footer standout with a simple contact or sign up form. This is great for blogs and other media sites.

Coming Soon

Currently working hard coming up with different designs. Check back later.