FR | EN
Install
Documentation

Documentation - Footer.

Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.

Startup

Concepts de base

Utilitaires

Composants

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.

Multi-column footer with 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>

Simple footer with links

Minimalist footer with copyright and essential links: 

<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 with social networks

Centered footer with social media icons: 

<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 with full navigation

Detailed footer with several navigation sections: 

<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 with map

Footer integrating a map and contact information: 

<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 (glued at the bottom)

Footer which always remains at the bottom of the 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 with mobile accordion

Footer that turns into an accordion on 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: Columns stacked vertically
  • Tablet ≥ 768px: 2-3 columns
  • Desktop ≥ 992px: All columns visible

← Previous Header
Next → Dropdown

Cookie settings

Choose the data you want to share.

🙏 Analytics help us prioritize the right features — data in Switzerland, never resold.

Essentials Required

Necessary for operation (session, security).