Skip to main content
FCDO Design System
Components

Header

To be reviewed

Contents

FCDO Design System 
                    
<header class="fcdo-header" data-module="fcdo-header">
  <div class="fcdo-header__container">
    <div class="fcdo-header__logo"></div>
    <div class="fcdo-header__service-name">
      <a href="/" class="fcdo-header__link govuk-!-font-size-24">
        <span class="govuk-!-font-weight-bold">FCDO</span> Design System
      </a>
    </div>
    <button class="fcdo-header__toggle-nav" id="toggleNav" aria-expanded="false" aria-controls="nav">
      <span>Menu</span>
    </button>
  </div>
</header>

Component Information

The Header component serves as the primary navigation and branding element across all digital products in the FCDO ecosystem.

It provides a consistent, accessible, and responsive framework for users to identify the FCDO brand, navigate key sections, and access essential actions such as search, language selection, and user account controls.