The @uol-widget-events pattern lets users see a selection of upcoming events sorted in chronological order.
It uses the standard @uol-widget and the @uol-event-cards components.
If there are no events available the entire widget including the widget title and “View all events” link will not display.
Use the @uol-widget-events pattern to display a selection of upcoming events, typically on a home page of section introduction page.
Do not use this pattern for:
Events widgets will normally include a link to a page where all events can be viewed. Use the widget_link object. eg:
'widget_link': {
'url': '/all-events-link',
'text': 'View all events',
}
{% if events.length %}
{% extends '@uol-widget' %}
{% block widget_content %}
{% render '@uol-event-cards', { events: events } %}
{% endblock %}
{% endif %}
<div class="uol-widget-container">
<div class="uol-widget">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">Events widget</h2>
<a class="uol-widget__link" href="/all-events-link">View all events</a>
</div>
</div>
<div class="uol-widget__content">
<div class="events-cards">
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link">The Cottingley Fairies: A Study in Deception</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">19</span>
July 2021
</div>
<span class="hide-accessible">
19 July 2021
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-2">Creating climate-resilient agri-food systems in sub-Saharan Africa</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">25</span>
July – <span class="event-card__date__end-date">25 August 2021</span>
</div>
<span class="hide-accessible">
25 July 2021
to
25 August 2021
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
11:00am – 4:30pm
</span>
<span class="hide-accessible">
11:00am to 4:30pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-3">Global Food and Environment Institute symposium</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">10</span>
October 2021 – <span class="event-card__date__end-date">09 December 2022</span>
</div>
<span class="hide-accessible">
10 October 2021
to
09 December 2022
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
1:00 – 3:30pm
</span>
<span class="hide-accessible">
1:00 to 3:30pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-4">Undergraduate Virtual Open Days</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">19</span>
November 2021 – <span class="event-card__date__end-date">19 November 2022</span>
</div>
<span class="hide-accessible">
19 November 2021
to
19 November 2022
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
1:00 – 2:00pm
</span>
<span class="hide-accessible">
1:00 to 2:00pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-5">Water Woman Inspirational Career Panel</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">22</span>
November 2021
</div>
<span class="hide-accessible">
22 November 2021
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-6">Creating climate-resilient agri-food systems in sub-Saharan Africa</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">25</span>
July – <span class="event-card__date__end-date">25 August 2022</span>
</div>
<span class="hide-accessible">
25 July 2022
to
25 August 2022
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
11:00am – 4:30pm
</span>
<span class="hide-accessible">
11:00am to 4:30pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-7">Your Art Gallery - Virtual Exhibition</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">10</span>
October 2022 – <span class="event-card__date__end-date">09 December 2023</span>
</div>
<span class="hide-accessible">
10 October 2022
to
09 December 2023
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
1:00 – 3:30pm
</span>
<span class="hide-accessible">
1:00 to 3:30pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-8">University of Leeds Through The Ages</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">22</span>
December 2022 – <span class="event-card__date__end-date">22 December 2023</span>
</div>
<span class="hide-accessible">
22 December 2022
to
22 December 2023
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
1:00 – 2:00pm
</span>
<span class="hide-accessible">
1:00 to 2:00pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-8">University of Leeds at COP26</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">26</span>
October 2021
</div>
<span class="hide-accessible">
26 October 2021
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
3:00 – 4:00pm
</span>
<span class="hide-accessible">
3:00 to 4:00pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-8">COP26 – Can bioenergy make a difference?</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">09</span>
November 2021
</div>
<span class="hide-accessible">
09 November 2021
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
2:00 – 5:00pm
</span>
<span class="hide-accessible">
2:00 to 5:00pm
</span>
</div>
</div>
</div>
<div class="event-card-outer">
<div class="event-card">
<h3 class="event-card__title">
<a class="event-card__link" href="/some-event-link-8">COP26 and its legacy: a conversation with Alex Sobel MP</a>
</h3>
<div class="event-card__dates">
<div aria-hidden="true">
<span class="event-card__date__start-date__day">10</span>
November 2021
</div>
<span class="hide-accessible">
10 November 2021
</span>
</div>
<div class="event-card__time">
<span aria-hidden="true">
10:00am – 5:00pm
</span>
<span class="hide-accessible">
10:00am to 5:00pm
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
{
"widget_title": "Events widget",
"widget_link": {
"url": "/all-events-link",
"text": "View all events"
},
"events": [
{
"title": "The Cottingley Fairies: A Study in Deception",
"link": "/some-event-link",
"start": "2021-07-19",
"end": "2021-07-19"
},
{
"title": "Creating climate-resilient agri-food systems in sub-Saharan Africa",
"link": "/some-event-link-2",
"start": "2021-07-25 11:00",
"end": "2021-08-25 16:30"
},
{
"title": "Global Food and Environment Institute symposium",
"link": "/some-event-link-3",
"start": "2021-10-10 13:00",
"end": "2022-12-09 15:30"
},
{
"title": "Undergraduate Virtual Open Days",
"link": "/some-event-link-4",
"start": "2021-11-19 13:00",
"end": "2022-11-19 14:00"
},
{
"title": "Water Woman Inspirational Career Panel",
"link": "/some-event-link-5",
"start": "2021-11-22",
"end": "2021-11-22"
},
{
"title": "Creating climate-resilient agri-food systems in sub-Saharan Africa",
"link": "/some-event-link-6",
"start": "2022-07-25 11:00",
"end": "2022-08-25 16:30"
},
{
"title": "Your Art Gallery - Virtual Exhibition",
"link": "/some-event-link-7",
"start": "2022-10-10 13:00",
"end": "2023-12-09 15:30"
},
{
"title": "University of Leeds Through The Ages",
"link": "/some-event-link-8",
"start": "2022-12-22 13:00",
"end": "2023-12-22 14:00"
},
{
"title": "University of Leeds at COP26",
"link": "/some-event-link-8",
"start": "2021-10-26 15:00",
"end": "2021-10-26 16:00"
},
{
"title": "COP26 – Can bioenergy make a difference?",
"link": "/some-event-link-8",
"start": "2021-11-09 14:00",
"end": "2021-11-09 17:00"
},
{
"title": "COP26 and its legacy: a conversation with Alex Sobel MP",
"link": "/some-event-link-8",
"start": "2021-11-10 10:00",
"end": "2021-11-10 17:00"
}
]
}