Footer

General information

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👇

React
Vue
React
<Footer />
Vue
<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 👇

React
Vue
React
<Footer topDivider />
Vue
<c-footer top-divider />

For a full-width divider, add the .has-bottom-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 👇

React
Vue
React
<Footer bottomOuterDivider />
Vue
<c-footer top-outer-divider />

TL;DR

React props

Prop

Type

Default

Accepted values

topOuterDivider

boolean

false

-

topDivider

boolean

false

-

Vue props

Prop

Type

Default

Accepted values

top-outer-divider

boolean

false

-

top-divider

boolean

false

-

In React and Vue, all content should be handled into to the footer components.

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

Learn more about the Sass logic behind each template.