Demos: o-header-services

Header with title section

If your site has no navigation you can use this top bar on its own.

Demo
HTML

<header class="o-header-services" data-o-component="o-header-services">
  <div class="o-header-services__top">
    <!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
    <div class="o-header-services__logo"></div>
    <div class="o-header-services__title">
      <a class="o-header-services__product-name" href="/"
        >Tool or Service name</a
      >
      <span class="o-header-services__product-tagline"
        >Tagline to explain the product here</span
      >
    </div>
    <ul class="o-header-services__related-content">
      <li>
        <a href>XXXX</a>
      </li>
      <li>
        <a href>Sign in</a>
      </li>
    </ul>
  </div>
</header>

<div class="dummy-text">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie
    eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna
    posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a
    lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris
    at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor
    felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit
    amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel
    pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et,
    lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor.
    Vivamus vehicula dictum ipsum, a porta ex fermentum in.
  </p>
  <p>
    Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae.
    Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non
    ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam
    euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque
    id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan
    nisl.
  </p>
</div>

Header with primary navigation

Navigation for an overview of a product's pages. These nav items collapse into a drawer at narrow screen widths.

Demo
HTML

Open demo in a new tab

<header class="o-header-services" data-o-component="o-header-services">
  <div class="o-header-services__top">
    <!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
    <div class="o-header-services__hamburger">
      <a
        class="o-header-services__hamburger-icon"
        href="#core-nav-fallback"
        role="button"
      >
        <span class="o-header-services__visually-hidden"
          >Open primary navigation</span
        >
      </a>
    </div>
    <div class="o-header-services__logo"></div>
    <div class="o-header-services__title">
      <a class="o-header-services__product-name" href="/"
        >Tool or Service name</a
      >
      <span class="o-header-services__product-tagline"
        >Tagline to explain the product here</span
      >
    </div>
    <ul class="o-header-services__related-content">
      <li>
        <a href>XXXX</a>
      </li>
      <li>
        <a href>Sign in</a>
      </li>
    </ul>
  </div>

  <nav class="o-header-services__primary-nav" aria-label="primary">
    <ul class="o-header-services__primary-nav-list">
      <li>
        <a aria-current="page" href>Docs</a>
      </li>
      <li>
        <a href>Specs</a>
      </li>
      <li>
        <a href="#">Registry</a>
      </li>
    </ul>
  </nav>
</header>

<div class="dummy-text">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie
    eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna
    posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a
    lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris
    at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor
    felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit
    amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel
    pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et,
    lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor.
    Vivamus vehicula dictum ipsum, a porta ex fermentum in.
  </p>
  <p>
    Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae.
    Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non
    ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam
    euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque
    id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan
    nisl.
  </p>
</div>

Header with primary navigation and drop down menus

Navigation for an overview of a product's pages. These nav items collapse into a drawer at narrow screen widths, and can be presented as dropdown menus

Demo
HTML

Open demo in a new tab

<header class="o-header-services" data-o-component="o-header-services">
  <div class="o-header-services__top">
    <!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
    <div class="o-header-services__hamburger">
      <a
        class="o-header-services__hamburger-icon"
        href="#core-nav-fallback"
        role="button"
      >
        <span class="o-header-services__visually-hidden"
          >Open primary navigation</span
        >
      </a>
    </div>
    <div class="o-header-services__logo"></div>
    <div class="o-header-services__title">
      <a class="o-header-services__product-name" href="/"
        >Tool or Service name</a
      >
      <span class="o-header-services__product-tagline"
        >Tagline to explain the product here</span
      >
    </div>
    <ul class="o-header-services__related-content">
      <li>
        <a href>XXXX</a>
      </li>
      <li>
        <a href>Sign in</a>
      </li>
    </ul>
  </div>

  <nav class="o-header-services__primary-nav" aria-label="primary">
    <ul class="o-header-services__primary-nav-list">
      <li data-o-header-services-level="1">
        <a href>Docs</a
        ><!--
				--><button
          class="o-header-services__drop-down-button"
          type="button"
          name="button"
          aria-label="Toggle dropdown menu"
        ></button>
        <ul data-o-header-services-level="2" aria-hidden="true">
          <li>
            <a href>Principles</a>
          </li>
          <li>
            <a href>Components</a>
          </li>
          <li>
            <a href>Services</a>
          </li>
          <li>
            <a aria-current="page" href>Tutorials</a>
          </li>
          <li>
            <button
              class="o-header-services__visually-hidden"
              type="button"
              name="button"
            >
              Close dropdown menu
            </button>
          </li>
        </ul>
      </li>
      <li data-o-header-services-level="1">
        <a href>Specs</a
        ><!--
				--><button
          class="o-header-services__drop-down-button"
          type="button"
          name="button"
          aria-label="Toggle dropdown menu"
        ></button>
        <ul data-o-header-services-level="2" aria-hidden="true">
          <li>
            <a href>Condensed Spec</a>
          </li>
          <li>
            <a href>Formal Spec</a>
          </li>
          <li>
            <a href>Components</a>
          </li>
          <li>
            <a href>Services</a>
          </li>
          <li>
            <a href>Manifest</a>
          </li>
          <li>
            <button
              class="o-header-services__visually-hidden"
              type="button"
              name="button"
            >
              Close dropdown menu
            </button>
          </li>
        </ul>
      </li>
      <li>
        <a href="#">Registry</a>
      </li>
    </ul>
  </nav>

  <nav
    class="o-header-services__secondary-nav"
    aria-label="secondary"
    data-o-header-services-nav
  >
    <div
      class="o-header-services__secondary-nav-content"
      data-o-header-services-nav-list
    >
      <ol
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors"
        aria-label="Ancestor sections"
      >
        <li>
          <a href>Documentation</a>
        </li>
        <li>
          <a href>Tutorials</a>
        </li>
      </ol>

      <ul
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children"
        aria-label="Child sections"
      >
        <li>
          <a href>Build Service</a>
        </li>
        <li>
          <a aria-current="page" href>The manual build process</a>
        </li>
      </ul>
    </div>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--left"
      title="scroll left"
      aria-hidden="true"
      disabled
    ></button>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--right"
      title="scroll right"
      aria-hidden="true"
      disabled
    ></button>
  </nav>
</header>

<div class="dummy-text">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie
    eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna
    posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a
    lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris
    at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor
    felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit
    amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel
    pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et,
    lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor.
    Vivamus vehicula dictum ipsum, a porta ex fermentum in.
  </p>
  <p>
    Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae.
    Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non
    ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam
    euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque
    id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan
    nisl.
  </p>
</div>

Header with a primary and a secondary navigation

For sites with more than a few sections, a secondary navigation is also available

Demo
HTML

Open demo in a new tab

<header class="o-header-services" data-o-component="o-header-services">
  <div class="o-header-services__top">
    <!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
    <div class="o-header-services__hamburger">
      <a
        class="o-header-services__hamburger-icon"
        href="#core-nav-fallback"
        role="button"
      >
        <span class="o-header-services__visually-hidden"
          >Open primary navigation</span
        >
      </a>
    </div>
    <div class="o-header-services__logo"></div>
    <div class="o-header-services__title">
      <a class="o-header-services__product-name" href="/"
        >Tool or Service name</a
      >
      <span class="o-header-services__product-tagline"
        >Tagline to explain the product here</span
      >
    </div>
    <ul class="o-header-services__related-content">
      <li>
        <a href>XXXX</a>
      </li>
      <li>
        <a href>Sign in</a>
      </li>
    </ul>
  </div>

  <nav class="o-header-services__primary-nav" aria-label="primary">
    <ul class="o-header-services__primary-nav-list">
      <li>
        <a aria-current="page" href>Docs</a>
      </li>
      <li>
        <a href>Specs</a>
      </li>
      <li>
        <a href="#">Registry</a>
      </li>
    </ul>
  </nav>

  <nav
    class="o-header-services__secondary-nav"
    aria-label="secondary"
    data-o-header-services-nav
  >
    <div
      class="o-header-services__secondary-nav-content"
      data-o-header-services-nav-list
    >
      <ol
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors"
        aria-label="Ancestor sections"
      >
        <li>
          <a href>Documentation</a>
        </li>
        <li>
          <a href>Tutorials</a>
        </li>
      </ol>

      <ul
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children"
        aria-label="Child sections"
      >
        <li>
          <a href>Build Service</a>
        </li>
        <li>
          <a aria-current="page" href>The manual build process</a>
        </li>
      </ul>
    </div>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--left"
      title="scroll left"
      aria-hidden="true"
      disabled
    ></button>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--right"
      title="scroll right"
      aria-hidden="true"
      disabled
    ></button>
  </nav>
</header>

<div class="dummy-text">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie
    eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna
    posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a
    lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris
    at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor
    felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit
    amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel
    pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et,
    lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor.
    Vivamus vehicula dictum ipsum, a porta ex fermentum in.
  </p>
  <p>
    Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae.
    Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non
    ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam
    euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque
    id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan
    nisl.
  </p>
</div>

Product theme: B2C

B2C theme for this header component. If you're creating a product that isn't within B2B or B2C please contact Origami.

Demo
HTML

Open demo in a new tab

<header
  class="o-header-services o-header-services--b2c"
  data-o-component="o-header-services"
>
  <div class="o-header-services__top">
    <!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
    <div class="o-header-services__hamburger">
      <a
        class="o-header-services__hamburger-icon"
        href="#core-nav-fallback"
        role="button"
      >
        <span class="o-header-services__visually-hidden"
          >Open primary navigation</span
        >
      </a>
    </div>
    <div class="o-header-services__logo"></div>
    <div class="o-header-services__title">
      <a class="o-header-services__product-name" href="/"
        >Tool or Service name</a
      >
      <span class="o-header-services__product-tagline"
        >Tagline to explain the product here</span
      >
    </div>
    <ul class="o-header-services__related-content">
      <li>
        <a href>XXXX</a>
      </li>
      <li>
        <a href>Sign in</a>
      </li>
    </ul>
  </div>

  <nav class="o-header-services__primary-nav" aria-label="primary">
    <ul class="o-header-services__primary-nav-list">
      <li>
        <a aria-current="page" href>Docs</a>
      </li>
      <li>
        <a href>Specs</a>
      </li>
      <li>
        <a href="#">Registry</a>
      </li>
    </ul>
  </nav>

  <nav
    class="o-header-services__secondary-nav"
    aria-label="secondary"
    data-o-header-services-nav
  >
    <div
      class="o-header-services__secondary-nav-content"
      data-o-header-services-nav-list
    >
      <ol
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors"
        aria-label="Ancestor sections"
      >
        <li>
          <a href>Documentation</a>
        </li>
        <li>
          <a href>Tutorials</a>
        </li>
      </ol>

      <ul
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children"
        aria-label="Child sections"
      >
        <li>
          <a href>Build Service</a>
        </li>
        <li>
          <a aria-current="page" href>The manual build process</a>
        </li>
      </ul>
    </div>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--left"
      title="scroll left"
      aria-hidden="true"
      disabled
    ></button>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--right"
      title="scroll right"
      aria-hidden="true"
      disabled
    ></button>
  </nav>
</header>

<div class="dummy-text">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie
    eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna
    posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a
    lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris
    at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor
    felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit
    amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel
    pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et,
    lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor.
    Vivamus vehicula dictum ipsum, a porta ex fermentum in.
  </p>
  <p>
    Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae.
    Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non
    ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam
    euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque
    id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan
    nisl.
  </p>
</div>

Product theme: B2B

B2B theme for this header component. If you're creating a product that isn't within B2B or B2C please contact Origami.

Demo
HTML

Open demo in a new tab

<header
  class="o-header-services o-header-services--b2b"
  data-o-component="o-header-services"
>
  <div class="o-header-services__top">
    <!-- Link to a fallback nav for the core experience when using a drawer and hamburger icon. -->
    <div class="o-header-services__hamburger">
      <a
        class="o-header-services__hamburger-icon"
        href="#core-nav-fallback"
        role="button"
      >
        <span class="o-header-services__visually-hidden"
          >Open primary navigation</span
        >
      </a>
    </div>
    <div class="o-header-services__logo"></div>
    <div class="o-header-services__title">
      <a class="o-header-services__product-name" href="/"
        >Tool or Service name</a
      >
      <span class="o-header-services__product-tagline"
        >Tagline to explain the product here</span
      >
    </div>
    <ul class="o-header-services__related-content">
      <li>
        <a href>XXXX</a>
      </li>
      <li>
        <a href>Sign in</a>
      </li>
    </ul>
  </div>

  <nav class="o-header-services__primary-nav" aria-label="primary">
    <ul class="o-header-services__primary-nav-list">
      <li>
        <a aria-current="page" href>Docs</a>
      </li>
      <li>
        <a href>Specs</a>
      </li>
      <li>
        <a href="#">Registry</a>
      </li>
    </ul>
  </nav>

  <nav
    class="o-header-services__secondary-nav"
    aria-label="secondary"
    data-o-header-services-nav
  >
    <div
      class="o-header-services__secondary-nav-content"
      data-o-header-services-nav-list
    >
      <ol
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--ancestors"
        aria-label="Ancestor sections"
      >
        <li>
          <a href>Documentation</a>
        </li>
        <li>
          <a href>Tutorials</a>
        </li>
      </ol>

      <ul
        class="o-header-services__secondary-nav-list o-header-services__secondary-nav-list--children"
        aria-label="Child sections"
      >
        <li>
          <a href>Build Service</a>
        </li>
        <li>
          <a aria-current="page" href>The manual build process</a>
        </li>
      </ul>
    </div>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--left"
      title="scroll left"
      aria-hidden="true"
      disabled
    ></button>
    <button
      class="o-header-services__scroll-button o-header-services__scroll-button--right"
      title="scroll right"
      aria-hidden="true"
      disabled
    ></button>
  </nav>
</header>

<div class="dummy-text">
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur molestie
    eget ex ut volutpat. Suspendisse et molestie mi. Suspendisse at magna
    posuere, euismod erat eget, aliquet lorem. Praesent at semper nulla. Fusce a
    lobortis nibh, sit amet lobortis elit. Nunc ornare vulputate dictum. Mauris
    at luctus est. Cras fermentum, ex in rhoncus semper, nunc nunc porttitor
    felis, a dictum neque orci a tellus. Morbi ipsum mauris, pellentesque sit
    amet velit vitae, posuere euismod nisi. Etiam velit orci, sagittis vel
    pharetra sed, molestie vel massa. Sed dui sapien, euismod eget ultrices et,
    lacinia ut mi. Vivamus <a href="#">porttitor bibendum mauris</a> vel tempor.
    Vivamus vehicula dictum ipsum, a porta ex fermentum in.
  </p>
  <p>
    Pellentesque accumsan consectetur arcu, rutrum cursus arcu pretium vitae.
    Nullam vitae massa felis. Donec convallis iaculis faucibus. Etiam non
    ullamcorper dui. Nullam sit amet ultricies erat, at luctus metus. Aliquam
    euismod sem ut vehicula sollicitudin. Sed vitae neque ligula. Pellentesque
    id diam quis libero hendrerit semper nec vitae lectus. Aenean quis accumsan
    nisl.
  </p>
</div>

Status

Switch component view Brand Version

GitHub Repository

Install o-header-services

If using the Build Service, add o-header-services@^4.0.15 to your script and link tags.

If running a Manual Build, run npm install "o-header-services@^4.0.15".

Help & Support

o-header-services is maintained directly by the Origami team. If you have any questions about o-header-services or Origami in general, we are happy to help. 😊

Slack: #origami-support
Email: origami.support@ft.com

Feedback / Issues

To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊

Slack: #origami-support
Email: origami.support@ft.com