Footers

The footer provides secondary navigation, legal information, and reinforces the government identity at the bottom of every page.

Footer Structure

Government website footers consist of three sections:

1. Main footer - Logo, description, and link columns
2. Meta section - Support links and social media
3. Bottom bar - Copyright notice

Main Footer

The main footer area contains the government branding on the left and organised link columns on the right. It has a 4px Kaharagian Red top border.

Principality of KaharagiaOfficial Government Website

The Principality of Kaharagia is a modern sovereign principality founded on 16 July 2010. A nation formed by choice and conviction, united by shared values and a common purpose.

Government

• About Kaharagia
• Government Structure
• The Sovereign
• State Offices
• Honours & Awards

Nationality

• Nationality
• How to Apply
• Rights & Duties
• Community

Legal

• Constitution
• Laws & Decrees
• Official Gazette
• The ePortal

Connect

• News & Updates
• Contact Us
• Lifeblood Kaharagia
• Press Office

Meta Section

The meta section contains support links and social media icons. It has 1px borders top and bottom and uses a smaller vertical padding.

Bottom Bar

The bottom bar contains the copyright notice and uses a slightly darker background.

Design Specifications

Accessibility

• Footer wrapped in <footer> element
• Link columns have headings for structure
• Meta navigation wrapped in <nav> with aria-label="Support links"
• Social media links have aria-label for screen readers
• Social icons have aria-hidden="true"
• All links have visible focus states (gold background with dark text)
• External links open in new tabs with target="_blank" and rel="noopener noreferrer"

HTML Structure

<footer class="footer">
  <!-- Main Footer Section -->
  <div class="footer-main">
    <div class="container">
      <!-- Brand Section -->
      <div class="footer-brand">
        <div class="brand-content">
          <div class="logo-container">
            <img src="/crown_white.svg" alt="" aria-hidden="true" />
          </div>
          <div class="brand-text">
            <span class="brand-title">Principality of Kaharagia</span>
            <span class="brand-subtitle">Official Government Website</span>
          </div>
        </div>
        <p class="brand-description">
          The Principality of Kaharagia is a modern sovereign principality...
        </p>
      </div>

      <!-- Link Columns -->
      <div class="footer-links">
        <div class="link-column">
          <h3 class="column-title">Government</h4>
          <ul class="link-list">
            <li><a href="/about">About Kaharagia</a></li>
            <!-- ... more links -->
          </ul>
        </div>
        <!-- ... more columns: Nationality, Legal, Connect -->
      </div>
    </div>
  </div>

  <!-- Meta Section -->
  <div class="footer-meta">
    <div class="container">
      <div class="meta-content">
        <nav aria-label="Support links">
          <ul class="meta-links">
            <li><a href="/help">Help</a></li>
            <li><a href="/privacy">Privacy Policy</a></li>
            <!-- ... more links -->
          </ul>
        </nav>
        <div class="social-links">
          <a href="..." class="social-link" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
            <svg aria-hidden="true"><!-- icon --></svg>
          </a>
          <!-- ... more social links -->
        </div>
      </div>
    </div>
  </div>

  <!-- Bottom Bar -->
  <div class="footer-bottom">
    <div class="container">
      <p class="copyright">
        Crown Copyright © 2025 Káhareži Fondazár | Published by Authority of H.R.H. The Prince of Kaharagia
      </p>
    </div>
  </div>
</footer>