Footer

Multi-Column Footer with Social Links

<footer>
				<!-- Multi-column layout using CSS Grid -->
				<div>
				<!-- Brand Section -->
				<div>
				<a href="#">Brand Logo</a>
				<p>Tagline here</p>
				</div>

				<!-- Product Links -->
				<div>
				<h4>Product</h4>
				<ul>
				<li><a href="#">Components</a></li>
				<li><a href="#">Documentation</a></li>
				</ul>
				</div>
				</div>

				<!-- Divider -->
				<div>
				<p>&copy; 2024 Company</p>
				<div>
				<a href="#" aria-label="Social">
				<span class="axicon render" data-name="GitHub"></span>
				</a>
				</div>
				</div>
				</footer>

Simple Footer

<footer>
				<div>
				<p>&copy; 2024 Company</p>
				<div>
				<a href="#" aria-label="GitHub">
				<span class="axicon render" data-name="GitHub"></span>
				</a>
				</div>
				</div>
				</footer>

Structure

• `
• CSS Grid - Multi-column layout for link groups
• Simple `
  ` lists - No special classes, just semantic lists
  • `

    ` headings - Column titles with proper hierarchy

  • Flex layout - Bottom section with copyright and social
  • Design tokens only - All styling uses var(--a-*)

Key Features

• Semantic HTML - Uses native `
• No Custom Classes - Only semantic elements and design tokens
• Responsive Grid - CSS Grid with auto-fit for mobile
• Social Icons - Axicons with proper ARIA labels
• Brand Section - Logo and tagline with proper styling
• Organized Links - Grouped by category using semantic lists
• Copyright & Social - Proper bottom section with flex layout

Sections

• Brand - Logo, company name, tagline
• Link Columns - Product, Community, Legal, Resources, etc.
• Divider - Visual separator (border-top)
• Copyright - © notice with year
• Social - Links to social media platforms

Accessibility

• Use semantic `
• Provide descriptive link text
• Include `aria-label` for social media icons
• Proper heading hierarchy (h4 for column titles)
• Sufficient color contrast on all text
• Keyboard navigable links and buttons

Responsive Behavior

This component automatically adapts to different screen sizes:

Mobile (< 768px)

On mobile devices:

• Optimized for small screens
• Touch-friendly spacing maintained (44px minimum)
• Text wraps naturally without overflow
• Content density optimized for readability

Desktop (1024px+)

On desktop displays:

• Enhanced visual features
• Hover states and transitions
• Full keyboard navigation support
• Optimal spacing and sizing

Framework Integration

• Framework handles media queries
• No custom CSS required
• Mobile-first approach applied
• Accessibility maintained at all sizes

Best Practices

• Match header branding and style
• Group related links logically
• Responsive grid layout (auto-fit minmax)
• Use Axicons for social media
• Include privacy and legal links
• Keep footer text concise and clear
• Use design tokens for all values