Documentation
Documentation - Footer.
Découvrez Marssel : un framework CSS intelligent, configuration minimale, conçu pour des interfaces rapides et une expérience développeur simplifiée.
Démarrage
Concepts de base
Utilitaires
Footer
Marssel permet de créer facilement des footers (pieds de page) personnalisés et responsive pour structurer les informations de bas de page, liens utiles, formulaires d'inscription et réseaux sociaux.
Footer multi-colonnes avec newsletter
Footer complet avec plusieurs sections et formulaire d'inscription :
<footer class="bg-[f8f9fa] py-[60px]">
<div class="col-[container]">
<div class="col-[row]">
<div class="col-[12] md--col-[3] mb-[30px]">
<a href="/" class="d-[flex] items-[center] mb-[20px] text-dec-[none]">
<img src="logo.png" alt="Logo" class="w-[40px] h-[40px]">
<span class="font-weight-[600] ml-[10px] c-[333333]">Company</span>
</a>
<p class="c-[6c757d] text-align-[left] line-h-[1d6]">
Here you can use rows and columns to organize your footer content.
</p>
</div>
<div class="col-[12] md--col-[2] mb-[30px]">
<h5 class="h5---[font-weight-[600]+mb-[20px]+c-[333333]]">Products</h5>
<ul class="list-style-[none] p-[0] m-[0]">
<li class="mb-[10px]">
<a href="#" class="link-footer---[c-[6c757d]+text-dec-[none]] link-footer---[c-[0d6efd]]:hover">Angular</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">React</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Vue</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Laravel</a>
</li>
</ul>
</div>
<div class="col-[12] md--col-[2] mb-[30px]">
<h5 class="h5">Useful links</h5>
<ul class="list-style-[none] p-[0] m-[0]">
<li class="mb-[10px]">
<a href="#" class="link-footer">Pricing</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Settings</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Orders</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Help</a>
</li>
</ul>
</div>
<div class="col-[12] md--col-[5] mb-[30px]">
<h5 class="h5">Newsletter</h5>
<p class="c-[6c757d] mb-[16px]">Subscribe to our newsletter for updates</p>
<div class="d-[flex] gap-[10px]">
<input type="email"
class="input-news---[flex-[1]+p-[10px]+border-[1px_solid_dee2e6]+rounded-[4px]+outline-[none]] input-news---[border-[0d6efd]]:focus"
placeholder="Email address">
<button class="bg-[0d6efd] c-[ffffff] px-[20px] py-[10px] rounded-[4px] border-[none] cursor-[pointer] bg-[0b5ed7]:hover">
Subscribe
</button>
</div>
</div>
</div>
<div class="border-t-[1px_solid_dee2e6] mt-[60px] pt-[20px]">
<p class="c-[6c757d] text-align-[center] m-[0]">
© 2026 Company, Inc. All rights reserved.
</p>
</div>
</div>
</footer>Footer simple avec liens
Footer minimaliste avec copyright et liens essentiels :
<footer class="bg-[f8f9fa] py-[30px]">
<div class="col-[container]">
<div class="d-[flex] justify-content-[space-between] items-[center] flex-flow-[wrap] gap-[20px]">
<span class="c-[6c757d]">© 2026 Company, Inc</span>
<ul class="d-[flex] gap-[20px] list-style-[none] p-[0] m-[0]">
<li>
<a href="#" class="link-footer---[c-[6c757d]+text-dec-[none]] link-footer---[c-[0d6efd]]:hover">Privacy</a>
</li>
<li>
<a href="#" class="link-footer">Terms</a>
</li>
<li>
<a href="#" class="link-footer">Contact</a>
</li>
</ul>
</div>
</div>
</footer>Footer avec réseaux sociaux
Footer centré avec icônes de réseaux sociaux :
<footer class="bg-[f8f9fa] py-[40px]">
<div class="col-[container]">
<div class="d-[flex] justify-content-[center] gap-[30px] mb-[20px]">
<a href="#" class="c-[6c757d] [c-[1877f2]]+transition-[color_0.2s]:hover">
<span class="icon-[facebook-logo] icon-size-[large]"></span>
</a>
<a href="#" class="c-[6c757d] [c-[1da1f2]]+transition-[color_0.2s]:hover">
<span class="icon-[x-logo] icon-size-[large]"></span>
</a>
<a href="#" class="c-[6c757d] [c-[0a66c2]]+transition-[color_0.2s]:hover">
<span class="icon-[linkedin] icon-size-[large]"></span>
</a>
<a href="#" class="c-[6c757d] [c-[e4405f]]+transition-[color_0.2s]:hover">
<span class="icon-[instagram-logo] icon-size-[large]"></span>
</a>
<a href="#" class="c-[6c757d] [c-[ff0000]]+transition-[color_0.2s]:hover">
<span class="icon-[youtube-logo] icon-size-[large]"></span>
</a>
</div>
<div class="text-align-[center] c-[6c757d]">
© 2026 Company, Inc. All rights reserved.
</div>
</div>
</footer>Footer avec navigation complète
Footer détaillé avec plusieurs sections de navigation :
<footer class="bg-[1f2937] c-[ffffff] py-[60px]">
<div class="col-[container]">
<div class="col-[row]">
<div class="col-[12] md--col-[4] mb-[30px]">
<h4 class="font-weight-[600] mb-[20px] c-[ffffff]">About Us</h4>
<p class="c-[9ca3af] line-h-[1d6]">
We are a company dedicated to providing the best services for our customers.
</p>
<div class="d-[flex]+gap-[15px]+mt-[20px]">
<a href="#" class="link-about---[c-[9ca3af]] link-about--[c-[ffffff]]+transition-[color_0.2s]:hover">
<span class="icon-[facebook] icon-size-[medium]"></span>
</a>
<a href="#" class="link-about">
<span class="icon-[twitter-logo] icon-size-[medium]"></span>
</a>
<a href="#" class="link-about">
<span class="icon-[linkedin-logo] icon-size-[medium]"></span>
</a>
</div>
</div>
<div class="col-[12] md--col-[2] mb-[30px]">
<h5 class="font-weight-[600] mb-[20px] c-[ffffff]">Services</h5>
<ul class="list-style-[none] p-[0] m-[0]">
<li class="mb-[10px]">
<a href="#" class="link-footer---[c-[9ca3af]+text-dec-[none]] link-footer---[c-[ffffff]]:hover">Web Design</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Development</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Marketing</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Consulting</a>
</li>
</ul>
</div>
<div class="col-[12] md--col-[2] mb-[30px]">
<h5 class="font-weight-[600] mb-[20px] c-[ffffff]">Company</h5>
<ul class="list-style-[none] p-[0] m-[0]">
<li class="mb-[10px]">
<a href="#" class="link-footer">About</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Team</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Careers</a>
</li>
<li class="mb-[10px]">
<a href="#" class="link-footer">Blog</a>
</li>
</ul>
</div>
<div class="col-[12] md--col-[4] mb-[30px]">
<h5 class="font-weight-[600] mb-[20px] c-[ffffff]">Contact</h5>
<ul class="list-style-[none] p-[0] m-[0]">
<li class="contact-content---[mb-[15px]+d-[flex]+items-[center]+gap-[10px]+c-[9ca3af]]">
<span class="icon-[map-pin] icon-size-[small]"></span>
<span>123 Street Name, City, Country</span>
</li>
<li class="contact-content">
<span class="icon-[phone] icon-size-[small]"></span>
<span>+1 234 567 890</span>
</li>
<li class="contact-content">
<span class="icon-[envelope] icon-size-[small]"></span>
<span>contact@company.com</span>
</li>
</ul>
</div>
</div>
<div class="border-t-[1px_solid_374151] mt-[40px] pt-[30px] d-[flex] justify-content-[space-between] items-[center] flex-flow-[wrap] gap-[20px]">
<p class="c-[9ca3af] m-[0]">
© 2026 Company, Inc. All rights reserved.
</p>
<div class="d-[flex] gap-[20px]">
<a href="#" class="link-footer">Privacy Policy</a>
<a href="#" class="link-footer">Terms of Service</a>
</div>
</div>
</div>
</footer>Footer avec carte
Footer intégrant une carte et informations de contact :
<footer class="bg-[ffffff] py-[60px] border-t-[1px_solid_e5e7eb]">
<div class="col-[container]">
<div class="col-[row]">
<div class="col-[12] md--col-[6] mb-[30px]">
<h4 class="font-weight-[600] mb-[20px]">Visit Us</h4>
<div class="w-[100%] h-[300px] bg-[f3f4f6] rounded-[8px] d-[flex] items-[center] justify-[center]">
<span class="icon-[map-pin] icon-size-[large] c-[6b7280]"></span>
<span class="c-[6b7280]">Map Placeholder</span>
</div>
</div>
<div class="col-[12] md--col-[6] mb-[30px]">
<h4 class="font-weight-[600] mb-[20px]">Contact Information</h4>
<div class="mb-[20px]">
<h5 class="font-weight-[600] mb-[10px] c-[374151]">Address</h5>
<p class="c-[6b7280] m-[0]">123 Main Street<br>City, State 12345</p>
</div>
<div class="mb-[20px]">
<h5 class="font-weight-[600] mb-[10px] c-[374151]">Phone</h5>
<p class="c-[6b7280] m-[0]">+1 (555) 123-4567</p>
</div>
<div class="mb-[20px]">
<h5 class="font-weight-[600] mb-[10px] c-[374151]">Email</h5>
<p class="c-[6b7280] m-[0]">info@company.com</p>
</div>
<div class="mb-[20px]">
<h5 class="font-weight-[600] mb-[10px] c-[374151]">Hours</h5>
<p class="c-[6b7280] m-[0]">
Monday - Friday: 9:00 AM - 6:00 PM<br>
Saturday: 10:00 AM - 4:00 PM<br>
Sunday: Closed
</p>
</div>
</div>
</div>
</div>
</footer>Footer sticky (collé en bas)
Footer qui reste toujours en bas de page :
<div class="min-h-[100vh] d-[flex] flex-direction-[column]">
<main class="flex-[1]">
<div class="col-[container] py-[40px]">
<h1>Page Content</h1>
<p>Your content here...</p>
</div>
</main>
<footer class="bg-[f8f9fa] py-[30px] mt-[auto]">
<div class="col-[container]">
<div class="text-align-[center] c-[6c757d]">
© 2026 Company, Inc. All rights reserved.
</div>
</div>
</footer>
</div>Footer avec accordéon mobile
Footer qui se transforme en accordéon sur mobile :
<footer class="bg-[1f2937] c-[ffffff] py-[60px]">
<div class="col-[container]">
<div class="col-[row]">
<div class="col-[12] md--col-[3] mb-[20px]">
<details class="md--d-[block]">
<summary class="font-weight-[600] c-[ffffff] cursor-[pointer] mb-[20px] list-style-[none]">
Products
<span class="icon-[chevron-down] icon-size-[small] md--d-[none]"></span>
</summary>
<ul class="list-style-[none] p-[0] m-[0]">
<li class="mb-[10px]">
<a href="#" class="c-[9ca3af] text-dec-[none] c-[ffffff]:hover">Item 1</a>
</li>
<li class="mb-[10px]">
<a href="#" class="c-[9ca3af] text-dec-[none] c-[ffffff]:hover">Item 2</a>
</li>
</ul>
</details>
</div>
</div>
</div>
</footer>Responsive
Les footers s'adaptent automatiquement :
- Mobile < 768px : Colonnes empilées verticalement
- Tablette ≥ 768px : 2-3 colonnes
- Desktop ≥ 992px : Toutes les colonnes visibles