University of Leeds Design System v1.0.20

Hero banner overlay multiple: Logo Example

No notes defined.

<div class="bannerHeroMultiple">
  {% for heroImage in heroImages %}
    <div class="bannerHeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,{{ opacity }}), rgba(0, 0, 0, {{ opacity }})), url("{{ heroImage.img.src }}"); width: {{100 / heroImages.length}}%'></div>
  {% endfor %}
  <div class="bannerHeroContent">
    {% if uolLogo %}
      <div class="bannerHeroLogoOuter">
        {% render '@uol-logo-uol' %}
      </div>
    {% endif %}
    <h2>{{ title }}</h2>
    {% if subtitle %}<h3>{{ subtitle }}</h3>{% endif %}
    {% if paragraph %}<p>{{ paragraph }}</p>{% endif %}
    {% if inlineButtons %}
      <div class="inlineButtons">
        {% for inlineButton in inlineButtons %}
          <div class="brandButton bg{{ inlineButton.bgColour }} fg{{ inlineButton.fgColour }}">
            {{ inlineButton.text }}
          </div>
        {% endfor %}
      </div>
    {% endif %}
  </div>    
</div>
 
<div class="bannerHeroMultiple">

    <div class="bannerHeroSingle" 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="bannerHeroContent">

        <div class="bannerHeroLogoOuter">
            <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>

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

        <div class="inlineButtons">

            <div class="brandButton bgbrand-vivid-green fgbrand-black">
                Book an open day
            </div>

            <div class="brandButton bgbrand-white fgbrand-black">
                Why Leeds?
            </div>

        </div>

    </div>
</div>
  • Content: 
    .bannerHeroMultiple {
  
  --heroHeight: 470px;
  
  --maxWidth: 1400px;

  --heroH2Size: 32px;
  --heroH3Size: 24px;
  --heroSpacing: 24px;
  --heroSpacing: 24px;
  --brandButtonWidth: 100%;

  @include media(">=uol-media-s") {
    --heroH2Size: 48px;
    --heroH3Size: 32px;
    --heroSpacing: 24px;
    --brandButtonWidth: inherit;
  }

  height: var(--heroHeight);
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  width: 100%;
  color: white;
  display: flex;
  position: relative;
  width: 100%;
  min-height: 400px;

  .bannerHeroSingle {
    display: flex;
    align-items: center;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    position: relative;
  }

  .bannerHeroContent {
    position: absolute;
    width: calc(100% - 2 * var(--heroSpacing));
    max-width: calc(var(--maxWidth) - 2 * var(--heroSpacing));
    position: absolute;
    place-self: center; 
    inset: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;

    > * {
      margin: 0 0  var(--heroSpacing);
    }
    .bannerHeroLogoOuter svg {
      fill: white;
      max-height: 90px;
      max-width: 100%;
    }
    h2 {
      font-size: var(--heroH2Size);
      font-weight: 600;
    }

    h3 {
      font-size: var(--heroH3Size);
    }

    p {
      font-size: var(--heroPSize);
    }

    & :first-child {
      margin-top: 0;
    }

    & :last-child {
      margin-bottom: 0;
    }
  }
}

// TODO: to put in new buttons component (when built)

.brandButton {
  width: var(--brandButtonWidth);
  box-sizing: border-box;
  border-radius: 4px;
  padding: 0 32px;
  height: 52px;
  margin-right: 0;
  display: inline-flex;
  align-items: center;

  @include media(">=uol-media-s") {
    margin-right: 16px;
  }
}

.brandButton:not(:last-child) {
  margin-bottom: 20px;
}

// TODO: to put in some other component - can probably do with a mixin
.bgbrand-vivid-green {background: $brand-vivid-green;}
.bgbrand-teal {background: $brand-teal;}
.bgbrand-dark-blue {background: $brand-dark-blue;}
.bgbrand-pink {background: $brand-pink;}
.bgbrand-white {background: $brand-white;}

.fgbrand-black {color: $brand-black;}
  • URL: /components/raw/hero-banner-overlay-multiple/hero-banner-overlay-multiple.scss
  • Filesystem Path: src/library/02-2026-components/hero-banner-overlay-multiple/hero-banner-overlay-multiple.scss
  • Size: 2.3 KB 
{
  "title": "Join us. Grow with us.",
  "opacity": 0.5,
  "heroImages": [
    {
      "img": {
        "src": "/placeholders/ds2/heroFullWidth/Web-DSC03468.jpg",
        "alt": "University campus"
      }
    }
  ],
  "uolLogo": true,
  "inlineButtons": [
    {
      "text": "Book an open day",
      "url": "#",
      "fgColour": "brand-black",
      "bgColour": "brand-vivid-green"
    },
    {
      "text": "Why Leeds?",
      "url": "#",
      "fgColour": "brand-black",
      "bgColour": "brand-white"
    }
  ],
  "banner": {
    "img": {
      "src": "/placeholders/ds2/heroFullWidth/Web-ALR_7613.jpg",
      "alt": "University campus"
    }
  }
}