Footer Component

Footer Component

Axiom01's footer component provides a structured and semantic way to display copyright information, navigation links, social media icons, and other essential site-wide content at the bottom of your web pages.

Standard Footer Example

Code Example

<footer class="main">
		 <div class="content">
				 <div class="brand">
						 <a href="#" class="logo">[Ax<span class="primary">01</span>]</a>
						 <p class="tagline">The Semantic Web, Reimagined.</p>
						 <div class="social">
								 <a href="#" aria-label="GitHub"><i class="fab fa-github"></i></a>
								 <a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
								 <a href="#" aria-label="LinkedIn"><i class="fab fa-linkedin"></i></a>
						 </div>
				 </div>
				 <div class="links">
						 <div class="column">
								 <h4>Products</h4>
								 <ul>
										 <li><a href="#">Features</a></li>
										 <li><a href="#">Pricing</a></li>
										 <li><a href="#">Integrations</a></li>
								 </ul>
						 </div>
						 <!-- More columns -->
				 </div>
		 </div>
		 <div class="bottom">
				 <p>&copy; 2025 Axiom01. All Rights Reserved.</p>
		 </div>
 </footer>

Usage Guidelines

The .main class provides the overall styling for the footer. Its content is typically structured using a .content div, which can contain branding information (.brand), navigation links organized into .columns, and social media links (.social).

The .bottom div is used for copyright and other legal information. The footer is designed to be responsive, adapting its layout on smaller screens.