University of Leeds Design System v1.0.20

2026 Homepage Example

No notes defined.

{% extends '@ds2-template-homepage' %}
 
<div class="ds2Template">
    <div class="ds2Skeleton" style="height: px ">
        <p class="ds2SkeletonText">Primary nav</p>
    </div>

    <div class="ds2TopHero">
        <div class="ds2BannerOverlay ds2Hero ds2BannerColour ">

            <div class="ds2HeroSingle" style='background-image: linear-gradient(rgba(0, 0, 0,0.35), rgba(0, 0, 0, 0.35)), url("/placeholders/ds2/heroFullWidth/Web-32839.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="ds2BrandButton">
                            Book an open day
                        </div>

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

                    </div>

                </div>

            </div>

        </div>
    </div>

    <div class="ds2Skeleton" style="height: px ">
        <p class="ds2SkeletonText">Secondary nav</p>
    </div>

    <div class="ds2MainContent">

        <div class="ds2FullWidth">
            <div class="ds2Skeleton" style="height: px ">
                <p class="ds2SkeletonText">Component constrained to maximum site width</p>
            </div>

        </div>

        <div class="ds2Edge">
            <div class="ds2Skeleton" style="height: px ">
                <p class="ds2SkeletonText">Full page width component</p>
            </div>

        </div>

        <div class="ds2FullWidth">
            <div class="ds2Skeleton" style="height: px ">
                <p class="ds2SkeletonText">Component constrained to maximum site width</p>
            </div>

        </div>

        <div class="ds2Edge">
            <div class="ds2BannerImageThenContent ds2Hero ds2BannerColourDarkBlue ">

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

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

                        <h2>Research</h2>

                        <h3>Learning and innovations</h3>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

                        <div class="inlineButtons">

                            <div class="ds2BrandButton">
                                Opportunities
                            </div>

                            <div class="ds2BrandButton">
                                Funding
                            </div>

                        </div>

                    </div>

                </div>

            </div>
        </div>

        <div class="ds2Edge">
            <div class="ds2BannerContentThenImage ds2Hero ds2BannerColourWhite ">

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

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

                        <h2>Online Tour</h2>

                        <h3>View our campus</h3>

                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </p>

                        <div class="inlineButtons">

                            <div class="ds2BrandButton">
                                Go to tour
                            </div>

                            <div class="ds2BrandButton">
                                Open days
                            </div>

                        </div>

                    </div>

                </div>

            </div>
        </div>

        <div class="ds2FullWidth">
            <div class="ds2Skeleton" style="height: 400px ">
                <p class="ds2SkeletonText">400px high component</p>
            </div>

        </div>

        <div class="ds2Edge">
            <div class="ds2BannerImageThenContent ds2Hero ds2BannerColourVividGreen ">

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

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

                        <div class="preheading">20 May 2026</div>

                        <h2>Leeds welcomes back Irish President</h2>

                        <p>Irish President Catherine Connolly returned to the University of Leeds for the first time since she graduated, as part of her first official visit to England.</p>

                        <div class="inlineButtons">

                            <div class="ds2BrandButton">
                                Full details
                            </div>

                            <div class="ds2BrandButton">
                                All news
                            </div>

                        </div>

                    </div>

                </div>

            </div>
        </div>

        <div class="ds2FullWidth">
            <div class="ds2Skeleton" style="height: 400px ">
                <p class="ds2SkeletonText">400px high component</p>
            </div>

        </div>

    </div>

    <div class="ds2Footer">
        <div class="ds2MaxWidth">
            DS2 footer
        </div>
    </div>
</div>
 
{
  "primary": {
    "content": "Primary nav"
  },
  "secondary": {
    "content": "Secondary nav"
  },
  "banner": {
    "opacity": 0.35,
    "theme": "Standard",
    "bannerLayout": "Overlay",
    "imageType": "showAll",
    "heroImages": [
      {
        "img": {
          "src": "/placeholders/ds2/heroFullWidth/Web-32839.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": "#"
            }
          ]
        }
      ]
    }
  },
  "main_content": [
    {
      "wireframe": {
        "width": "max",
        "content": "Component constrained to maximum site width"
      }
    },
    {
      "wireframe": {
        "width": "edge",
        "content": "Full page width component"
      }
    },
    {
      "wireframe": {
        "width": "max",
        "content": "Component constrained to maximum site width"
      }
    },
    {
      "banner": {
        "bannerLayout": "ImageThenContent",
        "themeColour": "DarkBlue",
        "heroImages": [
          {
            "img": {
              "src": "/placeholders/ds2/heroFullWidth/Web-23808.jpg",
              "alt": "University campus"
            }
          }
        ],
        "bannerContent": {
          "content": [
            {
              "title": "Research"
            },
            {
              "subtitle": "Learning and innovations"
            },
            {
              "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
            },
            {
              "inlineButtons": [
                {
                  "text": "Opportunities",
                  "url": "#"
                },
                {
                  "text": "Funding",
                  "url": "#"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "banner": {
        "bannerLayout": "ContentThenImage",
        "themeColour": "White",
        "heroImages": [
          {
            "img": {
              "src": "/placeholders/ds2/heroFullWidth/Web-36331.jpg",
              "alt": "University campus"
            }
          }
        ],
        "bannerContent": {
          "content": [
            {
              "title": "Online Tour"
            },
            {
              "subtitle": "View our campus"
            },
            {
              "paragraph": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. "
            },
            {
              "inlineButtons": [
                {
                  "text": "Go to tour",
                  "url": "#"
                },
                {
                  "text": "Open days",
                  "url": "#"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "wireframe": {
        "height": "400",
        "width": "max",
        "content": "400px high component"
      }
    },
    {
      "banner": {
        "bannerLayout": "ImageThenContent",
        "themeColour": "VividGreen",
        "heroImages": [
          {
            "img": {
              "src": "/placeholders/ds2/heroFullWidth/news-image.jpg",
              "alt": "University campus"
            }
          }
        ],
        "bannerContent": {
          "content": [
            {
              "preheading": "20 May 2026"
            },
            {
              "title": "Leeds welcomes back Irish President"
            },
            {
              "paragraph": "Irish President Catherine Connolly returned to the University of Leeds for the first time since she graduated, as part of her first official visit to England."
            },
            {
              "inlineButtons": [
                {
                  "text": "Full details",
                  "url": "#"
                },
                {
                  "text": "All news",
                  "url": "#"
                }
              ]
            }
          ]
        }
      }
    },
    {
      "wireframe": {
        "height": "400",
        "width": "max",
        "content": "400px high component"
      }
    }
  ]
}