Skip to main content
Frutjam logo Frutjam
v2.2.1
Theme

Footer Component

A semantic, accessible footer component built with HTML5 and Tailwind CSS. Structure site footers with navigation links, brand logos, social icons, and legal text. Supports multi-column layouts, responsive stacking, and theme-aware styling for professional, SEO-friendly page footers.

Footer components organize and present site-wide information like links, copyright, and contact details at the bottom of pages. Built with semantic HTML, footers improve navigation and provide important meta information. The Frutjam footer system supports multiple layouts, directions, and styles—ideal for site footers, documentation footers, and bottom navigation.

Class Type Description
footerBasePage footer container with grid layout
footer-titleModifierSection heading inside the footer
footer-horizontalModifierHorizontal single-row layout
footer-verticalModifierVertical stacked layout

Basic Usage

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<footer class="footer p-10 bg-neutral text-on-neutral">
  <div>
    <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
    <p>Providing reliable tech since 1992</p>
  </div>

  <div>
    <span class="footer-title">Company</span>
    <a class="link link-hover">About us</a>
    <a class="link link-hover">Contact</a>
    <a class="link link-hover">Jobs</a>
  </div>

  <div>
    <span class="footer-title">Legal</span>
    <a class="link link-hover">Terms of use</a>
    <a class="link link-hover">Privacy policy</a>
    <a class="link link-hover">Cookie policy</a>
  </div>
</footer>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
<footer className="footer p-10 bg-neutral text-on-neutral">
  <div>
    <svg width="50" height="50" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm3.5-9c.83 0 1.5-.67 1.5-1.5S16.33 8 15.5 8 14 8.67 14 9.5s.67 1.5 1.5 1.5zm-7 0c.83 0 1.5-.67 1.5-1.5S9.33 8 8.5 8 7 8.67 7 9.5 7.67 11 8.5 11zm3.5 6.5c2.33 0 4.31-1.46 5.11-3.5H6.89c.8 2.04 2.78 3.5 5.11 3.5z"/></svg>
    <p>Providing reliable tech since 1992</p>
  </div>

  <div>
    <span className="footer-title">Company</span>
    <a className="link link-hover">About us</a>
    <a className="link link-hover">Contact</a>
    <a className="link link-hover">Jobs</a>
  </div>

  <div>
    <span className="footer-title">Legal</span>
    <a className="link link-hover">Terms of use</a>
    <a className="link link-hover">Privacy policy</a>
    <a className="link link-hover">Cookie policy</a>
  </div>
</footer>

Footer Directions

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<footer class="footer footer-center p-10 bg-base-200 text-on-base">
  <div class="flex justify-center">
    <a class="link link-hover">Company</a>
    <a class="link link-hover">About</a>
    <a class="link link-hover">Contact</a>
  </div>
  <div>
    <p>Copyright © 2024 - All rights reserved</p>
  </div>
</footer>

Footer with Social

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<footer class="footer bg-neutral text-on-neutral p-10">
  <div>
    <span class="footer-title">Services</span>
    <a class="link link-hover">Web Design</a>
    <a class="link link-hover">UI/UX</a>
    <a class="link link-hover">Development</a>
  </div>

  <div>
    <span class="footer-title">Company</span>
    <a class="link link-hover">About us</a>
    <a class="link link-hover">Contact</a>
  </div>

  <div>
    <span class="footer-title">Social</span>
    <div class="flex gap-3">
      <a class="link">Twitter</a>
      <a class="link">GitHub</a>
      <a class="link">LinkedIn</a>
    </div>
  </div>
</footer>