---
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/fr/components/footer
---

# Footer Component

Les composants de pied de page organisent et présentent des informations sur l'ensemble du site, telles que des liens, des droits d'auteur et des coordonnées au bas des pages. Construits avec du HTML sémantique, les pieds de page améliorent la navigation et fournissent des méta-informations importantes. Le système de pied de page Frutjam prend en charge plusieurs mises en page, directions et styles, idéal pour les pieds de page de site, les pieds de page de documentation et la navigation inférieure.

CSS uniquement, aucun JavaScript requis. WCAG AA accessible et indépendant du framework – fonctionne avec Django, HTMX, Laravel, React et n'importe quelle pile.

| Classe            | Taper        | Description                                          |
| ----------------- | ------------ | ---------------------------------------------------- |
| footer            | Base         | Conteneur de pied de page avec disposition en grille |
| footer-title      | Modificateur | Titre de section à l'intérieur du pied de page       |
| footer-horizontal | Modificateur | Disposition horizontale sur une seule rangée         |
| footer-vertical   | Modificateur | Disposition empilée verticale                        |

## Utilisation de base

## Instructions en bas de page

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

## Pied de page avec réseaux sociaux

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