---
title: "Footer"
type: component
version: "2.2.2"
doc_version: "2.7.3"
status: stable
date: 2026-07-05
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Footer with multi-column layouts, social links, and brand sections. Semantic HTML5, SEO-friendly structure for responsive website footers."
url: https://frutjam.com/pl/components/footer
---

# Footer Component

Komponenty stopki organizują i prezentują na dole stron informacje dotyczące całej witryny, takie jak łącza, prawa autorskie i dane kontaktowe. Stopki zbudowane w oparciu o semantyczny kod HTML ułatwiają nawigację i dostarczają ważnych metainformacji. System stopek Frutjam obsługuje wiele układów, kierunków i stylów — idealnie nadaje się do stopek witryn, stopek dokumentacji i nawigacji u dołu.

Tylko CSS, nie wymaga JavaScript. Dostępny w WCAG AA i niezależny od frameworka — współpracuje z Django, HTMX, Laravel, React i dowolnym stosem.

| Klasa             | Typ         | Opis                                    |
| ----------------- | ----------- | --------------------------------------- |
| footer            | Opierać     | Kontener stopki strony z układem siatki |
| footer-title      | Modyfikator | Nagłówek sekcji wewnątrz stopki         |
| footer-horizontal | Modyfikator | Poziomy układ jednorzędowy              |
| footer-vertical   | Modyfikator | Pionowy układ skumulowany               |

## Podstawowe użycie

## Wskazówki dotyczące stopki

```html
<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>
```

## Stopka z informacjami społecznościowymi

```html
<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>
```