Header

Open this example in a new tab: header

<header class="asp-header">
  <div class="asp-header__relative">
    <div class="asp-container">
      <a class="asp-link--plain asp-header__link asp-header__app" href="#">
        <img class="asp-header__app-logo" src="https://cdn.policedigital.services/frontend/113/img/crest-only.png" srcset="https://cdn.policedigital.services/frontend/113/img/crest-only.png 1x, https://cdn.policedigital.services/frontend/113/img/crest-only-2x.png 2x" height="50" width="40" alt="">
          <span class="asp-header__app-name asp-header__app-name--separator">Service name</span>
      </a>
    </div>
    <div class="asp-header__bottom">
      <div class="asp-header__container--bottom">
          <div class="asp-header__mobile">
              <button class="asp-header__button asp-header__button--left asp-header__button--menu asp-js-toggle-button" type="button" data-toggle-element=".asp-header__content--menu" data-toggle-hide-elements=".asp-header__content--search,.asp-header__content--account" style="display:none">Menu</button>
          </div>
          <div class="asp-header__content asp-header__content--menu">
            <ul class="asp-list--plain asp-header__list">
              <li class="asp-header__item"><a class="asp-link--plain asp-header__link" href="#">Menu item 1</a></li>
              <li class="asp-header__item"><a class="asp-link--plain asp-header__link" href="#">Menu item 2</a></li>
            </ul>
          </div>
            <button class="asp-header__button asp-header__button--middle asp-header__button--search asp-js-toggle-button" type="button" data-toggle-element=".asp-header__content--search" data-toggle-hide-elements=".asp-header__content--menu,.asp-header__content--account" style="display:none"><span class="sr-only">Search</span></button>
          <div class="asp-header__content asp-header__content--search">
            <form class="form__group--inner form__group--inner-with-button asp-header__search--form">
              <label class="form__label sr-only" for="asp-header__search">Search undefined</label>
              <input class="form__input" id="asp-header__search" type="text">
              <button class="asp-button asp-button--start asp-button--append asp-header__button--search asp-header__button--search-form" type="submit"><span class="sr-only">Search</span></button>
            </form>
          </div>
            <button class="asp-header__button asp-header__button--right asp-header__button--account asp-js-toggle-button" type="button" data-toggle-element=".asp-header__content--account" data-toggle-hide-elements=".asp-header__content--menu,.asp-header__content--search" style="display:none"><span class="sr-only">Account</span></button>
          <div class="asp-header__content asp-header__content--account">
            <ul class="asp-list--plain asp-header__list">
              <li class="asp-header__item asp-header__item--account">
                <span class="asp-header__truncate">
                  Signed in as Christopher King (1234)
                </span>
              </li>
              <li class="asp-header__item asp-header__item--account"><a class="asp-link--plain asp-header__link" href="#">Logout</a></li>
            </ul>
          </div>
      </div>
    </div>
  </div>
</header>

{% from "components/header/macro.njk" import aspHeader %}

{{ aspHeader({
  app: {
    title: "Service name",
    href: "#",
    icon: "default",
    separator: true
  },
  menu: [
    {
      text: "Menu item 1",
      href: "#"
    },
    {
      text: "Menu item 2",
      href: "#"
    }
  ],
  search: true,
  account: {
    name: "Christopher King (1234)",
    logout: "#"
  }
}) }}

{% from "@asp-frontend/components/header/macro.twig" import aspHeader %}

{{ aspHeader({
  app: {
    title: "Service name",
    href: "#",
    icon: "default",
    separator: true
  },
  menu: [
    {
      text: "Menu item 1",
      href: "#"
    },
    {
      text: "Menu item 2",
      href: "#"
    }
  ],
  search: true,
  account: {
    name: "Christopher King (1234)",
    logout: "#"
  }
}) }}