Footer
The website footer is the section of content at the very bottom of a web page. It typically contains a copyright notice, link to a privacy policy, sitemap, logo, contact information, social media icons, and an email sign-up form.
Component Properties
All Hero Types .shr
Text / Background Color Theme [COLOR_THEME]
Using the Sass color-contrast() function, the text color is automatically determined based on the defined $color-contrast-dark and $color-contrast-light text color variables for the contrasting color for a particular background-color. Available classes are:
Footer Modifier [MODIFIER]
Optionally add an overall modifier class to the component.
Footer Vertical Spacing [SPACING]
Optional: Adds top and bottom padding to the footer.
none- No spacing applied to element
.sec-spacing- Adds top and bottom spacing to the footer
.sec-spacing-top- Adds top spacing to the footer
.sec-spacing-sm- Adds a small amount top and bottom spacing to the footer
.sec-spacing-top-sm- Adds a small amount top spacing to the footer
.sec-spacing-lg- Adds a large amount top and bottom spacing to the footer
.sec-spacing-top-lg- Adds a large amount top spacing to the footer
Container Modifier [CONTAINER]
Use .container-fluid for a full width container, spanning the entire width of the viewport
.container- Standard width section contrainer. Container width snaps to width at breakpoints.
.container-xxl- Standard width section contrainer. Container has fluid until it reaches it's maximum width
.container-fluid- Full width section contrainer. Container runs from edge to egde of the viewport
Minimum Section Height [MIN_HEIGHT]
Set a minimum height for the entire section based on the height of the viewport.
.min-vh-40- 40% of the viewport height
.min-vh-60- 60% of the viewport height
.min-vh-75- 75% of the viewport height
.min-vh-90- 90% of the viewport height
.min-vh-100- 100% of the viewport height
Row Justification [ROW_JUSTIFY]
Use justify-content utilities on flexbox containers to change the alignment of flex items on the main x-axis.
.justify-content-start- Pack columns from the left
.justify-content-end- Pack columns from the right
.justify-content-center- Pack columns around the center.
.justify-content-between- Distribute columns evenly. The first item is flush with the start, the last is flush with the end.
.justify-content-around- Distribute columns evenly. Start and end gaps are half the size of the space between each item.
.justify-content-evenly- Distribute columns evenly. Start, in-between, and end gaps have equal sizes.
Row Alignment [ROW_ALIGN]
Use align-items utilities on flexbox containers to change the alignment of flex items on the cross y-axis.
.align-items-start- Columns are packed flush to each other toward the start edge of the row in the appropriate axis.
.align-items-end- Columns are packed flush to each other toward the end edge of the row in the appropriate axis.
.align-items-center- Columns are vertically aligned to the center of the row.
.align-items-stretch- All Columns are stretched vertically to match the tallest column in the row.
Column widths [COL_WIDTH_MD] [COL_WIDTH_XL]
Set the width of the content column for desktop vieports.
.col-md-[1-12][COL_WIDTH_MD]Sets column width at the$mdbreakpoint.col-xl-[1-12][COL_WIDTH_XL]Sets column width at the$xlbreakpoint.col-break- Force next columns to break to new line through all breakpoints
Grid Spacing [GRID_GAP_X] [GRID_GAP_Y]
Gutters are the padding between your columns, used to responsively space and align content in the grid system.
none- Grid follows default spacing.
.gx-[0-5][GRID_GAP_X]Provides horizontal gap between columns..gy-[0-5][GRID_GAP_Y]Provides vertical gap between columns.
Column Modifier [COL_MODIFIER]
Optionally add a modifier class to the column.
Example
<footer class="fgr[COLOR_THEME] [MIN_HEIGHT] [SPACING] [MODIFIER]">
<div class="[CONTAINER]">
<div class="row [ROW_JUSTIFY] [ROW_ALIGN] [GRID_GAP_X] [GRID_GAP_Y]">
<div class="[COL_WIDTH_MD] [COL_WIDTH_XL] [COL_MODIFIER]">
...
</div>
</div>
</div>
</footer>
Footer Example
<footer class="fgr text-bg-secondary sec-spacing-top-sm">
<div class="container">
<div class="row gy-3 gx-3">
<div class="col-md-12 col-xl-2">
<!-- BEGIN: Footer Content -->
<img src="../../../../assets/img/konsoka.svg" alt="Konsoka" class="img-fluid" height="181" width="300">
<hr>
<p>123 Main Street,<br>Portsmouth, NH 03803<br>tel: 555-123-4545</p>
<ul class="list-social fs-5">
<li><a href="#"><span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-linkedin" aria-hidden="true"></span><span class="visually-hidden">Linkedin</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-youtube" aria-hidden="true"></span><span class="visually-hidden">Youtube</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-x-twitter" aria-hidden="true"></span><span class="visually-hidden">x-twitter</span>
</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3 ms-auto">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-12 col-xl-12 d-flex justify-content-between small">
<!-- BEGIN: Footer Content -->
<p>© 2024 Konsoka</p>
<p><a href="#">Privacy Notice</a></p>
<!-- END: Footer Content -->
</div>
</div>
</div>
</footer>
Footer Dark Example
<footer class="fgr text-bg-dark sec-spacing-top-lg text-center text-xl-start">
<div class="container">
<div class="row gy-3 gx-3">
<div class="col-md-12 col-xl-2">
<!-- BEGIN: Footer Content -->
<img src="../../../../assets/img/konsoka.svg" alt="Konsoka" class="img-fluid" height="181" width="300">
<hr>
<p>123 Main Street,<br>Portsmouth, NH 03803<br>tel: 555-123-4545</p>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3 ms-auto">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links links-light small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links links-light small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<h6>Modi similique sit odio</h6>
<ul class="list-links links-light small">
<li><a href="#">Praesentium, mollitia! Doloribus, dignissimos</a></li>
<li><a href="#">Explicabo illo eveniet eum</a></li>
<li><a href="#">Excepturi eius dignissimos labore</a></li>
<li><a href="#">Quisquam ex nostrum odit</a></li>
<li><a href="#">Provident, doloremque aliquid Molestiae</a></li>
<li><a href="#">Voluptates molestias cum sit</a></li>
<li><a href="#">Veritatis rem ad voluptatum</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-12 col-xl-12 d-flex justify-content-between small">
<!-- BEGIN: Footer Content -->
<p>© 2024 Konsoka</p>
<ul class="list-social links-light">
<li><a href="#"><span class="fa-brands fa-facebook" aria-hidden="true"></span><span class="visually-hidden">Facebook</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-linkedin" aria-hidden="true"></span><span class="visually-hidden">Linkedin</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-youtube" aria-hidden="true"></span><span class="visually-hidden">Youtube</span>
</a></li>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</footer>