跳转到主内容
Frutjam logo Frutjam
v2.2.1
Theme

页脚组件

纯 CSS Tailwind CSS 页脚，具有多列布局、徽标、链接和版权插槽。 WCAG AA 可访问，可与 Django、HTMX、Laravel、React 和任何 Tailwind CSS v4 项目配合使用。

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.

CSS-only, no JavaScript required. WCAG AA accessible and framework-agnostic — works with Django, HTMX, Laravel, React, and any stack.

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>