University of Leeds Design System v1.0.14.2

Local Masthead: Long Title

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 and accessible web development
            <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 and accessible web development",
  "site_url": "/"
}