Origami Frontend Components & Services

Demos: o-header

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 drawer menu"
          >
            <span class="o-header__top-link-label">Menu</span>
          </a>
          <a
            href="#o-header-search"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search-js"
            title="Open search bar"
          >
            <span class="o-header__top-link-label">Search</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</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="Current page"
          aria-current="page"
          >Home</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >FastFT</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >Markets Data</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="Current page"
            aria-current="page"
            id="o-header-link-"
            >Home</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >World</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >UK</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Companies</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Markets</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Opinion</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Work &amp; Careers</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Life &amp; Arts</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="/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>

<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</span>
      </button>
    </div>

    <nav class="o-header__drawer-editions" aria-label="Edition switcher">
      <a
        class="o-header__drawer-editions-link"
        href="/uk?edition=uk"
        aria-label="Current edition"
        aria-current="page"
        >UK Edition</a
      >
      <a
        class="o-header__drawer-editions-link"
        href="/international?edition=international"
        >International Edition</a
      >
    </nav>

    <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 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"
        >
          Top sections
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--selected"
            href="#"
            aria-label="Current page"
            aria-current="page"
            >Home</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="#"
              >World</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more World 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="#"
                >World Economy</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="#"
                >UK</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="#"
                >US</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="#"
                >China</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="#"
                >Africa</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="#"
                >Asia Pacific</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="#"
                >Emerging Markets</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="#"
                >Europe</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="#"
                >Latin America</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="#"
                >Middle East and Africa</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="#"
              >UK</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more UK 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="#"
                >UK Economy</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="#"
                >UK Politics &amp; Policy</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="#"
                >UK Companies</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="#"
              >Companies</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more Companies 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="#"
                >Energy</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="#"
                >Financials</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="#"
                >Health</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="#"
                >Industrials</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="#"
                >Media</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="#"
                >Retail &amp; Consumer</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="#"
                >Technology</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="#"
                >Telecoms</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="#"
                >Transport</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="#"
              >Markets</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more Markets 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="#"
                >Alphaville</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="#"
                >Markets Data</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="#"
                >Capital Markets</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="#"
                >Commodities</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="#"
                >Currencies</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="#"
                >Equities</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="#"
                >Fund Management</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="#"
                >Trading</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="#"
              >Opinion</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more Opinion 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="#"
                >Columnists</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="#"
                >FT View</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="#"
                >The Big Read</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="#"
                >Lex</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="#"
                >Alphaville</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="#"
                >Obituaries</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="#"
                >Letters</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="#"
              >Work &amp; Careers</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more Work &amp; Careers 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="#"
                >Business School Rankings</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="#"
                >Business Education</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="#"
                >Entrepreneurship</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="#"
                >Recruitment</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="#"
                >Business Books</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="#"
              >Life &amp; Arts</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more Life &amp; Arts 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="#"
                >House &amp; Home</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="#"
                >Books</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="#"
                >Food &amp; Drink</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="#"
                >Travel</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="#"
                >Style</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="#"
                >Arts</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="#"
                >Sports</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="#"
                >Music</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="#"
                >Film, TV &amp; Radio</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="#"
                >Magazine</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="#"
              >Personal Finance</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more Personal Finance 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="#"
                >Property &amp; Mortgages</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="#"
                >Investments</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="#"
                >Pensions</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="#"
                >Tax</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="#"
                >Bankings &amp; Savings</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Science &amp; Environment</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          FT recommends
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lex</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Alphaville</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lunch with the FT</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Video</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Special Reports</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >News feed</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Newsletters</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="#"
            >My FT</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="#"
            >Portfolio</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="#"
            >Today&apos;s Paper</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>

Mega menu

<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="Current page"
          aria-current="page"
          >Home</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >FastFT</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >Markets Data</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="Current page"
            aria-current="page"
            id="o-header-link-0"
            >Home</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"
            >World</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> All World </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> World Economy </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> US </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Europe </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Latin America </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Asia Pacific </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Africa </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Middle East and Africa
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Emerging Markets
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Science &amp; Environment
                        </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"
            >UK</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> All UK </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          UK Politics &amp; Policy
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> UK Economy </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> England </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Scotland </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Wales </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> N. Ireland </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"
            >Companies</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> All Companies </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Technology </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Financials </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Energy </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Retail &amp; Consumer
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Industrials </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Telecoms </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Health </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Media </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Transport </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"
            >Markets</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> All Markets </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Markets Data </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Commodities </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Currencies </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Equities </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Capital Markets
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Trading </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"
            >Opinion</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> All Opinion </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> FT View </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> The Big Read </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Lex </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Columnists </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"
            >Work &amp; Careers</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>
                          All Work &amp; Career
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Business Education
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Management </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Entrepreneurship
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Recruitment </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Business Books </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"
            >Life &amp; Arts</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>
                          All Life &amp; Arts
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Magazine </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          House &amp; Home
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Books </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Food &amp; Drink
                        </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Travel </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Style </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Arts </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Sports </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href> Music </a>
                      </li>
                      <li class="o-header__mega-item">
                        <a class="o-header__mega-link" href>
                          Film, TV &amp; Radio
                        </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>

Header with subnav

<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>Home</a>
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >FastFT</a
        >
      </li>
      <li class="o-header__nav-item">
        <a class="o-header__nav-link o-header__nav-link--primary" href
          >Markets Data</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
            id="o-header-link-"
            >Home</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >World</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >UK</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Companies</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Markets</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Opinion</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Work &amp; Careers</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Life &amp; Arts</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="/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>

  <div
    class="o-header__subnav"
    role="navigation"
    aria-label="Sub navigation"
    data-o-header-subnav
  >
    <div class="o-header__container">
      <div class="o-header__subnav-wrap-outside">
        <div class="o-header__subnav-wrap-inside" data-o-header-subnav-wrapper>
          <div class="o-header__subnav-content">
            <ol
              class="o-header__subnav-list o-header__subnav-list--breadcrumb"
              aria-label="Breadcrumb"
            >
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> World </a>
              </li>
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href> US &amp; Canada </a>
              </li>
            </ol>

            <ul
              class="o-header__subnav-list o-header__subnav-list--children"
              aria-label="Subsections"
            >
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> US Economy </a>
              </li>
              <li class="o-header__subnav-item">
                <a
                  class="o-header__subnav-link"
                  href="#"
                  aria-current="page"
                  aria-label="Current page"
                >
                  US Politics &amp; Policy
                </a>
              </li>
              <li class="o-header__subnav-item">
                <a class="o-header__subnav-link" href="#"> US Companies </a>
              </li>
            </ul>
          </div>
        </div>
        <button
          class="o-header__subnav-button o-header__subnav-button--left"
          aria-hidden="true"
          disabled
        ></button>
        <button
          class="o-header__subnav-button o-header__subnav-button--right"
          aria-hidden="true"
          disabled
        ></button>
      </div>
    </div>
  </div>
</header>

Simple header

<header
  class="o-header o-header--simple"
  data-o-component="o-header"
  data-o-header--no-js
>
  <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 drawer menu"
          >
            <span class="o-header__top-link-label">Menu</span>
          </a>
          <a
            href="#o-header-search"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search"
            title="Open search bar"
          >
            <span class="o-header__top-link-label">Search</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--center">
          <!--<div class="o-header__top-takeover"></div>-->
          <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">
          <!--<div class="o-header__top-takeover"></div>-->
          <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>

  <div
    id="o-header-search"
    class="o-header__row o-header__search o--if-js"
    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"
          type="button"
          aria-controls="o-header-search"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close</span>
        </button>
      </form>
    </div>
  </div>
</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</span>
      </button>
    </div>

    <nav class="o-header__drawer-editions" aria-label="Edition switcher">
      <a
        class="o-header__drawer-editions-link"
        href="/uk?edition=uk"
        aria-label="Current edition"
        aria-current="page"
        >UK Edition</a
      >
      <a
        class="o-header__drawer-editions-link"
        href="/international?edition=international"
        >International Edition</a
      >
    </nav>

    <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 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"
        >
          Top sections
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--selected"
            href="#"
            aria-label="Current page"
            aria-current="page"
            >Home</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="#"
              >World</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more World 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="#"
                >World Economy</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="#"
                >UK</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="#"
                >US</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="#"
                >China</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="#"
                >Africa</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="#"
                >Asia Pacific</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="#"
                >Emerging Markets</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="#"
                >Europe</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="#"
                >Latin America</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="#"
                >Middle East and Africa</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="#"
              >UK</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more UK 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="#"
                >UK Economy</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="#"
                >UK Politics &amp; Policy</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="#"
                >UK Companies</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="#"
              >Companies</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more Companies 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="#"
                >Energy</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="#"
                >Financials</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="#"
                >Health</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="#"
                >Industrials</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="#"
                >Media</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="#"
                >Retail &amp; Consumer</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="#"
                >Technology</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="#"
                >Telecoms</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="#"
                >Transport</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="#"
              >Markets</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more Markets 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="#"
                >Alphaville</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="#"
                >Markets Data</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="#"
                >Capital Markets</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="#"
                >Commodities</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="#"
                >Currencies</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="#"
                >Equities</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="#"
                >Fund Management</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="#"
                >Trading</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="#"
              >Opinion</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more Opinion 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="#"
                >Columnists</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="#"
                >FT View</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="#"
                >The Big Read</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="#"
                >Lex</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="#"
                >Alphaville</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="#"
                >Obituaries</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="#"
                >Letters</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="#"
              >Work &amp; Careers</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more Work &amp; Careers 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="#"
                >Business School Rankings</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="#"
                >Business Education</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="#"
                >Entrepreneurship</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="#"
                >Recruitment</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="#"
                >Business Books</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="#"
              >Life &amp; Arts</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more Life &amp; Arts 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="#"
                >House &amp; Home</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="#"
                >Books</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="#"
                >Food &amp; Drink</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="#"
                >Travel</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="#"
                >Style</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="#"
                >Arts</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="#"
                >Sports</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="#"
                >Music</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="#"
                >Film, TV &amp; Radio</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="#"
                >Magazine</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="#"
              >Personal Finance</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more Personal Finance 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="#"
                >Property &amp; Mortgages</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="#"
                >Investments</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="#"
                >Pensions</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="#"
                >Tax</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="#"
                >Bankings &amp; Savings</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Science &amp; Environment</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          FT recommends
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lex</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Alphaville</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lunch with the FT</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Video</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Special Reports</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >News feed</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Newsletters</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="#"
            >My FT</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="#"
            >Portfolio</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="#"
            >Today&apos;s Paper</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>

Transparent header

<header
  class="o-header o-header--simple o-header--transparent"
  data-o-component="o-header"
  data-o-header--no-js
>
  <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 drawer menu"
          >
            <span class="o-header__top-link-label">Menu</span>
          </a>
          <a
            href="#o-header-search"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search"
            title="Open search bar"
          >
            <span class="o-header__top-link-label">Search</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--center">
          <!--<div class="o-header__top-takeover"></div>-->
          <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">
          <!--<div class="o-header__top-takeover"></div>-->
          <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>

  <div
    id="o-header-search"
    class="o-header__row o-header__search o--if-js"
    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"
          type="button"
          aria-controls="o-header-search"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close</span>
        </button>
      </form>
    </div>
  </div>

  <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="Current page"
            aria-current="page"
            id="o-header-link-"
            >Home</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >World</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >UK</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Companies</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Markets</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Opinion</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Work &amp; Careers</a
          >
        </li>
        <li class="o-header__nav-item">
          <a
            class="o-header__nav-link o-header__nav-link--primary"
            href
            id="o-header-link-"
            >Life &amp; Arts</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="/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>

<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</span>
      </button>
    </div>

    <nav class="o-header__drawer-editions" aria-label="Edition switcher">
      <a
        class="o-header__drawer-editions-link"
        href="/uk?edition=uk"
        aria-label="Current edition"
        aria-current="page"
        >UK Edition</a
      >
      <a
        class="o-header__drawer-editions-link"
        href="/international?edition=international"
        >International Edition</a
      >
    </nav>

    <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 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"
        >
          Top sections
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--selected"
            href="#"
            aria-label="Current page"
            aria-current="page"
            >Home</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="#"
              >World</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more World 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="#"
                >World Economy</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="#"
                >UK</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="#"
                >US</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="#"
                >China</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="#"
                >Africa</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="#"
                >Asia Pacific</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="#"
                >Emerging Markets</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="#"
                >Europe</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="#"
                >Latin America</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="#"
                >Middle East and Africa</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="#"
              >UK</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more UK 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="#"
                >UK Economy</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="#"
                >UK Politics &amp; Policy</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="#"
                >UK Companies</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="#"
              >Companies</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more Companies 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="#"
                >Energy</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="#"
                >Financials</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="#"
                >Health</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="#"
                >Industrials</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="#"
                >Media</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="#"
                >Retail &amp; Consumer</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="#"
                >Technology</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="#"
                >Telecoms</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="#"
                >Transport</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="#"
              >Markets</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more Markets 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="#"
                >Alphaville</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="#"
                >Markets Data</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="#"
                >Capital Markets</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="#"
                >Commodities</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="#"
                >Currencies</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="#"
                >Equities</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="#"
                >Fund Management</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="#"
                >Trading</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="#"
              >Opinion</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more Opinion 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="#"
                >Columnists</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="#"
                >FT View</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="#"
                >The Big Read</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="#"
                >Lex</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="#"
                >Alphaville</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="#"
                >Obituaries</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="#"
                >Letters</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="#"
              >Work &amp; Careers</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more Work &amp; Careers 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="#"
                >Business School Rankings</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="#"
                >Business Education</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="#"
                >Entrepreneurship</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="#"
                >Recruitment</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="#"
                >Business Books</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="#"
              >Life &amp; Arts</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more Life &amp; Arts 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="#"
                >House &amp; Home</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="#"
                >Books</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="#"
                >Food &amp; Drink</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="#"
                >Travel</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="#"
                >Style</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="#"
                >Arts</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="#"
                >Sports</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="#"
                >Music</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="#"
                >Film, TV &amp; Radio</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="#"
                >Magazine</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="#"
              >Personal Finance</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more Personal Finance 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="#"
                >Property &amp; Mortgages</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="#"
                >Investments</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="#"
                >Pensions</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="#"
                >Tax</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="#"
                >Bankings &amp; Savings</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Science &amp; Environment</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          FT recommends
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lex</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Alphaville</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lunch with the FT</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Video</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Special Reports</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >News feed</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Newsletters</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="#"
            >My FT</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="#"
            >Portfolio</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="#"
            >Today&apos;s Paper</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>

Sticky header

Sticky variation of the simple header

<header
  class="o-header o-header--simple o-header--sticky o--if-js"
  aria-hidden="true"
  role="presentation"
  data-o-component="o-header"
  data-o-header--sticky
>
  <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"
            tabindex="-1"
          >
            <span class="o-header__top-link-label">Menu</span>
          </a>
          <a
            href="#o-header-search-sticky"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search-sticky"
            tabindex="-1"
          >
            <span class="o-header__top-link-label">Search</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--center">
          <!-- takeover content will show at the L breakpoint and hide all following siblings -->
          <div class="o-header__top-takeover">
            <div class="o-header__nav">
              <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="Current page"
                    aria-current="page"
                    tabindex="-1"
                    >Home</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >World</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >UK</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >Companies</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >Markets</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >Opinion</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >Work &amp; Careers</a
                  >
                </li>
                <li class="o-header__nav-item">
                  <a
                    class="o-header__nav-link o-header__nav-link--primary"
                    href
                    tabindex="-1"
                    >Life &amp; Arts</a
                  >
                </li>
              </ul>
            </div>
          </div>

          <a
            class="o-header__top-logo"
            href="/"
            title="Go to Financial Times homepage"
            tabindex="-1"
          >
            <span class="o-header__visually-hidden">Financial Times</span>
          </a>
        </div>

        <div class="o-header__top-column o-header__top-column--right">
          <div class="o-header__nav">
            <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"
                  tabindex="-1"
                  >Sign In</a
                >
              </li>
              <li class="o-header__nav-item o-header__nav-item--expanded">
                <a class="o-header__nav-button" href="/products" tabindex="-1"
                  >Subscribe</a
                >
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div
    id="o-header-search-sticky"
    class="o-header__row o-header__search o--if-js"
    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"
          type="button"
          aria-controls="o-header-search-sticky"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close</span>
        </button>
      </form>
    </div>
  </div>
</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</span>
      </button>
    </div>

    <nav class="o-header__drawer-editions" aria-label="Edition switcher">
      <a
        class="o-header__drawer-editions-link"
        href="/uk?edition=uk"
        aria-label="Current edition"
        aria-current="page"
        >UK Edition</a
      >
      <a
        class="o-header__drawer-editions-link"
        href="/international?edition=international"
        >International Edition</a
      >
    </nav>

    <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 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"
        >
          Top sections
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--selected"
            href="#"
            aria-label="Current page"
            aria-current="page"
            >Home</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="#"
              >World</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-1"
            >
              Show more World 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="#"
                >World Economy</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="#"
                >UK</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="#"
                >US</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="#"
                >China</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="#"
                >Africa</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="#"
                >Asia Pacific</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="#"
                >Emerging Markets</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="#"
                >Europe</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="#"
                >Latin America</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="#"
                >Middle East and Africa</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="#"
              >UK</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-2"
            >
              Show more UK 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="#"
                >UK Economy</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="#"
                >UK Politics &amp; Policy</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="#"
                >UK Companies</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="#"
              >Companies</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-3"
            >
              Show more Companies 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="#"
                >Energy</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="#"
                >Financials</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="#"
                >Health</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="#"
                >Industrials</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="#"
                >Media</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="#"
                >Retail &amp; Consumer</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="#"
                >Technology</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="#"
                >Telecoms</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="#"
                >Transport</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="#"
              >Markets</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-4"
            >
              Show more Markets 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="#"
                >Alphaville</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="#"
                >Markets Data</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="#"
                >Capital Markets</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="#"
                >Commodities</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="#"
                >Currencies</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="#"
                >Equities</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="#"
                >Fund Management</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="#"
                >Trading</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="#"
              >Opinion</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-5"
            >
              Show more Opinion 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="#"
                >Columnists</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="#"
                >FT View</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="#"
                >The Big Read</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="#"
                >Lex</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="#"
                >Alphaville</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="#"
                >Obituaries</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="#"
                >Letters</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="#"
              >Work &amp; Careers</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-6"
            >
              Show more Work &amp; Careers 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="#"
                >Business School Rankings</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="#"
                >Business Education</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="#"
                >Entrepreneurship</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="#"
                >Recruitment</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="#"
                >Business Books</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="#"
              >Life &amp; Arts</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-7"
            >
              Show more Life &amp; Arts 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="#"
                >House &amp; Home</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="#"
                >Books</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="#"
                >Food &amp; Drink</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="#"
                >Travel</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="#"
                >Style</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="#"
                >Arts</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="#"
                >Sports</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="#"
                >Music</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="#"
                >Film, TV &amp; Radio</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="#"
                >Magazine</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="#"
              >Personal Finance</a
            >
            <button
              class="o-header__drawer-menu-toggle o-header__drawer-menu-toggle--unselected"
              aria-controls="o-header-drawer-child-8"
            >
              Show more Personal Finance 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="#"
                >Property &amp; Mortgages</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="#"
                >Investments</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="#"
                >Pensions</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="#"
                >Tax</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="#"
                >Bankings &amp; Savings</a
              >
            </li>
          </ul>
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Science &amp; Environment</a
          >
        </li>
        <li
          class="o-header__drawer-menu-item o-header__drawer-menu-item--heading"
        >
          FT recommends
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lex</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Alphaville</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Lunch with the FT</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Video</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Special Reports</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >News feed</a
          >
        </li>
        <li class="o-header__drawer-menu-item">
          <a
            class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--unselected"
            href="#"
            >Newsletters</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="#"
            >My FT</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="#"
            >Portfolio</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="#"
            >Today&apos;s Paper</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>

Subbranded header

For Subbrands of the FT, eg Alphaville or Life&Arts, a subheader can be added to mark out their subbrandness.

<header
  class="o-header o-header--simple"
  data-o-component="o-header"
  data-o-header--no-js
>
  <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 drawer menu"
          >
            <span class="o-header__top-link-label">Menu</span>
          </a>
          <a
            href="#o-header-search"
            class="o-header__top-link o-header__top-link--search"
            aria-controls="o-header-search"
            title="Open search bar"
          >
            <span class="o-header__top-link-label">Search</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>

  <div
    id="o-header-search"
    class="o-header__row o-header__search o--if-js"
    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"
          type="button"
          aria-controls="o-header-search"
          title="Close search bar"
        >
          <span class="o-header__visually-hidden">Close</span>
        </button>
      </form>
    </div>
  </div>

  <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</span>
        </button>
      </div>

      <nav class="o-header__drawer-editions" aria-label="Edition switcher">
        <a
          class="o-header__drawer-editions-link"
          href="/uk?edition=uk"
          aria-label="Current edition"
          aria-current="page"
          >UK Edition</a
        >
        <a
          class="o-header__drawer-editions-link"
          href="/international?edition=international"
          >International Edition</a
        >
      </nav>

      <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 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"
          >
            Top sections
          </li>
          <li class="o-header__drawer-menu-item">
            <a
              class="o-header__drawer-menu-link o-header__drawer-menu-link-- o-header__drawer-menu-link--selected"
              href="#"
              aria-label="Current page"
              aria-current="page"
              >Home</a
            >