Footer

Every template comes with 2 different footer configurations. Let’s have a look:

Footer – Config. 1

It’s a very basic footer configuration – ideal for a site with a few pages.

<footer class="site-footer center-content-mobile">
    <div class="container">
        <div class="site-footer-inner">
        
            <!-- Footer top -->
            <div class="footer-top space-between text-xxs">
            
                <!-- Logo image or site name -->
                <div class="brand">
                    <a href="#">
                        <!-- Site name, or image (ideal size: 32x32px) -->
                    </a>
                </div>
                
                <!-- Social icons -->
                <div class="footer-social">
                    <ul class="list-reset">
                        <li>
                            <a href="#">
                                <!-- SVG icon -->
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
            
            <!-- Footer bottom -->
            <div class="footer-bottom space-between text-xxs invert-order-desktop">
                
                <!-- Footer links -->
                <nav class="footer-nav">
                    <ul class="list-reset">
                        <li>
                            <a href="#">Footer link</a>
                        </li>
                    </ul>
                </nav>
                
                <!-- Copyright text -->
                <div class="footer-copyright">&copy; Copyrights</div>
            
            </div>
            
        </div>
    </div>
</footer>

The same footer configuration is provided by the Footer.js (React) and Footer.vue (Vue) files stored in the /src/components/layout/ path.

Import this file and load the component into your page layout in this way 👇

<Footer />

<c-footer />

Footer – Config. 2

It’s a more complex configuration, and it’s very useful if you’ve more links to display.

<footer class="site-footer">
    <div class="container">
        <div class="site-footer-inner">
        
            <!-- Footer top -->
            <div class="footer-top text-xxs">
                <div class="footer-blocks">
                
                    <!-- Block -->
                    <div class="footer-block">
                        <div class="brand mb-16">
                            <a href="#">
                                <!-- Site name, or image (ideal size: 32x32px) -->
                            </a>
                        </div>
                        <div class="footer-copyright">&copy; 2019 Abstract, all rights reserved</div>
                    </div>
                    
                    <!-- Block with links -->
                    <div class="footer-block">
                        <div class="footer-block-title">Block title</div>
                        <ul class="list-reset">
                            <li>
                                <a href="#">Block links</a>
                            </li>
                        </ul>
                    </div>
                    
                    <!-- Block with links ... -->
                    <!-- Block with links ... -->
                    
                </div>
            </div>
            
            <!-- Footer bottom -->
            <div class="footer-bottom space-between center-content-mobile text-xxs">
                
                <!-- Footer links -->
                <nav class="footer-nav">
                    <ul class="list-reset mb-0">
                        <li>
                            <a href="#">Footer link</a>
                        </li>
                    </ul>
                </nav>
                
                <!-- Social icons -->
                <div class="footer-social">
                    <ul class="list-reset">
                        <li>
                            <a href="#">
                                <!-- SVG icon -->
                            </a>
                        </li>
                    </ul>
                </div>
                
            </div>
            
        </div>
    </div>
</footer>

This footer configuration is provided by the Footer02.js (React) and Footer02.vue (Vue) files stored in the /src/components/layout/ folder.

Logo

Please refer to the Header – Logo paragraph to learn more.

Top borders

If you want to display a border at the top of the footer area, you can use the .has-top-divider helper class like in the example below 👇

<footer class="site-footer">
	<div class="container">
		<div class="site-footer-inner has-top-divider">
			<!-- footer content -->
		</div>
	</div>
</footer>

In React and Vue there is a prop for that 👇

<Footer topDivider />

<c-footer top-divider />

For a full-width divider, add the .has-top-divider class to the .site-footer element 👇

<footer class="site-footer has-top-divider">
	<div class="container">
		<div class="site-footer-inner">
			<!-- footer content -->
		</div>
	</div>
</footer>

In React and Vue there is a prop for that 👇

<Footer topOuterDivider />

<c-footer top-outer-divider />

TL;DR

React props

Vue props

Theming

Style is defined into 3 files:

📋 Core file

src/assets/scss/core/layout/_footer.scss
👆🚫 Don’t edit this file!

📋 Settings file

src/assets/scss/settings/layout/_footer.scss
👆 Use this to adjust Sass variables

📋 Theme file

src/assets/scss/theme/layout/_footer.scss
👆 Use this to add custom CSS