Footer

This part of the documentation relates to premium templates built with Cruip CSS framework only. If the template you are using is built on the top of Tailwind CSS, please refer to the last part of the documentation.

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.