University of Leeds Design System v1.0.15

Event cards: 4 Cards

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 | date('DD MMMM YYYY') !== event.end | date('DD MMMM YYYY') %} 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>
  • 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"
    }
  ]
}