Documentation
Documentation - Footer.
Discover Marssel: an intelligent, minimal configuration CSS framework designed for fast interfaces and a simplified developer experience.
Startup
Basic concepts
Utilities
Footer
Marssel makes it easy to create personalized and responsive footers to structure footer information, useful links, registration forms and social networks.
Multi-column footer with newsletter
Complete footer with several sections and registration form:
<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
The footers adapt automatically:
- Mobile < 768px: Columns stacked vertically
- Tablet ≥ 768px: 2-3 columns
- Desktop ≥ 992px: All columns visible