# Footer

Footers in Cirrus are responsive and easy to implement in any page. It can contain pretty much any element including extra divs, columns, lists, and more. Below is a recreation of what this page uses as a footer.

# Footer Outline

The footer itself does not come with too many complicated components, but rather a very minimalistic set of modifiers to allow for greater flexibility.

Basic Outline

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

As stated above, this forms the basis for a footer list title as seen in the 'Bear & Co.', 'About', and other titles with the footer-list-title class. The items below them are styled by the footer-list-item class.

# Static Footer

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.

# Custom Designs

Tired of dark gray? Easily add or change anything in the footer to your liking.

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;
    background-size: cover;
    will-change: transform;
}

Below are a couple of examples of different footer designs with Cirrus to help you get started.

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 Map

A simple way to allow users to navigate to all the different pages on your site.

Newsletter

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

Social

Refer users to other social networks from the main site for greater user engagement.

Coming Soon

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

Cirrus