University of Leeds Design System v1.0.20

Hero banner: Logo Example

No notes defined.

<div class="ds2Hero ds2HeroTheme{{ theme }} ds2HeroThemeColour{{ themeColour }} {% if bannerStyle == 'imageThenContent' %}ds2HeroImageContent{% endif %} {% if imageType == 'transition' %}ds2HeroTransition{% endif %}">
  {% for heroImage in heroImages %}
    {% if imageType == 'showAll' %}
      {% if bannerStyle == 'imageThenContent' %}
        <div class="ds2HeroSingle" style='background-image: url("{{ heroImage.img.src }}");'></div>
      {% else %}
        <div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,{{ opacity }}), rgba(0, 0, 0, {{ opacity }})), url("{{ heroImage.img.src }}"); width: {{100 / heroImages.length}}%'></div>
      {% endif %}
    {% endif %} 
    {% if imageType == 'transition' %}
      <div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,{{ opacity }}), rgba(0, 0, 0, {{ opacity }})), url("{{ heroImage.img.src }}");'></div>
    {% endif %}
  {% endfor %}
  <div class="ds2HeroContent">
    {% render '@ds2-content-block', bannerContent %}
  </div>
  {% if imageType == 'transition' %}
    <div class="ds2HeroNavContainer">
      <span class="ds2HeroNavButton ds2HeroNavPrevious" >&#10094;</span>
      <span class="ds2HeroNavButton ds2HeroNavNext" >&#10095;</span>
    </div>
  {% endif %} 
</div>
 
<div class="ds2Hero ds2HeroThemeStandard ds2HeroThemeColour  ">

    <div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,0.5), rgba(0, 0, 0, 0.5)), url("/placeholders/ds2/heroFullWidth/Web-DSC03468.jpg"); width: 100%'></div>

    <div class="ds2HeroContent">
        <div class="ds2ContentBlock">

            <div class="ds2ContentBlockUolLogo"><svg version="1.1" id="Primary" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" fill="#000000" viewBox="0 0 1297.6 262.6" style="enable-background:new 0 0 1297.6 262.6;" xml:space="preserve">
                    <g>
                        <polygon class="st0" points="157,84 161.2,84 161.2,80.2 154.4,80.2 154.4,91.6 157,91.6 	" />
                        <polygon class="st0" points="162.4,169 167,169 167,127.4 177.2,127.4 177.2,119.8 162.4,119.8 	" />
                        <polygon class="st0" points="142,169 146.6,169 146.6,127.4 156.8,127.4 156.8,119.8 142,119.8 	" />
                        <path class="st0" d="M184.2,206.9c0-8.4-6.6-14.2-14.4-14.2c-7.8,0-14.4,5.8-14.4,14.2c0,8.4,6.6,14.2,14.4,14.2
		C177.6,221.1,184.2,215.3,184.2,206.9z M160.8,206.9c0-5.4,4.2-9,9-9c4.8,0,9,3.6,9,9c0,5.4-4.2,9-9,9
		C165,215.9,160.8,212.3,160.8,206.9z" />
                        <polygon class="st0" points="169,84 173.2,84 173.2,80.2 166.4,80.2 166.4,91.6 169,91.6 	" />
                        <polygon class="st0" points="181,84 185.2,84 185.2,80.2 178.4,80.2 178.4,91.6 181,91.6 	" />
                        <polygon class="st0" points="182.8,169 187.4,169 187.4,127.4 197.6,127.4 197.6,119.8 182.8,119.8 	" />
                        <path class="st0" d="M0,0.7v261h114.2v-69.1H142v69.1h4.6V184H193v77.7h4.6v-69.1h27.8v69.1H261V0.7H0z M169.6,30.7h0.4l26.8,16.4
		h-54L169.6,30.7z M142.4,50.3h54.8L200,70h-60.4L142.4,50.3z M219.6,188h-22v-8.6H142v8.6h-22v-19.2h3.8V106h6V73.4h80V106h6v62.8
		h3.8V188z" />
                        <polygon class="st0" points="137.2,112.8 202.4,112.8 205.2,108.6 134.4,108.6 	" />
                    </g>
                    <g id="Primary_00000077314402275668378130000000421217089280598159_">
                        <path class="st0" d="M1195.6,1.4l39.4,68.4v44.8h23.4V70l39.2-68.6H1273l-17.2,31.8c-2.8,4.8-6,10.8-8.4,16h-0.2
		c-2.6-5.2-5.6-11.4-8.4-16.2l-17.2-31.6H1195.6z M1095,20.8h33.8v93.8h23.6V20.8h33.8V1.4H1095V20.8z M1053.6,114.6h23.4V1.4h-23.4
		V114.6z M970.8,252c8.2,5.4,19.8,10.6,36,10.6c24,0,41.6-13.2,41.6-34.2c0-35.6-48.8-33.2-48.8-52.6c0-6.8,6.6-10.2,15-10.2
		c9.4,0,17.4,3,27,8.2l0.4-20.6c-6.4-3.6-16.6-6.8-28.4-6.8c-25,0-38.6,15.2-38.6,32.4c0,8.8,2.8,15.2,7.2,20.2
		c13.8,15.6,41.4,18.2,41.4,33.2c0,8.4-9.2,11.4-17.8,11.4c-10.2,0-18.6-4.2-26-8.8L970.8,252z M955.8,105.6
		c8,5.4,19.8,10.6,36,10.6c24,0,41.6-12.6,41.6-34.4c0-34.8-49-33.4-49-52.6c0-6.6,6.8-10.2,15-10.2c9.4,0,17.6,3.2,27.2,8.4
		l0.4-20.6C1020.4,3,1010.2,0,998.4,0c-25,0-38.4,15.2-38.4,32.4c0,8.8,2.6,15.2,7,20.2c14,15.6,41.4,18,41.4,33
		c0,8.6-9.2,11.4-17.6,11.4c-10.2,0-18.8-4-26-8.6L955.8,105.6z M884.8,241.4v-74h14.4c23.2,0,37.4,14.4,37.4,37
		c0,22.2-14.2,37-37.4,37H884.8z M884.6,53.6V20.8h10c11.2,0,17.6,6.6,17.6,15.6c0,9.8-7.6,17.2-17.6,17.2H884.6z M861.2,114.6h23.4
		V70.8h9c4,1.6,10.8,14.4,28,43.8h27c-17.2-29-28-48.2-33.8-51.2v-0.2c10.4-4.8,20.6-14.6,20.6-29.4c0-17.4-11-32.4-41.2-32.4h-33
		V114.6z M861.2,261h37.6c36.8,0,62.4-23.2,62.4-57.2c0-33.2-23.6-56-62-56h-38V261z M775,114.6h65.8V95.2h-42.2V66.4h36.2V47h-36.2
		V20.8h41.8V1.4H775V114.6z M775,261h65.8v-19.4h-42.4V213h36.4v-19.6h-36.4v-26.2h42v-19.4H775V261z M689,261h65.8v-19.4h-42.2V213
		h36.2v-19.6h-36.2v-26.2h41.8v-19.4H689V261z M647.2,1.4l47,114h18.6l48.4-114h-24l-24.8,60.4c-2.8,7.2-5.4,14.2-7.6,21h-0.4
		c-2.4-6.8-4.8-13.6-7.8-21L673,1.4H647.2z M609.8,114.6h23.6V1.4h-23.6V114.6z M609.8,261h63v-19.4h-39.4v-93.8h-23.6V261z
		 M494.8,261h23.4v-47.6h35V194h-35v-26.8h41.2v-19.4h-64.6V261z M479.4,114.6h23.4v-62c0-5.2,0-12.2-0.4-15.8h0.4
		c3,5,6.4,9.4,10.8,15l49,62.8h22V1.4h-23.4V59c0,4.8,0,12.2,0.2,17.6h-0.2c-3.2-4.8-6.2-9-10.8-14.8L503,1.4h-23.6V114.6z
		 M379.6,204.4c0-23.4,15.4-38.6,35.8-38.6S451,181,451,204.4c0,23.6-15.2,38.8-35.6,38.8S379.6,228,379.6,204.4 M358.6,70.4
		c0,30,16.6,45.8,48.2,45.8c30.4,0,49.4-15.4,49.4-46.2V1.4h-23.6v68.4c0,17.4-8.6,26.6-25.4,26.6c-15.8,0-25-9.6-25-26.6V1.4h-23.6
		V70.4z M415.4,262.6c34.4,0,60.2-24.6,60.2-58.2c0-33.4-25.8-58.2-60.2-58.2c-34.6,0-60.4,24.8-60.4,58.2
		C355,238,380.8,262.6,415.4,262.6" />
                    </g>
                </svg>
            </div>

            <h3>Join us. Grow with us.</h3>

            <div class="inlineButtons">

                <div class="brandButton">
                    Book an open day
                </div>

                <div class="brandButton">
                    Why Leeds?
                </div>

            </div>

        </div>

    </div>

</div>
  • Content: 
    export const heroBanners = () => {

  const heroBanners = document.querySelectorAll('.ds2HeroTransition')

  heroBanners.forEach((heroBanner) => {
    let nextBanner = heroBanner.querySelectorAll(".ds2HeroNavNext")[0];
    let previousBanner = heroBanner.querySelectorAll(".ds2HeroNavPrevious")[0];
    
    nextBanner.addEventListener("click", () => {plusDivs(1)})
    previousBanner.addEventListener("click", () => {plusDivs(-1)})

    var slideIndex = 1;
    showDivs(slideIndex);

    function plusDivs(n) {
      showDivs(slideIndex += n);
    }

    function showDivs(n) {
      console.log("showDivs " + n);
      var i;
      var x = document.getElementsByClassName("ds2HeroSingle");
      if (n > x.length) {slideIndex = 1}
      if (n < 1) {slideIndex = x.length}
      for (i = 0; i < x.length; i++) {
        x[i].style.display = "none";  
      }
      x[slideIndex-1].style.display = "block";  
    }
  
  })
}
  • URL: /components/raw/hero-banner/hero-banner-overlay.module.js
  • Filesystem Path: src/library/02-2026-components/hero-banner-overlay/hero-banner-overlay.module.js
  • Size: 924 Bytes
  • Content: 
    .ds2Hero {
  --ds2HeroSpacing: 32px;
  --ds2HeroMinHeight: 500px;
  --ds2ContentMaxWidth: 1400px;

  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  width: 100%;
  color: white;
  display: flex;
  justify-content: center;
  position: relative;
  width: 100%;
  min-height: var(--ds2HeroMinHeight);

  .ds2HeroSingle {
    display: flex;
    width: 100%;
    align-items: center;
    background-position: 50%;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .ds2HeroContent {
    width: calc(100% - 2 * var(--ds2HeroSpacing));
    max-width: calc(var(--ds2ContentMaxWidth) - 2 * var(--ds2HeroSpacing));
    margin: 0 var(--ds2HeroSpacing);
    margin: 0;
    position: absolute;
    place-self: center; 
    height: 100%; 
    display: flex;
    flex-direction: column;
    justify-content: center;

    .ds2ContentBlockUolLogo svg {
      fill: white;
    }
  }

  .ds2HeroNavContainer {
    position: absolute;
    bottom: var(--ds2HeroSpacing);
    right: var(--ds2HeroSpacing);

    .ds2HeroNavButton {
      font-size: 20px;
      width: 40px;
      height: 40px;
      margin-left: 10px;
      background: #ffffff99;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
    }
  }
}

// variant with image to left and content to left
.ds2HeroImageContent {
  --ds2ImageContentImagePercent: 33%;
  
  .ds2HeroSingle {
    width: var(--ds2ImageContentImagePercent);
    height: 100%;
    position: absolute;
    left: 0;
  }

  .ds2HeroContent {
    position: relative;
    width: calc(100% - var(--ds2ImageContentImagePercent) - 2 * var(--ds2HeroSpacing));
    padding: var(--ds2HeroSpacing);
    padding-left: calc(var(--ds2ImageContentImagePercent) + var(--ds2HeroSpacing));
    
  }

  .ds2HeroNavContainer {
    left: calc(var(--ds2ImageContentImagePercent) - 100px - var(--ds2HeroSpacing));
  }
}

// standard colour theme (no theme specified)
.ds2HeroThemeStandard {
  background: $brand-black;
  color: white;
  svg {
      fill: white !important;
  }
  .brandButton {
      background: $brand-white !important;
      color: $brand-black !important;
  }
  .brandButton:first-of-type {
      background: $brand-teal !important;
      color: $brand-black !important;
  }
}

// Colours
.ds2HeroThemeColourLilac {
  background: $brand-lilac;
  color: $brand-black;
  svg {
    fill: $brand-black !important;
  }
  .brandButton {
    background: $brand-lilac !important;
    color: $brand-black !important;
    border: 1px solid $brand-black !important;
  }
  .brandButton:first-of-type {
    background: $brand-white !important;
    color: $brand-black !important;
  }
}

.ds2HeroThemeColourTeal {
  background: $brand-teal;
  color: $brand-black;
  svg {
      fill: $brand-black !important;
  }
  .brandButton {
      background: $brand-teal;
      color: $brand-black;
      border: 1px solid $brand-black;
  }
  .brandButton:first-of-type {
      background: $brand-white;
      color: $brand-black;
  }
}

.ds2HeroThemeColourBlue {
  background: $brand-vivid-blue;
  color: $brand-white;
  svg {
      fill: $brand-white !important;
  }
  .brandButton {
      background: $brand-vivid-blue !important;
      color: $brand-white !important;
      border: 1px solid $brand-white !important;
  }
  .brandButton:first-of-type {
      background: $brand-white !important;
      color: $brand-black !important;
  }
}

.ds2HeroThemeColourVividGreen {
  background: $brand-vivid-green;
  color: $brand-black;
  svg {
      fill: $brand-black !important;
  }
  .brandButton {
      background: $brand-stone !important;
      color: $brand-black !important;
  }
  .brandButton:first-of-type {
      background: $brand-black !important;
      color: $brand-white !important;
  }
}


// add any styles specific to theme eg.
.ds2HeroTheme1 {
  h2 {font-size: 40px;}
}
  • URL: /components/raw/hero-banner/hero-banner-overlay.scss
  • Filesystem Path: src/library/02-2026-components/hero-banner-overlay/hero-banner-overlay.scss
  • Size: 4 KB 
{
  "opacity": 0.5,
  "theme": "Standard",
  "bannerStyle": "overlay",
  "imageType": "showAll",
  "heroImages": [
    {
      "img": {
        "src": "/placeholders/ds2/heroFullWidth/Web-DSC03468.jpg",
        "alt": "University campus"
      }
    }
  ],
  "bannerContent": {
    "content": [
      {
        "uolLogo": true
      },
      {
        "subtitle": "Join us. Grow with us."
      },
      {
        "inlineButtons": [
          {
            "text": "Book an open day",
            "url": "#"
          },
          {
            "text": "Why Leeds?",
            "url": "#"
          }
        ]
      }
    ]
  }
}