Design System

Footer

Footers are a great way to provide users with additional information about your website. They can include links to other pages, contact information, and social media links. Footers are typically located at the bottom of a webpage and are a great way to help users navigate your site. On the Outback Nursery website, it features a mega footer or large footers that contain a lot of information and links. They are a great way to provide users with additional information about the website.

Illustration of a Footer Implementation

HTML Code

          
            <!-- Footer section -->
            <footer class="c-footer-sample l-mb-2 l-pt-1 l-flex l-flex-column center-content l-flex-center-items max-width-mobile l-my-2 l-pt-1">
              <img class="c-footer__logo-sample" src="images/outback-nursery-logo.png" alt="Outback Nursery & Garden Centre logo">
        
              <!-- Footer Columns Wrapper -->
              <div class="c-footer__columns-wrapper l-flex l-flex-column l-flex-space-around l-my-1 u-primary-font">
        
                <!-- Our Offerings Column -->
                <div class="c-footer__column l-flex l-flex-column l-flex-center-items l-my-1">
                  <h4 class="c-footer__col-heading">Our Offerings</h4>
                  <nav class="c-footer__col-links l-flex l-flex-column l-flex-center-items">
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Our Products</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Garden Oasis Essentials</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Our Services</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Seasonal Delights</a>
                  </nav>
                </div>
        
                <!-- Green Tips Column -->
                <div class="c-footer__column l-flex l-flex-column l-flex-center-items l-my-1">
                  <h4 class="c-footer__col-heading">Green Tips</h4>
                  <nav class="c-footer__col-links l-flex l-flex-column l-flex-center-items">
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Planting Guide</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Foliage Favourites</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Favourite Websites</a>
                  </nav>
                </div>
        
                <!-- Our Journey Column -->
                <div class="c-footer__column l-flex l-flex-column l-flex-center-items l-my-1">
                  <h4 class="c-footer__col-heading">Our Journey</h4>
                  <nav class="c-footer__col-links l-flex l-flex-column l-flex-center-items">
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Our Story</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Our Roots</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Our Team</a>
                    <a class="c-footer__col-link-items c-footer__col-link-items--hover u-navlinks" href="coming-soon.html">Green Guidance Hub</a>
                  </nav>
                </div>
        
                <!-- Contact Us Column -->
                <div class="c-footer__column l-flex l-flex-column l-flex-center-items l-my-1">
                  <h4 class="c-footer__col-heading">Stay In Touch</h4>
                  <address class="c-footer__contact-info l-flex l-flex-column l-flex-center-items">
                    <a class="c-footer__email c-footer__email--hover u-navlinks" href="mailto:info@outbacknursery.ca">info@outbacknursery.ca</a>
                    <a class="c-footer__phone is-on-desktop-hidden u-navlinks" href="tel:+12503343532">(250) 334-3532</a>
                    <p class="c-footer__phone is-on-mobile-hidden is-on-desktop-visible">(250) 334-3532</p>
                    <p class="c-footer__location">6016 Headquarters Rd,</p>
                    <p class="c-footer__location">Courtenay, BC V9J 1M7</p>
                  </address>
                </div>
        
                <!-- Social Links -->
                <div class="c-footer__column l-flex l-flex-column l-flex-center-items l-my-1">
                  <h4 class="c-footer__col-heading">Join Us on Our Journey</h4>
                  <a class="c-footer__socials c-footer__socials--hover u-subheading u-primary-font" href="https://www.facebook.com/profile.php?id=100045470087619"><i class="fa fa-facebook" aria-hidden="true"></i></a>
                  <a class="c-footer__socials c-footer__socials--hover u-subheading u-primary-font" href="https://www.instagram.com/outbacknursery/?hl=en"><i class="fa fa-instagram" aria-hidden="true"></i></a>
                </div>
        
              </div>
            </footer>