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" >❮</span>
<span class="ds2HeroNavButton ds2HeroNavNext" >❯</span>
</div>
{% endif %}
</div>
<div class="ds2Hero ds2HeroThemeStandard ds2HeroThemeColour ds2HeroTransition">
<div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,0.15), rgba(0, 0, 0, 0.15)), url("http://www.leeds.ac.uk/images/resized/1600x400-0-0-1-80-Untitled_design__21__2.png");'></div>
<div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,0.15), rgba(0, 0, 0, 0.15)), url("/placeholders/ds2/heroFullWidth/Web-ALR_6529.jpg");'></div>
<div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,0.15), rgba(0, 0, 0, 0.15)), url("http://www.leeds.ac.uk/images/resized/1600x400-0-0-1-80-Untitled_design__25__2.png");'></div>
<div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,0.15), rgba(0, 0, 0, 0.15)), url("http://www.leeds.ac.uk/images/resized/1600x400-0-0-1-80-banner_4_1600x400.png");'></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 class="ds2HeroNavContainer">
<span class="ds2HeroNavButton ds2HeroNavPrevious">❮</span>
<span class="ds2HeroNavButton ds2HeroNavNext">❯</span>
</div>
</div>
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";
}
})
}
.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;}
}
{
"opacity": 0.15,
"theme": "Standard",
"bannerStyle": "overlay",
"imageType": "transition",
"heroImages": [
{
"img": {
"src": "http://www.leeds.ac.uk/images/resized/1600x400-0-0-1-80-Untitled_design__21__2.png",
"alt": "University campus"
}
},
{
"img": {
"src": "/placeholders/ds2/heroFullWidth/Web-ALR_6529.jpg",
"alt": "University campus"
}
},
{
"img": {
"src": "http://www.leeds.ac.uk/images/resized/1600x400-0-0-1-80-Untitled_design__25__2.png",
"alt": "University campus"
}
},
{
"img": {
"src": "http://www.leeds.ac.uk/images/resized/1600x400-0-0-1-80-banner_4_1600x400.png",
"alt": "University campus"
}
}
],
"bannerContent": {
"content": [
{
"uolLogo": true
},
{
"subtitle": "Join us. Grow with us."
},
{
"inlineButtons": [
{
"text": "Book an open day",
"url": "#"
},
{
"text": "Why Leeds?",
"url": "#"
}
]
}
]
}
}