Guidance

The @uol-header-local-masthead provides “local” site identification.

This is intended for use on sites that use a subdomain of leeds.ac.uk, such as faculty sites eg: environment.leeds.ac.uk, or school sites within these.

The component provides a local site name and link that should return the users to the local site’s homepage.

When to use

Use this component to identify the local site name and provide a consistent link back to the site’s homepage.

When not to use

This component should not be used on the main University of Leeds site.

Developer guidance

The @uol-header-local-masthead should be included in the @uol-header. Visibility is dependent on the presence of “local_masthead” data:

"local_masthead": {
  "site_name": "Site name",
  "site_url": "/"
}

If the current page matches the site_url (ie. the site homepage) “current” should be set to true. e.g.

"site_name": "School of Design System",
"site_url": "/",
"current": true

View example

This helps Assistive Technology users know that the link will not take them to a different page. Ensure that “current”: true is only set on the the page that matches the “site_url”.

Subsites

If in a subsite, specify the subsite name and URL e.g.

"site_name": "Faculty of University of Leeds Design System",
"site_url": "/",
"subsite_name": "School of Design and Frontend Development",
"subsite_url": "/subsite/"

If in a subsite and the current page matches the subsite_url (ie. the subsite homepage) “current” should be set to true. e.g.

'site_name': "Faculty of University of Leeds Design System",
'subsite_name': "School of Design and Frontend Development",
'subsite_url': "/subsite/",
'current': true
<div class="uol-header-local-masthead">
  <div class="uol-header-local-masthead__inner">
    {% if subsite_name %}
      <a class="uol-header-local-masthead__link uol-header-local-masthead__link--parent-site" href="{{ site_url }}">
        {{ site_name }}
        <span class="hide-accessible"> home page</span>
      </a>
    {% endif %}
    <a class="uol-header-local-masthead__link uol-header-local-masthead__link--title" href="{{ subsite_url if subsite_url else site_url }}" {% if current %}aria-current="page"{% endif %}>
      {{ subsite_name if subsite_name else site_name }}
      <span class="hide-accessible"> home page</span>
    </a>
  </div>
</div>
<div class="uol-header-local-masthead">
    <div class="uol-header-local-masthead__inner">

        <a class="uol-header-local-masthead__link uol-header-local-masthead__link--title" href="/">
            Faculty of University of Leeds Design System
            <span class="hide-accessible"> home page</span>
        </a>
    </div>
</div>
  • Content:
    .uol-header-local-masthead {
      @include font-size-responsive(2.125rem, 1.25rem);
      @include line-height-responsive(1.556, 1.6);
    
      padding: $spacing-4;
      background-color: $color-white;
    
      @include media(">=uol-media-m") {
        padding: $spacing-3 $spacing-4;
      }
    
      @include media(">=uol-media-l") {
        padding: $spacing-3 $spacing-5;
      }
    
      @include media(">=uol-media-xl") {
        padding: $spacing-3 $spacing-6;
      }
    
      .uol-global-masthead-outer--with-local-navigation & {
        border-bottom: 1px solid $color-border--light;
      }
    }
    
    .uol-global-masthead-outer--with-local-navigation + .uol-content-container.uol-header-local-navigation-wrapper {
      margin-top: 0;
    
      &.uol-header-local-navigation-wrapper--scrollable {
        border-top: none;
      }
    
      @include media(">=uol-media-l") {
        margin-top: none;
      }
    }
    
      .uol-header-local-masthead__inner {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        margin: 0 auto;
        max-width: 99.75rem;
      }
    
        .uol-header-local-masthead__link {
          @include link_focus(1px);
    
          font-weight: $font-weight-bold--sans-serif;
          text-decoration: underline;
          text-underline-offset: 1px;
          color: $color-font;
    
          @include media(">=uol-media-m") {
            font-weight: $font-weight-bold--sans-serif;
          }
    
          &:hover {
            // TODO: Look to include on the ds-link-focus mixin or equivalent
            text-decoration: underline;
            text-decoration-color: $color-brand;
            text-decoration-thickness: 2px;
            transition: text-decoration-color 0s;
    
            .no-csspositionsticky & {
              text-decoration: none;
            }
          }
        }
          .uol-header-local-masthead__link--parent-site {
            // TODO: Typography - Check to see if this size should be global
            @include font-size-responsive(0.875rem, 1rem);
            @include line-height-responsive(1.25rem, 1.25rem);
    
            margin-bottom: 8px;
    
            @include media(">=uol-media-m") {
              margin-bottom: 6px;
            }
          }
    
          .uol-header-local-masthead__link--title {
            @extend %text-size-paragraph;
            @include line-height-responsive(1.75rem, 2rem);
          }
    
  • URL: /components/raw/uol-header-local-masthead/_local-masthead.scss
  • Filesystem Path: src/library/02-components/header-partials/local-masthead/_local-masthead.scss
  • Size: 2.2 KB
{
  "site_name": "Faculty of University of Leeds Design System",
  "site_url": "/"
}