University of Leeds Design System v1.0.19

Events Widget: 2 Cards

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 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>

        </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"
    }
  ]
}