Guidance

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.

When to use

Use the @uol-widget-events pattern to display a selection of upcoming events, typically on a home page of section introduction page.

When not to use

Do not use this pattern for:

  • anything other than events.
  • events in the past

Developer guidance

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 &ndash; <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 &ndash; 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 &ndash; <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 &ndash; 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 &ndash; <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 &ndash; 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 &ndash; <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 &ndash; 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 &ndash; <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 &ndash; 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 &ndash; <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 &ndash; 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 &ndash; 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 &ndash; 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 &ndash; 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"
    }
  ]
}