Pleasance Styleguide

Page header 

<div class="page-header py-2 px-1">
    <div class="page-header--wrapper main-column-wrapper">
        <div class="page-header__links">
            <a class="page-header__toggle page-header__toggle--filter icon icon-toggle-filter" data-bs-toggle="offcanvas" href="#filter-drawer" aria-label="Go to filter">
                <svg>
                    <use xlink:href="#filter"></use>
                </svg>
            </a>
            <a href="#" class="page-header__logo mx-2 d-block">
                <span class="visually-hidden">Pleasance Theatre Trust</span>
            </a>
        </div>
        <div class="page-header__links">
            <ul class="page-header__links-list list-unstyled list-inline m-0">
                <li class="page-header__links-item list-inline-item m-0"><a class="icon icon-search" href="#" aria-label="Search" data-bs-toggle="collapse" data-bs-target=".site-search--wrapper"><svg>
                            <use xlink:href="#search"></use>
                        </svg></a></li>
                <li class="page-header__links-item list-inline-item m-0"><a class="icon icon-account" href="#" aria-label="Account"><svg>
                            <use xlink:href="#account"></use>
                        </svg></a></li>
                <li class="page-header__links-item list-inline-item m-0"><a class="icon icon-basket" href="#" aria-label="Basket"><svg>
                            <use xlink:href="#basket"></use>
                        </svg></a></li>
                <li class="page-header__links-item list-inline-item m-0"><a class="icon icon-wish-list" href="#" aria-label="Wish list"><svg>
                            <use xlink:href="#heart"></use>
                        </svg></a></li>
            </ul> <a class="page-header__toggle page-header__toggle--nav icon icon-toggle-nav ms-1" data-bs-toggle="offcanvas" href="#primary-navigation-drawer" aria-label="Go to navigation">
                <svg>
                    <use xlink:href="#burger"></use>
                </svg>
            </a>
        </div>
    </div>
</div>
<div class="site-search--wrapper collapse position-absolute start-0 end-0 bg-primary">
    <div class="main-column-wrapper px-4 px-xl-1 rounded-bottom">
        <div class="bg-primary p-3 rounded">
            <h3 class="visually-hidden">Search the Pleasance</h3>
            <form action="#">
                <div class="my-0 d-flex justify-content-end">
                    <div class="input-group">
                        <input type="text" class="m-0 form-control form-control-lg" aria-label="Search" id="search" name="search" value="" size="60" maxlength="128" placeholder="__">
                        <button class="icon icon-search btn btn-primary d-flex align-items-center px-2" href="#" aria-label="Perform search">
                            <svg>
                                <use xlink:href="#search"></use>
                            </svg>
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
</div>
<div id="primary-navigation-drawer" class="primary-navigation-drawer offcanvas offcanvas-end bg-secondary">
    <div class="offcanvas-header align-items-start justify-content-end">
        <h2 class="visually-hidden">Primary navigation</h2>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="offcanvas" data-bs-target="#primary-navigation-drawer" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="primary-navigation bg-secondary text-primary pt-2 px-3">
            <nav role="navigation">
                <ul class="menu list-unstyled">
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="About">About</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Find us">Find us</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="How to book">How to book</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Our bar">Our bar</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Accessibility">Accessibility</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="Terms & conditions">Terms & conditions</a>
                    </li>
                    <li class="menu-item pb-2">
                        <a class="btn btn-outline-primary d-block" href="#" title="FAQs">FAQs</a>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</div>
 
<div class="page-header py-2 px-1">
  <div class="page-header--wrapper main-column-wrapper">
    <div class="page-header__links">
      <a class="page-header__toggle page-header__toggle--filter icon icon-toggle-filter" data-bs-toggle="offcanvas" href="#filter-drawer" aria-label="Go to filter">
        <svg>
          <use xlink:href="#filter"></use>
        </svg>
      </a>
      {% if is_front %}
      <h1 class="m-0">
      {% endif %}
      <a href="{{ logo_link_url }}" class="page-header__logo mx-2 d-block">
        <span class="visually-hidden">Pleasance Theatre Trust</span>
      </a>
      {% if is_front %}
      </h1>
      {% endif %}
    </div>
    <div class="page-header__links">
      {% apply spaceless %}
      <ul class="page-header__links-list list-unstyled list-inline m-0">
        {% for icon in icons %}
        <li class="page-header__links-item list-inline-item m-0">
          <a class="icon icon-{{ icon.type }}" href="{{ icon.url }}" aria-label="{{ icon.label }}"{% if icon.type == 'search' %} data-bs-toggle="collapse" data-bs-target=".site-search--wrapper"{% endif %}>
            <svg>
              <use xlink:href="#{{ icon.icon_name }}"></use>
            </svg>
          </a>
        </li>
        {% endfor %}
      </ul>
      {% endapply %}
      <a class="page-header__toggle page-header__toggle--nav icon icon-toggle-nav ms-1" data-bs-toggle="offcanvas" href="#primary-navigation-drawer" aria-label="Go to navigation">
        <svg>
          <use xlink:href="#burger"></use>
        </svg>
      </a>
    </div>
  </div>
</div>
{% block search %}
  {% include '@site-search-bar' %}
{% endblock %}
{% block navigation %}
  {% include "@primary-navigation-drawer" %}
{% endblock %}
 
{
  "is_front": false,
  "logo_link_url": "#",
  "icons": [
    {
      "label": "Search",
      "type": "search",
      "icon_name": "search",
      "url": "#"
    },
    {
      "label": "Account",
      "type": "account",
      "icon_name": "account",
      "url": "#"
    },
    {
      "label": "Basket",
      "type": "basket",
      "icon_name": "basket",
      "url": "#"
    },
    {
      "label": "Wish list",
      "type": "wish-list",
      "icon_name": "heart",
      "url": "#"
    }
  ]
}
  • Content: 
    .page-header {
  background: $brand-yellow;
  color: $brand-grey;

  &--wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  &__logo {
    display: block;
    width: 146px;
    height: 30px;
    background-image: url(../images/logos/pleasance_logo.svg);
    background-repeat: no-repeat;
    background-size: contain;
  }

  &__links {
    display: flex;
    align-items: center;
    justify-content: right;

    &-list {
      height: 24px;
    }
  }

  .icon {
    svg {
      use {
        fill: $secondary;
      }
    }

    &:hover {
      svg {
        use {
          fill: $black;
        }
      }
    }
  }

  &__toggle {
    color: inherit;
  }
}

@include media-breakpoint-up(sm) {
  .page-header {
    &__logo {
      width: 196px;
      height: 40px;
    }

    &__links {  
      &-list {
        height: 40px;
      }
    }
  }
}

@include media-breakpoint-up(md) {
  .page-header {
    &__logo {
      width: 292px;
      height: 60px;
    }

    &__links {  
      &-list {
        height: 40px;
      }
    }
  }
}
  • URL: /components/raw/header/header.scss
  • Filesystem Path: src/components/02-structures/header/header.scss
  • Size: 1.1 KB

No notes defined.