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 govuk-width-container">
    <div class="fcdo-header__logo">
      <a href="/" class="fcdo-header__link">
        <img src="/assets/images/fcdo-logo.svg" alt="Foreign, Commonwealth & Development Office" class="fcdo-header__logotype" />
      </a>
    </div>
  </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.