Demos: o-header

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
  <div class="o-header__row o-header__anon">
    <ul class="o-header__anon-list">
      <li class="o-header__anon-item">
        <a class="o-header__anon-link" href="#">Subscribe</a>
      </li>
      <li class="o-header__anon-item">
        <a class="o-header__anon-link" href="#">Sign In</a>
      </li>
    </ul>
  </div>

  <div class="o-header__row o-header__top">
    <div class="o-header__container">
      <div class="o-header__top-wrapper">
        <div class="o-header__top-column o-header__top-column--left">
          <a
            href="#o-header-drawer"
            class="o-header__top-link o-header__top-link--menu"
            aria-controls="o-header-drawer"
            title="Open side navigation menu"
          >
            <span class="o-header__top-link-label"
              >Open side navigation menu</span
            >
          </a>
        </div>
        <div class="o-header__top-column o-header__top-column--center">
          <a
            class="o-header__top-logo"
            href="/"
            title="Go to Financial Times homepage"
          >
            <span class="o-header__visually-hidden">Financial Times</span>
          </a>
        </div>
        <div class="o-header__top-column o-header__top-column--right">
          <a
            class="o-header__top-link o-header__top-link--myft"
            href="/myft"
            aria-label="My F T"
          >
            <span class="o-header__visually-hidden">myFT</span>
          </a>
        </div>
      </div>
    </div>
  </div>

  <!-- To support both core and enhanced, duplicating the search row is necessary to avoid it flashing in enhanced -->
  <!-- Pick only one of the two <div> if you don't need to support both core and enhanced -->
  <div
    id="o-header-search"
    class="o-header__row o-header__search o--if-no-js"
    role="search"
  >
    <div class="o-header__container">
      <form
        class="o-header__search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label class="o-header__visually-hidden" for="o-header-search-term"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__search-term"
          id="o-header-search-term"
          name="q"
          type="text"
          placeholder="Search the FT"
        />
        <button class="o-header__search-submit" type="submit">Search</button>
      </form>
    </div>
  </div>
  <div
    id="o-header-search-js"
    class="o-header__row o-header__search"
    role="search"
    data-o-header-search
  >
    <div class="o-header__container">
      <form
        class="o-header__search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label class="o-header__visually-hidden" for="o-header-search-term-js"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__search-term"
          id="o-header-search-term-js"
          name="q"
          type="text"
          placeholder="Search the FT"
        />
        <button class="o-header__search-submit" type="submit">Search</button>
        <button
          class="o-header__search-close o--if-js"
          type="button"
          aria-controls="o-header-search-js"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close search bar</span>
        </button>
      </form>
    </div>
  </div>

  <nav
    id="o-header-nav-mobile"
    class="o-header__row o-header__nav o-header__nav--mobile"
    role="navigation"
    aria-label="Main navigation"
  >
    <ul class="o-header__nav-list">
      <li class="o-header__nav-item">
        <a
          class="o-header__nav-link o-header__nav-link--primary"
          href
          aria-label="xxxx, current page"
          aria-current="page"
          >xxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxxx xxxx</a
        >
      </li>
    </ul>
  </nav>

  <nav
    id="o-header-nav-desktop"
    class="o-header__row o-header__nav o-header__nav--desktop"
    role="navigation"
    aria-label="Main navigation"
  >
    <div class="o-header__container">
      <ul class="o-header__nav-list o-header__nav-list--left">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            aria-label="xxxx, current page"
            aria-current="page"
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxx x xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxxxxxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >xxx xx xxxxx xx</a
          >
        </li>
      </ul>
      <ul class="o-header__nav-list o-header__nav-list--right">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://markets.ft.com/data/portfolio/dashboard"
            >Portfolio</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="https://myaccount.ft.com/details/core/view"
            >My Account</a
          >
        </li>
      </ul>
    </div>
  </nav>
</header>

<div
  class="o-header__drawer"
  id="o-header-drawer"
  role="navigation"
  aria-label="Drawer menu"
  data-o-header-drawer
  data-o-header-drawer--no-js
>
  <div class="o-header__drawer-inner">
    <div class="o-header__drawer-tools">
      <a class="o-header__drawer-tools-logo" href="/">
        <span class="o-header__visually-hidden">Financial Times</span>
      </a>
      <button
        type="button"
        class="o-header__drawer-tools-close"
        aria-controls="o-header-drawer"
        title="Close drawer menu"
      >
        <span class="o-header__visually-hidden">Close drawer menu</span>
      </button>
      <p class="o-header__drawer-current-edition">UK Edition</p>
    </div>

    <div class="o-header__drawer-search">
      <form
        class="o-header__drawer-search-form"
        action="/search"
        role="search"
        aria-label="Site search"
      >
        <label
          class="o-header__visually-hidden"
          for="o-header-drawer-search-term"
          >Search the <abbr title="Financial Times">FT</abbr></label
        >
        <input
          class="o-header__drawer-search-term"
          id="o-header-drawer-search-term"
          name="q"
          type="text"
          autocomplete="off"
          autocorrect="off"
          autocapitalize="off"
          spellcheck="false"
          placeholder="Search the FT"
        />
        <button class="o-header__drawer-search-submit" type="submit">
          <span class="o-header__visually-hidden">Search</span>
        </button>
      </form>
    </div>

    <nav class="o-header__drawer-menu" aria-label="Edition switcher">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item"></li>
        <a class="o-header__drawer-menu-link" href="/?edition=international"
          >Switch to International Edition</a
        >
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--primary">
      <ul class="o-header__drawer-menu-list">
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xxx xxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--selected"
            href="#"
            aria-label="xxxx, current page"
            aria-current="page"
            >xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more xxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-1"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx xxxx xxx xxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more xx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-2"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxx x xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more xxxxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-3"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx x xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-4"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx xxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-5"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx xxx xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more xxxx x xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-6"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxx xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx xxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxx x xxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more xxxx x xxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-7"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx x xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxx xx x xxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <div class="o-header__drawer-menu-toggle-wrapper">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link--parent o-header__drawer-menu-link--unselected"
              href="#"
              >xxxxxxxx xxxxxxx</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more xxxxxxxx xxxxxxx links
            </button>
          </div>
          <ul
            class="o-header__drawer-menu-list o-header__drawer-menu-list--child"
            id="o-header-drawer-child-8"
          >
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxx</a
              >
            </li>
            <li class="o-header__drawer-menu-item">
              <a
                class="o-header__drawer-menu-link o-header__drawer-menu-link--child o-header__drawer-menu-link--unselected"
                href="#"
                >xxxxxxxx x xxxxxxx</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx x xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          xx xxxxxxxxxx
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx xxxx xxx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxx xxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxxxx</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--divide"
        >
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xx xx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxxxx</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link--secondary o-header__drawer-menu-link--unselected"
            href="#"
            >xxxxxxx xxxxx</a
          >
        </li>
      </ul>
    </nav>

    <nav class="o-header__drawer-menu o-header__drawer-menu--user">
      <ul class="o-header__drawer-menu-list">
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link"
            href="/products?segID=400863&amp;segmentID=190b4443-dc03-bd53-e79b-b4b6fbd04e64"
            >Subscribe</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a class="o-header__drawer-menu-link" href="/login">Sign In</a>
        </li>
      </ul>
    </nav>
  </div>
</div>

<header class="o-header" data-o-component="o-header" data-o-header--no-js>
  <nav
    id="o-header-nav-mobile"
    class="o-header__row o-header__nav o-header__nav--mobile"
    role="navigation"
    aria-label="Main navigation"
  >
    <ul class="o-header__nav-list">
      <li class="o-header__nav-item">
        <a
          class="o-header__nav-link o-header__nav-link--primary"
          href
          aria-label="xxxx, current page"
          aria-current="page"
          >xxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxx</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >xxxxxxx xxxx</a
        >
      </li>
    </ul>
  </nav>

  <nav
    id="o-header-nav-desktop"
    class="o-header__row o-header__nav o-header__nav--desktop"
    role="navigation"
    aria-label="Main navigation"
  >
    <div class="o-header__container">
      <ul class="o-header__nav-list o-header__nav-list--left">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            aria-label="xxxx, current page"
            aria-current="page"
            id="o-header-link-0"
            >xxxx</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-1"
            aria-controls="o-header-mega-1"
            >xxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-1"
            role="group"
            aria-labelledby="o-header-link-1"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxx xxxx xxx xxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxxx xxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxx x xxxxxxxxxxx
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-2"
            aria-controls="o-header-mega-2"
            >xx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-2"
            role="group"
            aria-labelledby="o-header-link-2"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xx xxxxxxxx x xxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx xxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-3"
            aria-controls="o-header-mega-3"
            >xxxxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-3"
            role="group"
            aria-labelledby="o-header-link-3"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxx x xxxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-4"
            aria-controls="o-header-mega-4"
            >xxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-4"
            role="group"
            aria-labelledby="o-header-link-4"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxx xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxx xxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-5"
            aria-controls="o-header-mega-5"
            >xxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-5"
            role="group"
            aria-labelledby="o-header-link-5"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xx xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx xxx xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-6"
            aria-controls="o-header-mega-6"
            >xxxx x xxxxxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-6"
            role="group"
            aria-labelledby="o-header-link-6"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxx xxxx x xxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxxx xxxxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxxxxxxxxxxxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx xxxxx </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-7"
            aria-controls="o-header-mega-7"
            >xxxx x xxxx</a
          >
          <div
            class="o-header__mega"
            id="o-header-mega-7"
            role="group"
            aria-labelledby="o-header-link-7"
            data-o-header-mega
          >
            <div class="o-header__container">
              <div class="o-header__mega-wrapper">
                <div
                  class="o-header__mega-column o-header__mega-column--subsections"
                >
                  <div class="o-header__mega-heading">Sub-sections</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxx xxxx x xxxx
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx x xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxx x xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> xxxxx </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          xxxxx xx x xxxxx
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
                <div
                  class="o-header__mega-column o-header__mega-column--articles"
                >
                  <div class="o-header__mega-heading">Top Stories</div>
                  <div class="o-header__mega-content">
                    <ul class="o-header__mega-list">
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          The UK expats voting for Brexit no matter what the
                          cost
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Lunch with the FT: Adair Turner
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          English carpenter who makes beehives that sell across
                          the world
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          French ambassador urges UK to help shape a
                          &#x2018;reformed Europe&#x2019;
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Where do politicians live? How MPs across the world
                          find city digs
                        </a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <ul class="o-header__nav-list o-header__nav-list--right">
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--utility"
            href="/login"
            >Sign In</a
          >
        </li>
        <li class="o-header__nav-item">
          <a class="o-header__nav-button" href="/products">Subscribe</a>
        </li>
      </ul>
    </div>
  </nav>
</header>