Guidance

The @uol-event-cards component lets users see a selection of upcoming events sorted in chronological order.

Each card supports the following data:

  • Title (Required)
  • Link (Required)
  • Start date with time if applicable (Required)
  • End date with time if applicable

When to use

Use the @uol-event-cards component within 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

Start and end dates with time where available should be passed to the component in a as a standard date format, eg: ‘2021-07-19’ or ‘2021-07-25 11:00’

{% if events.length %}
  <div class="events-cards">
    {% for event in events %}
      <div class="event-card-outer">
        <div class="event-card">
          <h3 class="event-card__title">
            <a class="event-card__link" href="{{ event.link }}">{{ event.title }}</a>
          </h3>

          {% if event.start %}
            <div class="event-card__dates">
              <div aria-hidden="true">
                <span class="event-card__date__start-date__day">{{ event.start | date('DD') }}</span>

                {% if event.start | date('DD MMMM YY') !== event.end | date('DD MMMM YY') %}
                  {% if event.start | date('YYYY') !== event.end | date('YYYY') %}
                    {{- event.start | date('MMMM YYYY') -}}
                  {% else %}
                    {%- if event.start | date('MM') !== event.end | date('MM') -%}
                      {{ event.start | date('MMMM') }}
                    {%- endif -%}
                  {% endif %} &ndash; <span class="event-card__date__end-date">{{ event.end | date('DD MMMM YYYY') }}</span>
                {% else %}
                  {{ event.start | date('MMMM YYYY') }}
                {% endif %}
              </div>
              <span class="hide-accessible">{{ event.start | date('DD MMMM YYYY') }}{% if event.start !== event.end %} to {{ event.end | date('DD MMMM YYYY') }}{% endif -%}</span>
            </div>
          {% endif %}

          {% if (event.start | date('HH:mm')) !== "00:00" %}

            {% if (event.start | date('HHmm')) > 1200 %}
              {% set start_period = "pm" %}
            {% else %}
              {% set start_period = "am" %}
            {% endif %}

            {% if (event.end | date('HHmm')) > 1200 %}
              {% set end_period = "pm" %}
            {% else %}
              {% set end_period = "am" %}
            {% endif %}

            {% if start_period == end_period %}
              {% set start_period = null %}
            {% endif %}

            <div class="event-card__time">
              <span aria-hidden="true">
                {{ event.start | date('h:mm') }}{{ start_period }} &ndash; {{ event.end | date('h:mm') }}{{ end_period }}
              </span>
              <span class="hide-accessible">
                {{ event.start | date('h:mm') }}{{ start_period }} to {{ event.end | date('h:mm') }}{{ end_period }}
              </span>
            </div>
          {% endif %}

        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}
<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>
  • Content:
    .events-cards {
      box-sizing: border-box;
    
      @include media(">=uol-media-m") {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        margin: 0 -#{$spacing-2};
      }
    
      @include media(">=uol-media-l") {
        margin: 0 -#{$spacing-3};
      }
    
      @include media(">=uol-media-xl") {
        margin: 0 -#{$spacing-4};
      }
    }
    
    .event-card-outer {
      box-sizing: border-box;
      width: 100%;
    
      @include media(">=uol-media-m") {
        width: 50%;
        padding: 0 $spacing-2;
      }
    
      @include media(">=uol-media-l") {
        padding: 0 $spacing-3;
      }
    
      @include media(">=uol-media-xl") {
        width: 25%;
        padding: 0 $spacing-4;
      }
    
      .uol-side-nav-container--populated + .uol-homepage-content & {
    
        @include media(">=uol-media-l") {
          width: 50%;
        }
    
        @include media(">=uol-media-xl") {
          width: calc(100% / 3);
        }
      }
    }
    
    .event-card {
      display: flex;
      flex-wrap: wrap;
      align-content: flex-start;
      position: relative;
      box-sizing: border-box;
      border-top: 2px solid $color-brand;
      padding: $spacing-4 0 $spacing-6 0;
      height: 100%;
    
      &:focus-within {
        background-color: $color-brand--faded;
      }
    }
    
      .event-card__title {
        @extend .uol-typography-heading-5;
    
        width: 100%;
        margin: $spacing-2 0 $spacing-1;
      }
    
      .event-card__link {
        text-decoration: none;
    
        &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }
    
        .event-card:focus-within &,
        &:hover,
        &:focus {
          text-decoration: underline;
          text-decoration-color: $color-brand--bright;
        }
      }
    
      .event-card__dates {
        order: -1;
        margin-left: 2.25rem;
        margin-top: 0.75rem;
    
        @include media("<=uol-media-m") {
          width: 100%;
        }
    
        @include media(">=uol-media-m") {
          margin-left: 3rem;
          margin-top: 1.5rem;
        }
    
        @include media(">=uol-media-l") {
          margin-left: 3.5rem;
          margin-top: 1.875rem;
        }
      }
    
      .event-card__dates,
      .event-card__time {
        @extend .uol-typography-paragraph-small;
    
        font-weight: $font-weight-medium--sans-serif;
        font-variant-numeric: lining-nums;
      }
    
      .event-card__time {
        width: 100%;
      }
    
      .event-card__date__end-date {
        white-space: nowrap;
      }
    
      .event-card__date__start-date__day {
        @extend .uol-typography-heading-1;
    
        position: absolute;
        left: 0;
        top: $spacing-4;
        font-variant-numeric: lining-nums;
      }
    
  • URL: /components/raw/uol-event-cards/_events-cards.scss
  • Filesystem Path: src/library/02-components/events-cards/_events-cards.scss
  • Size: 2.4 KB
{
  "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"
    }
  ]
}