Guidance

The @uol-header presents introductory content on the University of Leeds sites.

It must always display the global masthead and may also display:

When to use

This component should be present on all University of Leeds sites that make use of the Design System.

Developer guidance

See separate notes for implementation of the included components:

<div class="uol-header">
  <header class="uol-global-masthead-outer {{ 'uol-global-masthead-outer--with-local-navigation' if local_navigation -}}">
    {% render '@uol-header-global-masthead', global_masthead %}
    {% if local_masthead %}
      {% render '@uol-header-local-masthead', local_masthead %}
    {% endif %}
  </header>
  {% render '@uol-header-local-navigation', { items: local_navigation} %}
</div>
<div class="uol-header">
    <header class="uol-global-masthead-outer ">
        <div class="uol-global-masthead uol-content-container">
            <div class="uol-global-masthead__inner">
                <a class="uol-skip-link" href="#main">Skip to main content</a>
                <a class="uol-global-masthead__home" href="https://leeds.ac.uk">
                    <svg class="uol-logo--inline" version="1.1" id="Online" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1923 261.2" style="enable-background:new 0 0 1923 261.2;" xml:space="preserve">
                        <style type="text/css">

                        </style>
                        <g id="Online_00000020373721803601593220000010652832729662727574_">
                            <path class="st0 uol-logo--inline__text" d="M1851.2,174c7.6,5,18.4,9.8,33.4,9.8c22,0,38.4-12.2,38.4-31.6c0-33-45.2-30.6-45.2-48.6
		c0-6.2,6.2-9.6,13.8-9.6c8.8,0,16.2,3,25,7.8l0.4-19c-6-3.6-15.4-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.4,18.6
		c13,14.4,38.4,16.8,38.4,30.6c0,8-8.6,10.6-16.4,10.6c-9.4,0-17.4-3.8-24-8L1851.2,174z M1769.6,164.2V95.8h13.4
		c21.4,0,34.6,13.2,34.6,34.2c0,20.6-13.2,34.2-34.6,34.2H1769.6z M1748,182.4h34.6c34,0,57.6-21.6,57.6-53
		c0-30.8-21.6-51.6-57.2-51.6h-35V182.4z M1666.4,182.4h60.6v-18h-39V138h33.6v-18.2H1688V95.6h38.8V77.8h-60.4V182.4z
		 M1584.8,182.4h60.6v-18h-39V138h33.4v-18.2h-33.4V95.6h38.6V77.8h-60.2V182.4z M1509.4,182.4h58.4v-18h-36.6V77.8h-21.8V182.4z
		 M1401,182.4h21.8v-44h32.4v-18h-32.4V95.6h38V77.8H1401V182.4z M1292.6,130c0-21.6,14.2-35.8,33-35.8s33.2,14.2,33.2,35.8
		c0,21.8-14.4,35.8-33.2,35.8S1292.6,151.8,1292.6,130 M1269.8,130c0,31,24,53.8,55.8,53.8c32,0,55.8-22.8,55.8-53.8
		s-23.8-53.8-55.8-53.8C1293.8,76.2,1269.8,99,1269.8,130 M1142.8,77.8l36.4,63.2v41.4h21.8v-41.2l36-63.4h-22.6l-16,29.4
		c-2.4,4.4-5.4,10-7.6,14.8h-0.2c-2.4-4.8-5.2-10.6-7.8-15l-16-29.2H1142.8z M1047.8,95.6h31.4v86.8h21.6V95.6h31.4V77.8h-84.4V95.6
		z M1007.6,182.4h21.6V77.8h-21.6V182.4z M915.2,174c7.4,5,18.2,9.8,33.2,9.8c22.4,0,38.4-11.6,38.4-31.6c0-32.4-45.2-31-45.2-48.6
		c0-6.2,6.2-9.6,14-9.6c8.6,0,16,3,25,7.8l0.2-19c-5.8-3.6-15.2-6.4-26.2-6.4c-23.2,0-35.6,14-35.6,30c0,8,2.4,14,6.6,18.6
		c12.8,14.4,38.2,16.8,38.2,30.6c0,8-8.4,10.6-16.4,10.6c-9.4,0-17.2-3.8-24-8L915.2,174z M847.4,126V95.6h9.2
		c10.4,0,16.2,6.2,16.2,14.4c0,9-7,16-16.2,16H847.4z M825.6,182.4h21.8V142h8.2c3.6,1.4,10,13.2,26,40.4h24.8
		c-15.8-26.8-25.8-44.4-31.2-47.4v-0.2c9.6-4.4,19-13.4,19-27c0-16.2-10.2-30-38-30h-30.6V182.4z M744,182.4h60.8v-18h-39V138h33.4
		v-18.2h-33.4V95.6h38.6V77.8H744V182.4z M624,77.8l43.4,105.4h17.4l44.6-105.4h-22.2l-22.8,55.8c-2.8,6.6-5,13.2-7.2,19.4h-0.4
		c-2-6.2-4.4-12.6-7-19.4l-22-55.8H624z M587.6,182.4h21.6V77.8h-21.6V182.4z M465,182.4h21.4V125c0-4.8,0-11.2-0.4-14.6h0.4
		c3,4.6,6,8.6,10,13.8l45.4,58.2H562V77.8h-21.4V131c0,4.4,0,11.4,0.2,16.4h-0.2c-3-4.4-5.8-8.6-10-13.8l-44-55.8H465V182.4z
		 M351.2,141.6c0,27.6,15.4,42.2,44.6,42.2c28,0,45.6-14.2,45.6-42.6V77.8h-21.8V141c0,16.2-8,24.6-23.4,24.6
		c-14.6,0-23.2-8.8-23.2-24.6V77.8h-21.8V141.6z" />
                            <g>
                                <polygon class="st0" points="142,168.4 146.6,168.4 146.6,126.8 156.8,126.8 156.8,119.2 142,119.2 		" />
                                <polygon class="st0" points="162.4,168.4 167,168.4 167,126.8 177.2,126.8 177.2,119.2 162.4,119.2 		" />
                                <polygon class="st0" points="169,83.4 173.2,83.4 173.2,79.6 166.4,79.6 166.4,91 169,91 		" />
                                <polygon class="st0" points="157,83.4 161.2,83.4 161.2,79.6 154.4,79.6 154.4,91 157,91 		" />
                                <polygon class="st0" points="182.8,168.4 187.4,168.4 187.4,126.8 197.6,126.8 197.6,119.2 182.8,119.2 		" />
                                <path class="st0" d="M184.2,206.3c0-8.4-6.6-14.2-14.4-14.2s-14.4,5.8-14.4,14.2c0,8.4,6.6,14.2,14.4,14.2
			S184.2,214.7,184.2,206.3z M160.8,206.3c0-5.4,4.2-9,9-9s9,3.6,9,9c0,5.4-4.2,9-9,9S160.8,211.7,160.8,206.3z" />
                                <polygon class="st0" points="137.2,112.2 202.4,112.2 205.2,108 134.4,108 		" />
                                <path class="st0" d="M0,0.1v261h114.2V192H142v69.1h4.6v-77.7H193v77.7h4.6V192h27.8v69.1H261V0.1H0z M169.6,30.1h0.4l26.8,16.4
			h-54L169.6,30.1z M142.4,49.7h54.8l2.8,19.8h-60.4L142.4,49.7z M219.6,187.4h-22v-8.6H142v8.6h-22v-19.2h3.8v-62.8h6V72.8h80v32.6
			h6v62.8h3.8V187.4z" />
                                <polygon class="st0" points="181,83.4 185.2,83.4 185.2,79.6 178.4,79.6 178.4,91 181,91 		" />
                            </g>
                        </g>
                    </svg>

                    <span class="hide-accessible">University of Leeds homepage</span>
                </a>
            </div>

            <nav class="uol-quicklinks" aria-label="University links">
                <ul class="uol-quicklinks__list">

                    <li class="uol-quicklinks__group">
                        Students

                        <ul class="uol-quicklinks__group__list">

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/mobile-app">Mobile App</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/minerva">Minerva</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/for-students">For Students</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="https://library.leeds.ac.uk">Library</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/it">IT</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
                            </li>

                        </ul>

                    </li>

                    <li class="uol-quicklinks__group">
                        Staff

                        <ul class="uol-quicklinks__group__list">

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/for-staff">For Staff</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/services-a-z">Services A-Z</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/staff-a-z">Staff A-Z</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/faculty-a-z">Faculties A-Z</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/student-education-service">Student Education Service</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/hr">HR</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/staff/it">IT</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/campus-map">Campus map</a>
                            </li>

                        </ul>

                    </li>

                    <li class="uol-quicklinks__group">
                        Faculties

                        <ul class="uol-quicklinks__group__list">

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/arts-humanities-cultures">Faculty of Arts, Humanities and Cultures</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/biological-sciences">Faculty of Biological Sciences</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/business">Faculty of Business</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/engineering-physical-sciences">Faculty of Engineering and Physical Sciences</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/environment">Faculty of Environment</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/medicine-health">Faculty of Medicine and Health</a>
                            </li>

                            <li class="uol-quicklinks__group__item">
                                <a class="uol-quicklinks__group__link" href="/faculty/social-sciences">Faculty of Social Sciences</a>
                            </li>

                        </ul>

                    </li>

                </ul>
            </nav>

            <form id="uol-global-masthead__search-form" class="uol-global-masthead__search-form" action="/example-form-action">
                <label class="uol-global-masthead__search-label" for="global-masthead__search-field">Search leeds.ac.uk</label>
                <input class="uol-global-masthead__search-input" id="global-masthead__search-field" name="search-query" type="search" placeholder="Search leeds.ac.uk">
                <button class="uol-global-masthead__search-submit" type="submit">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32" aria-hidden="true" focusable="false">
                        <path d="M20.67,18.67H19.61l-.37-.36a8.66,8.66,0,1,0-.93.93l.36.37v1.06l6.66,6.65,2-2Zm-8,0a6,6,0,1,1,6-6A6,6,0,0,1,12.67,18.67Z"></path>
                    </svg>
                    <span class="hide-accessible">Search all leeds.ac.uk</span>
                </button>
            </form>

        </div>

    </header>

</div>
  • Content:
    .uol-header {
      box-shadow:
        0 10px 20px 0 rgba($color-black--dark, 0.15),
        0 3px 6px 0 rgba($color-black--dark, 0.1);
    }
    
  • URL: /components/raw/uol-header/_header.scss
  • Filesystem Path: src/library/02-components/header/_header.scss
  • Size: 127 Bytes
{
  "global_masthead": {
    "home_label": "University of Leeds homepage",
    "home_url": "https://leeds.ac.uk",
    "global_quicklinks": [
      {
        "title": "Students",
        "links": [
          {
            "title": "Mobile App",
            "url": "/mobile-app"
          },
          {
            "title": "Minerva",
            "url": "/minerva"
          },
          {
            "title": "For Students",
            "url": "/for-students"
          },
          {
            "title": "Library",
            "url": "https://library.leeds.ac.uk"
          },
          {
            "title": "IT",
            "url": "/it"
          },
          {
            "title": "Campus map",
            "url": "/campus-map"
          }
        ]
      },
      {
        "title": "Staff",
        "links": [
          {
            "title": "For Staff",
            "url": "/staff/for-staff"
          },
          {
            "title": "Services A-Z",
            "url": "/staff/services-a-z"
          },
          {
            "title": "Staff A-Z",
            "url": "/staff/staff-a-z"
          },
          {
            "title": "Faculties A-Z",
            "url": "/staff/faculty-a-z"
          },
          {
            "title": "Student Education Service",
            "url": "/staff/student-education-service"
          },
          {
            "title": "HR",
            "url": "/staff/hr"
          },
          {
            "title": "IT",
            "url": "/staff/it"
          },
          {
            "title": "Campus map",
            "url": "/campus-map"
          }
        ]
      },
      {
        "title": "Faculties",
        "links": [
          {
            "title": "Faculty of Arts, Humanities and Cultures",
            "url": "/faculty/arts-humanities-cultures"
          },
          {
            "title": "Faculty of Biological Sciences",
            "url": "/faculty/biological-sciences"
          },
          {
            "title": "Faculty of Business",
            "url": "/faculty/business"
          },
          {
            "title": "Faculty of Engineering and Physical Sciences",
            "url": "/faculty/engineering-physical-sciences"
          },
          {
            "title": "Faculty of Environment",
            "url": "/faculty/environment"
          },
          {
            "title": "Faculty of Medicine and Health",
            "url": "/faculty/medicine-health"
          },
          {
            "title": "Faculty of Social Sciences",
            "url": "/faculty/social-sciences"
          }
        ]
      }
    ],
    "global_search": {
      "action": "/example-form-action",
      "input_label": "Search leeds.ac.uk",
      "input_placeholder": "Search leeds.ac.uk",
      "submit_label": "Search all leeds.ac.uk"
    }
  }
}