University of Leeds Design System v1.0.20

Hero banner: Lilac Theme

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 ds2HeroTheme1 ds2HeroThemeColourLilac ds2HeroImageContent ">

    <div class="ds2HeroSingle" style='background-image: url("/placeholders/ds2/heroFullWidth/Web-36331.jpg");'></div>

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

            <div class="preheading">Undergraduate</div>

            <h2>Open Days</h2>

            <h3>2027 - 2028</h3>

            <div class="inlineButtons">

                <div class="brandButton">
                    Book your place
                </div>

                <div class="brandButton">
                    Contact us
                </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,
  "theme": "1",
  "bannerStyle": "imageThenContent",
  "imageType": "showAll",
  "heroImages": [
    {
      "img": {
        "src": "/placeholders/ds2/heroFullWidth/Web-36331.jpg",
        "alt": "University campus"
      }
    }
  ],
  "bannerContent": {
    "content": [
      {
        "preheading": "Undergraduate"
      },
      {
        "title": "Open Days"
      },
      {
        "subtitle": "2027 - 2028"
      },
      {
        "inlineButtons": [
          {
            "text": "Book your place",
            "url": "#"
          },
          {
            "text": "Contact us",
            "url": "#"
          }
        ]
      }
    ]
  },
  "themeColour": "Lilac"
}