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.
Section Modifier [SECTION_MODIFIER]
Optionally add a modifier class to the footer section.
Example
<footer class="fgr [COLOR_THEME] [MIN_HEIGHT] [SPACING] [MODIFIER]">
<!-- Repeatable footer section -->
<div class="fgr-section [SECTION_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>
</div>
</footer>
Footer Example
<footer class="fgr sec-spacing-top herrs-footer">
<div class="fgr-section">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-3">
<!-- BEGIN: Footer Content -->
<img class="footer-logo" src="../../../../assets/img/herrs.png" alt="Herr's">
<p>271 Old Baltimore Pike <br>
Nottingham, PA 19362-9788</p>
<p>(610) 932-6400</p>
<ul class="list-social">
<li><a href="#"><span class="fa-brands fa-instagram" aria-hidden="true"></span><span class="visually-hidden">Instagram</span>
</a></li>
<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-youtube" aria-hidden="true"></span><span class="visually-hidden">Youtube</span>
</a></li>
<li><a href="#"><span class="fa-brands fa-tiktok" aria-hidden="true"></span><span class="visually-hidden">Tiktok</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">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Our Company</p>
<ul class="link-list">
<li><a href="#">Our History</a></li>
<li><a href="#">Our Values</a></li>
<li><a href="#">Leadership Team</a></li>
<li><a href="#">Careers</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Contact Us</p>
<ul class="link-list">
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sales & Distribution</a></li>
<li><a href="#">Media Outreach</a></li>
</ul>
<!-- END: Footer Content -->
</div>
<div class="col-md-4 col-xl-3">
<!-- BEGIN: Footer Content -->
<p class="footer-header">Resources</p>
<ul class="link-list">
<li><a href="#">Employees</a></li>
<li><a href="#">Videos</a></li>
<li><a href="#">Business Review</a></li>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section footer-wave">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-12">
<!-- BEGIN: Footer Content -->
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section footer-secondary-links">
<div class="container-xxl">
<div class="row">
<div class="col-md-12 col-xl-12">
<!-- BEGIN: Footer Content -->
<ul class="link-list-horiz">
<li><a href="#">Terms of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">California Privacy Notice</a></li>
<li><a href="#">Notice of Financial Incentive</a></li>
<li><a href="#">Shipping Policy</a></li>
<li><a href="#">Refund Policy</a></li>
</ul>
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
<div class="fgr-section subfooter">
<div class="container-xxl">
<div class="row justify-content-between align-items-center">
<div class="col-md-12 col-xl-auto text-white">
<!-- BEGIN: Footer Content -->
©Herr Foods Inc.
<!-- END: Footer Content -->
</div>
<div class="col-md-12 col-xl-auto">
<!-- BEGIN: Footer Content -->
Handcrafted by Flylight Media
<!-- END: Footer Content -->
</div>
</div>
</div>
</div>
</footer>