No notes defined.
<div class="uol-homepage-content-container">
{% render '@uol-side-nav-container' %}
<main id="main" tabindex="-1" class="uol-homepage-content uol-homepage-content__{{ page_type }}">
{% if page_title %}
<h1 class="hide-accessible">{{ page_title }}</h1>
{% endif %}
{% for widget in widgets %}
{% render '@uol-widget-' + widget.type, {
widget_type: widget.type,
widget_title: widget.title,
widget_heading_level: widget.heading_level,
widget_lead: widget.lead,
widget_image: widget.image,
widget_content: widget.content,
widget_link: widget.link,
widget_arrow_links: widget.arrow_links,
widget_video: widget.video,
cards: widget.cards,
tiles: widget.tiles,
newsItems: widget.newsItems,
ctas: widget.ctas,
facts: widget.facts,
form: widget.form,
events: widget.events,
items: widget.items,
variant: widget.variant,
gallery: widget.gallery,
accreditations: widget.accreditations,
navigationCards: widget.navigationCards
}%}
{% endfor %}
</main>
</div>
<div class="uol-homepage-content-container">
<div class="uol-side-nav-container"></div>
<main id="main" tabindex="-1" class="uol-homepage-content uol-homepage-content__standard">
<h1 class="hide-accessible">Page title</h1>
<div class="uol-widget-container uol-widget-container__featured-content">
<div class="uol-widget uol-widget--featured-content">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A featured content widget</h2>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-widget__content__text uol-rich-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, aspernatur! Veritatis pariatur velit qui accusantium eius, aliquid nihil error magni harum illum obcaecati sequi libero ab commodi, veniam maiores ipsa?</p>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__featured-content">
<div class="uol-widget uol-widget--featured-content">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A featured content widget with image</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<figure class="uol-featured-image">
<img class="uol-featured-image__img" src="/placeholders/banner/banner-01.jpg" alt="A descriptive alt text">
</figure>
<div class="uol-widget__content__text uol-rich-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, aspernatur! Veritatis pariatur velit qui accusantium eius, aliquid nihil error magni harum illum obcaecati sequi libero ab commodi, veniam maiores ipsa?</p>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__featured-content">
<div class="uol-widget uol-widget--featured-content">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A featured content widget with captioned image</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<figure class="uol-featured-image">
<img class="uol-featured-image__img" src="/placeholders/banner/banner-02.jpg" alt="A descriptive alt text">
<figcaption class="uol-featured-image__caption">
Image caption. May be used for © notices
</figcaption>
</figure>
<div class="uol-widget__content__text uol-rich-text">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, aspernatur! Veritatis pariatur velit qui accusantium eius, aliquid nihil error magni harum illum obcaecati sequi libero ab commodi, veniam maiores ipsa?</p>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__featured-content">
<div class="uol-widget uol-widget--featured-content">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A featured content widget with typography elements</h2>
<div class="uol-widget__lead">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur officia pariatur saepe incidunt ea, maxime deleniti itaque beatae, ratione perspiciatis, ipsa voluptatibus unde praesentium facere cumque? Quas tempora optio.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<figure class="uol-featured-image">
<img class="uol-featured-image__img" src="/placeholders/banner/banner-02.jpg" alt="A descriptive alt text">
<figcaption class="uol-featured-image__caption">
Image caption. May be used for © notices
</figcaption>
</figure>
<div class="uol-widget__content__text uol-rich-text">
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
</blockquote>
<p>Magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, <strong>qui dolorem ipsum quia dolor sit amet</strong>.</p>
<p>Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore <a href="/some-featured-content-link">et dolore magnam aliquam quaerat voluptatem</a>.</p>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__cards">
<div class="uol-widget uol-widget--cards">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A cards widget with single card</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-cards uol-cards--count-1 ">
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
First card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__cards">
<div class="uol-widget uol-widget--cards">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 2 cards</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-cards uol-cards--count-2 ">
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
First card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Second card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__cards">
<div class="uol-widget uol-widget--cards">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 3 cards</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-cards uol-cards--count-3 ">
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
First card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Second card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Third card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__cards">
<div class="uol-widget uol-widget--cards">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 4 cards</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-cards uol-cards--count-4 ">
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
First card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Second card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Third card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Fourth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__cards">
<div class="uol-widget uol-widget--cards">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 5 cards</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-cards uol-cards--count-5 ">
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
First card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Second card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Third card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Fourth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Fifth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__cards">
<div class="uol-widget uol-widget--cards">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 6 cards</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-cards uol-cards--count-6 ">
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
First card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Second card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Third card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Fourth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Fifth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Sixth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__cards">
<div class="uol-widget uol-widget--cards">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 7 cards</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-cards uol-cards--count-7 ">
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
First card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Second card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Third card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Fourth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Fifth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Sixth card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
<li class="uol-cards__card uol-cards__card--without-image">
<div class="uol-cards__card__text-wrapper">
<h3 class="uol-cards__card__title">
<a class="uol-cards__card__link " href="#">
Seventh card
</a>
</h3>
<p class="uol-cards__card__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 2 tiles</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-1">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-1">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 3 tiles</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 4 tiles</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 5 tiles</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 6 tiles</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Pippa on campus" style="background-image: url('../../placeholders/ph-tiles-5.jpg');"></div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 6 tiles (no image)</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--no-img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 2 tiles plus fact</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-1">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-1">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 3 tiles plus fact</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 4 tiles plus fact</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 5 tiles plus fact</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 6 tiles plus fact</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Pippa on campus" style="background-image: url('../../placeholders/ph-tiles-5.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 2 tiles plus profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-1">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-1">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 3 tiles plus profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 4 tiles plus profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 5 tiles plus profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 6 tiles plus profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Pippa on campus" style="background-image: url('../../placeholders/ph-tiles-5.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 2 tiles plus fact and profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 3 tiles plus fact and profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 4 tiles plus fact and profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 5 tiles plus fact and profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
<p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__tiles">
<div class="uol-widget uol-widget--tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">A collection of 6 tiles plus fact and profile</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-tiles">
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-1.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Libraries</a>
</h3>
<p class="uol-tile__subtitle">Four libraries on the main campus provide a variety of study environments</p>
</div>
<div class="uol-tile__img" role="img" aria-label="Campus view" style="background-image: url('../../placeholders/ph-tiles-2.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--small ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
</div>
</div>
<div class="uol-tile uol-tile--img uol-tile--video ">
<div class="uol-tile__inner">
<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Student life at Leeds - its one of a kind</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Women's lacrosse team" style="background-image: url('../../placeholders/ph-tiles-3.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-tiles-4.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--img ">
<div class="uol-tile__inner">
<div class="uol-tile__text-container">
<h3 class="uol-tile__title">
<a class="uol-tile__link" href="/tile-link-">Like a card a tile contains content and actions about a single subject</a>
</h3>
</div>
<div class="uol-tile__img" role="img" aria-label="Pippa on campus" style="background-image: url('../../placeholders/ph-tiles-5.jpg');"></div>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--facts ">
<div class="uol-tile__inner">
<blockquote class="uol-facts-figures" cite="/tile-link-1">
<p class="uol-facts-figures__headline">
<strong class="uol-facts-figures__headline__1">
Top 100
</strong>
<span class="uol-facts-figures__headline__2">
world ranking university
</span>
</p>
<footer class="uol-facts-figures__footer">
<cite class="uol-facts-figures__cite">
<a href="/tile-link-1" class="uol-facts-figures__link">
QS World University Rankings 2021
</a>
</cite>
</footer>
</blockquote>
</div>
</div>
<div class="uol-tile uol-tile--no-img uol-tile--profile ">
<div class="uol-tile__inner">
<h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>
<blockquote class="uol-tile__profile-blockquote">
<div class="uol-tile__profile-quote">
<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
</div>
</blockquote>
<p class="uol-tile__profile-detail">
<strong class="uol-tile__profile-name">Jessica Osgerby</strong>
<span class="uol-tile__profile-role">Student</span>
<span class="uol-tile__profile-position">BA UOL Design System</span>
</p>
<div class="uol-tile__profile-image" role="img" aria-label="Portrait of Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-11.jpg');"></div>
<a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="uol-widget-container uol-widget-container__news-tiles">
<div class="uol-widget uol-widget--news-tiles">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">News Tiles</h2>
<div class="uol-widget__lead">
<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<div class="uol-news-tiles ">
<div class="uol-news-tile ">
<div class="uol-news-tile__inner">
<div class="uol-news-tile__content">
<h3 class="uol-news-tile__title">
<a href="/news-1" class="uol-news-tile__link">
University joins £3.4m health data initiative to address major health challenges
</a>
</h3>
<dl class="uol-news-tile__meta">
<dt class="uol-news-tile__meta__term">Date</dt>
<dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">
<time datetime="2020-09-24 20:00">
24 September 2020
</time>
</dd>
</dl>
</div>
</div>
<div class="uol-news-tile__img" role="img" aria-label="Parkinson building" style="background-image: url('../../placeholders/tiles/parkinson.jpg');"></div>
</div>
<div class="uol-news-tile ">
<div class="uol-news-tile__inner">
<div class="uol-news-tile__content">
<h3 class="uol-news-tile__title">
<a href="/news-2" class="uol-news-tile__link">
How animals ‘dial-up’ the pain they experience from certain stimuli
</a>
</h3>
<dl class="uol-news-tile__meta">
<dt class="uol-news-tile__meta__term">Date</dt>
<dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">
<time datetime="2020-09-24 20:00">
24 September 2020
</time>
</dd>
</dl>
</div>
</div>
<div class="uol-news-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-news-02.jpg');"></div>
</div>
<div class="uol-news-tile ">
<div class="uol-news-tile__inner">
<div class="uol-news-tile__content">
<h3 class="uol-news-tile__title">
<a href="/news-3" class="uol-news-tile__link">
Universities unite over global climate challenges
</a>
</h3>
<dl class="uol-news-tile__meta">
<dt class="uol-news-tile__meta__term">Date</dt>
<dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">
<time datetime="2020-09-24 20:00">
24 September 2020
</time>
</dd>
</dl>
</div>
</div>
<div class="uol-news-tile__img" role="img" aria-label="Arial photograph of distributary" style="background-image: url('../../placeholders/tiles/background.jpg');"></div>
</div>
<div class="uol-news-tile ">
<div class="uol-news-tile__inner">
<div class="uol-news-tile__content">
<h3 class="uol-news-tile__title">
<a href="/news-4" class="uol-news-tile__link">
Online tool captures real time reactions of voters watching TV leaders’ debates
</a>
</h3>
<dl class="uol-news-tile__meta">
<dt class="uol-news-tile__meta__term">Date</dt>
<dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">
<time datetime="2020-09-24 20:00">
24 September 2020
</time>
</dd>
</dl>
</div>
</div>
<div class="uol-news-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-news-02.jpg');"></div>
</div>
<div class="uol-news-tile ">
<div class="uol-news-tile__inner">
<div class="uol-news-tile__content">
<h3 class="uol-news-tile__title">
<a href="/news-5" class="uol-news-tile__link">
Space research aims to boost Yorkshire economy
</a>
</h3>
<dl class="uol-news-tile__meta">
<dt class="uol-news-tile__meta__term">Date</dt>
<dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">
<time datetime="2020-09-24 20:00">
24 September 2020
</time>
</dd>
</dl>
</div>
</div>
<div class="uol-news-tile__img" role="img" aria-label="Space" style="background-image: url('../../placeholders/tiles/space.jpg');"></div>
</div>
<div class="uol-news-tile ">
<div class="uol-news-tile__inner">
<div class="uol-news-tile__content">
<h3 class="uol-news-tile__title">
<a href="/news-6" class="uol-news-tile__link">
New report showcases civic links between University and Council
</a>
</h3>
<dl class="uol-news-tile__meta">
<dt class="uol-news-tile__meta__term">Date</dt>
<dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">
<time datetime="2020-09-24 20:00">
24 September 2020
</time>
</dd>
</dl>
</div>
</div>
<div class="uol-news-tile__img" role="img" aria-label="Cloth workers court" style="background-image: url('../../placeholders/tiles/cloth-workers-court.jpg');"></div>
</div>
<div class="uol-news-tile ">
<div class="uol-news-tile__inner">
<div class="uol-news-tile__content">
<h3 class="uol-news-tile__title">
<a href="/news-7" class="uol-news-tile__link">
Cancers detected early thanks to pioneering trial
</a>
</h3>
<dl class="uol-news-tile__meta">
<dt class="uol-news-tile__meta__term">Date</dt>
<dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">
<time datetime="2020-09-24 20:00">
24 September 2020
</time>
</dd>
</dl>
</div>
</div>
<div class="uol-news-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-news-02.jpg');"></div>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
.uol-homepage-content-container {
@extend .uol-col-container;
overflow: hidden;
padding: $spacing-6 $spacing-4 0;
display: flex;
@include media("<uol-media-l") {
display: block;
}
}
.uol-homepage-content {
@extend .uol-page-width--max-width;
display: flex;
flex-wrap: wrap;
align-content: flex-start;
margin-top: 0;
// padding: 0 $spacing-4;
@include media(">=uol-media-m", "<uol-media-l") {
padding-left: 0;
padding-right: 0;
}
@include media(">=uol-media-m", "<uol-media-l") {
padding-left: 0;
padding-right: 0;
}
@include media(">=uol-media-l", "<uol-media-xl") {
padding-left: $spacing-1;
}
.uol-side-nav-container--populated + & {
@extend .uol-col;
@extend .uol-col-l-9;
}
}
/*
Specific CSS for studfent hub pattern
Replicate for all home pages
*/
.uol-homepage-content {
// space between crumbtrail line and first widget
.uol-widget-container:first-of-type {
margin-top: 0;
@include media(">=uol-media-l") {
margin-top: $spacing-2;
}
}
// space under all widgets
.uol-widget-container {
margin-bottom: $spacing-7;
// adding next line helps when looking at spacing between
// border: 1px solid black;
@include media(">=uol-media-m") {
margin-bottom: $spacing-8;
}
@include media(">=uol-media-l") {
margin-bottom: $spacing-9;
}
}
.uol-widget__lead {
padding-top: 0;
}
.uol-widget-container:last-of-type {
@include media(">=uol-media-l") {
margin-bottom: $spacing-9 // container has 12, white border 4, aiming for 96 (80 + 12 + 4)
}
}
/*
This specific rule will apply to the online courses hub page
Need to replace with rule which looks at all content containers which end with paragraphs
which are followde by CTA components
*/
// reset thigs which impact on red line above title and reset to single value via padding in title below
.uol-widget {
margin-top: 0;
}
.uol-widget__head {
padding-top: 0;
}
.uol-widget__title {
margin-top: 0;
// padding is red line thickness (8px) plus required gap (16px)
padding-top: 24px;
@include media(">=uol-media-m") {
// padding is red line thickness (8px) plus required gap (24px)
padding-top: 32px;
}
&:before {
top: 0;
}
}
.uol-widget__content {
margin: 0;
.uol-rich-text {
p:last-of-type {
margin-bottom: 0;
}
}
.uol-in-text-cta {
margin-bottom: 0;
}
}
.uol-widget--featured-content {
margin: 0;
.uol-rich-text {
p:last-of-type {
margin-bottom: $spacing-6;
}
}
.uol-widget__title {
padding-top: $spacing-7;
@include media(">=uol-media-m") {
padding-top: $spacing-8;
}
@include media(">=uol-media-l") {
padding-top: $spacing-6;
}
&:before {
top: $spacing-6;
@include media(">=uol-media-m") {
top: $spacing-6;
}
@include media(">=uol-media-l") {
top: 0;
}
}
}
}
.uol-widget--tiles {
margin-top: 0;
}
/*
Negate margin on bottom of cards by having same negative margin on container
Means cards will fit exactly in to widget container
*/
.uol-widget-container__cards {
.uol-widget__content {
margin-bottom: -16px;
@include media(">=uol-media-l") {
margin-bottom: -24px;
}
}
}
}
{
"page_title": "Page title",
"page_type": "standard",
"widgets": [
{
"type": "featured-content",
"title": "A featured content widget",
"content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, aspernatur! Veritatis pariatur velit qui accusantium eius, aliquid nihil error magni harum illum obcaecati sequi libero ab commodi, veniam maiores ipsa?</p>"
},
{
"type": "featured-content",
"title": "A featured content widget with image",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "A descriptive alt text"
},
"content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, aspernatur! Veritatis pariatur velit qui accusantium eius, aliquid nihil error magni harum illum obcaecati sequi libero ab commodi, veniam maiores ipsa?</p>"
},
{
"type": "featured-content",
"title": "A featured content widget with captioned image",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"alt": "A descriptive alt text",
"caption": "Image caption. May be used for © notices"
},
"content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. A, aspernatur! Veritatis pariatur velit qui accusantium eius, aliquid nihil error magni harum illum obcaecati sequi libero ab commodi, veniam maiores ipsa?</p>"
},
{
"type": "featured-content",
"title": "A featured content widget with typography elements",
"lead": "<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur officia pariatur saepe incidunt ea, maxime deleniti itaque beatae, ratione perspiciatis, ipsa voluptatibus unde praesentium facere cumque? Quas tempora optio.</p>",
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"alt": "A descriptive alt text",
"caption": "Image caption. May be used for © notices"
},
"content": "<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p><blockquote><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p></blockquote><p>Magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, <strong>qui dolorem ipsum quia dolor sit amet</strong>.</p><p>Consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore <a href=\"/some-featured-content-link\">et dolore magnam aliquam quaerat voluptatem</a>.</p>"
},
{
"type": "cards",
"title": "A cards widget with single card",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"cards": {
"items": [
{
"image": {
"src": "/placeholders/banner/banner-03.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "First card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
}
]
}
},
{
"type": "cards",
"title": "A collection of 2 cards",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"cards": {
"items": [
{
"image": {
"src": "/placeholders/banner/banner-04.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "First card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"text": "A super informative description"
},
"url": "#",
"title": "Second card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
}
]
}
},
{
"type": "cards",
"title": "A collection of 3 cards",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"cards": {
"items": [
{
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "First card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"text": "A super informative description"
},
"url": "#",
"title": "Second card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-03.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Third card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
}
]
}
},
{
"type": "cards",
"title": "A collection of 4 cards",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"cards": {
"items": [
{
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "First card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-04.jpg",
"text": "A super informative description"
},
"url": "#",
"title": "Second card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-03.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Third card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Fourth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
}
]
}
},
{
"type": "cards",
"title": "A collection of 5 cards",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"cards": {
"items": [
{
"image": {
"src": "/placeholders/banner/banner-03.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "First card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Second card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Third card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Fourth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-04.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Fifth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
}
]
}
},
{
"type": "cards",
"title": "A collection of 6 cards",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"cards": {
"items": [
{
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "First card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"text": "A super informative description"
},
"url": "#",
"title": "Second card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-03.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Third card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Fourth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"text": "A super informative description"
},
"url": "#",
"title": "Fifth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Sixth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
}
]
}
},
{
"type": "cards",
"title": "A collection of 7 cards",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"cards": {
"items": [
{
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "First card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-05.jpg",
"text": "A super informative description"
},
"url": "#",
"title": "Second card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-03.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Third card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Fourth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-02.jpg",
"text": "A super informative description"
},
"url": "#",
"title": "Fifth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Sixth card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
},
{
"image": {
"src": "/placeholders/banner/banner-01.jpg",
"alt": "A super informative description"
},
"url": "#",
"title": "Seventh card",
"text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
}
]
}
},
{
"type": "tiles",
"title": "A collection of 2 tiles",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-1"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-1"
}
]
},
{
"type": "tiles",
"title": "A collection of 3 tiles",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
}
]
},
{
"type": "tiles",
"title": "A collection of 4 tiles",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
}
]
},
{
"type": "tiles",
"title": "A collection of 5 tiles",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
}
]
},
{
"type": "tiles",
"title": "A collection of 6 tiles",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small",
"video"
],
"title": "Like a card a tile contains content and actions",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-5.jpg",
"alt": "Pippa on campus"
},
"link": "/tile-link-"
}
]
},
{
"type": "tiles",
"title": "A collection of 6 tiles (no image)",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"name": "6 tiles no images",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"link": "/tile-link-"
},
{
"type": [
"small",
"video"
],
"title": "Like a card a tile contains content and actions",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
}
]
},
{
"type": "tiles",
"title": "A collection of 2 tiles plus fact",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-1"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-1"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
}
]
},
{
"type": "tiles",
"title": "A collection of 3 tiles plus fact",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
}
]
},
{
"type": "tiles",
"title": "A collection of 4 tiles plus fact",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
}
]
},
{
"type": "tiles",
"title": "A collection of 5 tiles plus fact",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
}
]
},
{
"type": "tiles",
"title": "A collection of 6 tiles plus fact",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-5.jpg",
"alt": "Pippa on campus"
},
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
}
]
},
{
"type": "tiles",
"title": "A collection of 2 tiles plus profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-1"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-1"
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 3 tiles plus profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 4 tiles plus profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 5 tiles plus profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 6 tiles plus profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-5.jpg",
"alt": "Pippa on campus"
},
"link": "/tile-link-"
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 2 tiles plus fact and profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 3 tiles plus fact and profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 4 tiles plus fact and profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 5 tiles plus fact and profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "tiles",
"title": "A collection of 6 tiles plus fact and profile",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"tiles": [
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-1.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"title": "Libraries",
"subTitle": "Four libraries on the main campus provide a variety of study environments",
"img": {
"src": "/placeholders/ph-tiles-2.jpg",
"alt": "Campus view"
},
"link": "/tile-link-"
},
{
"type": [
"small"
],
"title": "Like a card a tile contains content and actions about a single subject",
"link": "/tile-link-"
},
{
"type": [
"video"
],
"title": "Student life at Leeds - its one of a kind",
"img": {
"src": "/placeholders/ph-tiles-3.jpg",
"alt": "Women's lacrosse team"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-4.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
},
"link": "/tile-link-"
},
{
"title": "Like a card a tile contains content and actions about a single subject",
"img": {
"src": "/placeholders/ph-tiles-5.jpg",
"alt": "Pippa on campus"
},
"link": "/tile-link-"
},
{
"type": [
"facts"
],
"fact": {
"title_1": "Top 100",
"title_2": "world ranking university",
"cite": {
"text": "QS World University Rankings 2021",
"url": "/tile-link-1"
}
}
},
{
"type": [
"profile"
],
"link": "/profiles/jessica-osgerby",
"profile": {
"name": "Jessica Osgerby",
"role": "Student",
"position": "BA UOL Design System",
"img": {
"src": "/placeholders/ph-profile-student-11.jpg"
},
"quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
}
}
]
},
{
"type": "news-tiles",
"title": "News Tiles",
"lead": "<p>Default lead, sit amet consectetur adipiscing elit. Nulla vitae elit libero, a pharetra augue. Maecenas faucibus mollis interdum.</p>",
"newsItems": [
{
"title": "University joins £3.4m health data initiative to address major health challenges",
"url": "/news-1",
"meta": [
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-09-24 20:00"
}
]
}
],
"img": {
"src": "/placeholders/tiles/parkinson.jpg",
"alt": "Parkinson building"
}
},
{
"title": "How animals ‘dial-up’ the pain they experience from certain stimuli",
"url": "/news-2",
"meta": [
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-09-24 20:00"
}
]
}
],
"img": {
"src": "/placeholders/ph-news-02.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
}
},
{
"title": "Universities unite over global climate challenges",
"url": "/news-3",
"meta": [
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-09-24 20:00"
}
]
}
],
"img": {
"src": "/placeholders/tiles/background.jpg",
"alt": "Arial photograph of distributary"
}
},
{
"title": "Online tool captures real time reactions of voters watching TV leaders’ debates",
"url": "/news-4",
"meta": [
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-09-24 20:00"
}
]
}
],
"img": {
"src": "/placeholders/ph-news-02.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
}
},
{
"title": "Space research aims to boost Yorkshire economy",
"url": "/news-5",
"meta": [
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-09-24 20:00"
}
]
}
],
"img": {
"src": "/placeholders/tiles/space.jpg",
"alt": "Space"
}
},
{
"title": "New report showcases civic links between University and Council",
"url": "/news-6",
"meta": [
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-09-24 20:00"
}
]
}
],
"img": {
"src": "/placeholders/tiles/cloth-workers-court.jpg",
"alt": "Cloth workers court"
}
},
{
"title": "Cancers detected early thanks to pioneering trial",
"url": "/news-7",
"meta": [
{
"name": "Date",
"values": [
{
"type": "date-time",
"datetime": "2020-09-24 20:00"
}
]
}
],
"img": {
"src": "/placeholders/ph-news-02.jpg",
"alt": "The Brownlee brothers running in a race while spectators watch on"
}
}
]
}
]
}