University of Leeds Design System v1.0.15

News Tiles: Four News Tiles

Guidance

News Tiles should be used to provide a grid of news topics, each of which links to the full article

The grid can contain four or seven new’s topics.

For websites that have large amounts of news - like leeds.ac.uk which incorporates all the University News, we would recommend utilising the seven-grid layout. For websites that have a minimal amount of news, we would advise you to use the four-grid layout.

When to use

Use when there is a collection of News articles that have relevance to the current page or context

When not to use

Do not use for blogs or imformation pages, use @uol-cards–default instead

Tile options

A tile must have both a title and a URL which links to the complete article

Image guidance

General image guidance is available on the image documentation page.

News tiles image guidance for content editors

News tiles images will have different widths dependent upon number of tiles, device size and orientation.

News tiles images have a 2:1 (width:height) aspect ratio. The advised dimension for a news tile image is 1100px x 550px.

News tiles image guidance for CMS/Template developers

CMS systems which render images to specific sizes (e.g. by utilising scripts which specify sizing parameters) should set the width and height parameters as per the above guidelines.

Configuration

Each news item should contain a date, which is required in the ISO format, within the meta array: ‘YYYY-MM-DD HH:MM’ Tiles should be stored in the newsTiles array and contain the title and `url’ and an optional image.

How the four tiles variant works

When only four tiles are present in the configuration, a class automatically gets added to the tiles parent container, this controls the change in styles for the four tile variant.

Configuration example

'newsTiles': [
  {
    'title': 'University joins £3.4m health data initiative to address major health challenges',
    'url': '/news-1',
    'meta': [
      {
        'name': 'Date',
        'values': [
          {
            'type': 'date-time',
            'datetime': '2020-09-24 20:00'
          }
        ]
      }
    ],
    "img": {
      "src": "/placeholders/tiles/parkinson.jpg",
      "alt": "Parkinson building"
    },
  },
{% if newsTiles | length %}
  <div class="uol-news-tiles {{ 'uol-news-tiles--set-of-four' if newsTiles.length === 4 }}">
    {% for tile in newsTiles %}
      <div class="uol-news-tile {{ 'uol-news-tiles--no-img' if not tile.img }}">
        <div class="uol-news-tile__inner">

          <div class="uol-news-tile__content">
            <h3 class="uol-news-tile__title">
              <a href="{{ tile.url }}" class="uol-news-tile__link">
                {{ tile.title | safe }}
              </a>
            </h3>

            {% if tile.meta.length > 0 %}
              <dl class="uol-news-tile__meta">
                {% for meta in tile.meta %}
                  <dt class="uol-news-tile__meta__term">{{ meta.name }}</dt>
                    {% for value in meta.values %}
                      <dd class="uol-news-tile__meta__data {{ 'uol-news-tile__meta__data--date' if value.type == 'date-time'}}">
                        {% if value.type == 'date-time' %}
                          <time datetime="{{ value.datetime }}">
                            {{ value.datetime | date('D MMMM YYYY') }}
                          </time>
                        {% else %}
                          {{ value.label }}
                        {% endif %}
                      </dd>
                  {% endfor %}
                {% endfor %}
              </dl>
          {% endif %}
          </div>

        </div>

        {% if tile.img %}
          <div class="uol-news-tile__img"
              role="{{ 'img' if tile.img.src else 'presentation' }}"
              {% if tile.img.alt %} aria-label="{{ tile.img.alt }}" {% endif %}
              {% if tile.img.src %}style="background-image: url('{{ tile.img.src | path }}');"{% endif %}
          ></div>
        {% endif %}

      </div>
    {% endfor %}
  </div>
{% endif %}
 
<div class="uol-news-tiles uol-news-tiles--set-of-four">

    <div class="uol-news-tile ">
        <div class="uol-news-tile__inner">

            <div class="uol-news-tile__content">
                <h3 class="uol-news-tile__title">
                    <a href="/news-1" class="uol-news-tile__link">
                        University joins £3.4m health data initiative to address major health challenges
                    </a>
                </h3>

                <dl class="uol-news-tile__meta">

                    <dt class="uol-news-tile__meta__term">Date</dt>

                    <dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">

                        <time datetime="2020-09-24 20:00">
                            24 September 2020
                        </time>

                    </dd>

                </dl>

            </div>

        </div>

        <div class="uol-news-tile__img" role="img" aria-label="Parkinson building" style="background-image: url('../../placeholders/tiles/parkinson.jpg');"></div>

    </div>

    <div class="uol-news-tile uol-news-tiles--no-img">
        <div class="uol-news-tile__inner">

            <div class="uol-news-tile__content">
                <h3 class="uol-news-tile__title">
                    <a href="/news-2" class="uol-news-tile__link">
                        How animals &lsquo;dial-up&rsquo; the pain they experience from certain stimuli
                    </a>
                </h3>

                <dl class="uol-news-tile__meta">

                    <dt class="uol-news-tile__meta__term">Date</dt>

                    <dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">

                        <time datetime="2020-09-24 20:00">
                            24 September 2020
                        </time>

                    </dd>

                </dl>

            </div>

        </div>

    </div>

    <div class="uol-news-tile ">
        <div class="uol-news-tile__inner">

            <div class="uol-news-tile__content">
                <h3 class="uol-news-tile__title">
                    <a href="/news-3" class="uol-news-tile__link">
                        Universities unite over global climate challenges
                    </a>
                </h3>

                <dl class="uol-news-tile__meta">

                    <dt class="uol-news-tile__meta__term">Date</dt>

                    <dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">

                        <time datetime="2020-09-24 20:00">
                            24 September 2020
                        </time>

                    </dd>

                </dl>

            </div>

        </div>

        <div class="uol-news-tile__img" role="img" aria-label="Arial photograph of distributary" style="background-image: url('../../placeholders/tiles/background.jpg');"></div>

    </div>

    <div class="uol-news-tile uol-news-tiles--no-img">
        <div class="uol-news-tile__inner">

            <div class="uol-news-tile__content">
                <h3 class="uol-news-tile__title">
                    <a href="/news-4" class="uol-news-tile__link">
                        Online tool captures real time reactions of voters watching TV leaders’ debates
                    </a>
                </h3>

                <dl class="uol-news-tile__meta">

                    <dt class="uol-news-tile__meta__term">Date</dt>

                    <dd class="uol-news-tile__meta__data uol-news-tile__meta__data--date">

                        <time datetime="2020-09-24 20:00">
                            24 September 2020
                        </time>

                    </dd>

                </dl>

            </div>

        </div>

    </div>

</div>
  • Content: 
    .uol-news-tiles {
  display: flex;
  flex-wrap: wrap;
}

.uol-news-tile {
  border: 1px solid #fff;
  position: relative;
  box-sizing: border-box;
  background-color: $color-black--light;
  color: $color-white;
  width: 100%;
  min-height: 12rem;

  @include media(">=uol-media-xs") {
    min-height: 13rem;
  }

  @include media(">=uol-media-s") {
    min-height: 18.75rem;
    width: 50%;

    &:first-of-type {
      width: 100%;
    }
  }

  @include media(">=uol-media-l") {
    min-height: 21.5rem;
    width: calc(100% / 3);

    &:first-of-type {
      width: calc(100% / 3 * 2);
    }
  }

  @include media(">=uol-media-xl") {
    min-height: 22.5rem;
    width: 25%;

    &:first-of-type {
      width: 50%;
    }
  }

  &:nth-of-type(2) {
    background-color: $color-brand;

    .uol-news-tile__img {
      display: none;
    }
  }

  &:nth-of-type(3) {
    background-color: $color-warmgrey--dark;
  }

  &:nth-of-type(5) {
    background-color: $color-grey--dark;
  }

  &:nth-of-type(4) {
    background-color: $color-brand--dark;

    .uol-news-tile__img {
      display: none;
    }
  }

  &:nth-of-type(7) {
    background-color: $color-black;

    .uol-news-tile__img {
      display: none;
    }
  }

  &::after {
    border: 4px solid rgba($color-brand--bright, 0);
  }

  &:focus-within {
    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      border-color: $color-brand--bright;
    }
  }
}

  .uol-news-tile__inner {
    z-index: 8;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: end;
    padding: $spacing-8 $spacing-4 $spacing-4 $spacing-4;
    box-sizing: border-box;

    @include media(">=uol-media-s") {
      // TODO: Add to variables file
      padding-top: 128px;
    }

    .uol-news-tile:hover &,
    .uol-news-tile:focus-within & {
      &::before {
        background-color: $color-brand--bright;
      }
    }

    .uol-news-tile:nth-of-type(2) &,
    .uol-news-tile:nth-of-type(4) &,
    .uol-news-tile:nth-of-type(7) & {
      &::before {
        background-color: $color-white;
      }
    }
  }

  .uol-news-tile__content {
    &::before {
      content: "";
      position: relative;
      display: inline-block;
      top: -#{$spacing-3};
      left: 0;
      width: $spacing-5;
      height: $spacing-2;
      background-color: $color-white;
      transition: background 0.3s ease;

      @include media(">=uol-media-m") {
        width: $spacing-6;
      }

      .uol-news-tile:focus-within &,
      .uol-news-tile:hover & {
        background-color: $color-brand--bright;
      }

      .uol-news-tile:nth-of-type(2) &,
      .uol-news-tile:nth-of-type(4) &,
      .uol-news-tile:nth-of-type(7) &,
      .uol-news-tiles--no-img:focus-within &,
      .uol-news-tiles--no-img:hover &
      {
        background-color: #FFF;
      }
    }
  }

  .uol-news-tile__title {
    @extend .uol-typography-heading-4;
    @include font-size-responsive(1.25rem, 1.5rem, 1.75rem);
    @include line-height-responsive(1.75rem, 2rem, 2.375rem);

    margin: 0;
    font-variant-numeric: lining-nums;
  }

  .uol-news-tile__link {
    color: inherit;
    text-decoration: none;
    background: rgba($color-black--dark, 0.6);
    box-shadow: -.5rem 0 0 0 rgba(10,2,2,.6),.5rem 0 0 0 rgba(10,2,2,.6);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    &:hover,
    &:focus {
      text-decoration: underline;
      text-decoration-color: $color-brand--bright;
    }

    .uol-news-tile:nth-of-type(2) &,
    .uol-news-tile:nth-of-type(4) &,
    .uol-news-tile:nth-of-type(7) &,
    .uol-news-tiles--no-img & {
      background: transparent;
      box-shadow: none;

      &:hover,
      &:focus {
        text-decoration-color: $color-white;
      }
    }
  }

  .uol-news-tile__meta {
    @extend .uol-typography-paragraph-small;

    margin: $spacing-3 0 0;
  }

    .uol-news-tile__meta__term {
      @extend .hide-accessible;
    }

    .uol-news-tile__meta__data {
      display: inline;
      margin: 0;

      + .uol-news-tile__meta__data {
        &::before {
          content: ",";
          position: relative;
          left: -0.2em;
        }
      }
    }

    .uol-news-tile__meta__data--date {
      display: inline-block;
      font-variant-numeric: lining-nums;
      background: rgba($color-black--dark, 0.6);
      padding-left: $spacing-2;
      padding-right: $spacing-2;
      margin-left: -$spacing-2;
      -webkit-box-decoration-break: clone;
      box-decoration-break: clone;

      .uol-news-tile:nth-of-type(2) &,
      .uol-news-tile:nth-of-type(4) &,
      .uol-news-tile:nth-of-type(7) &,
      .uol-news-tiles--no-img & {
        background: transparent;
      }
    }

    .uol-news-tile__meta__link {
      color: inherit;
      text-decoration: none;

      &:hover,
      &:focus {
        text-decoration: underline;
      }
    }

  .uol-news-tile__img {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-position: 50%;
    background-size: cover;

    @media (-ms-high-contrast: active), (forced-colors: active) {
      -ms-high-contrast-adjust: none;
      forced-color-adjust: CanvasText;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      background-color: rgba($color-black, 0.1);
      transition: background 0.3s ease;

      .uol-news-tile:hover &,
      .uol-news-tile:focus-within & {
        background-color: rgba($color-black, 0);
      }
    }
  }

  .uol-news-tiles--set-of-four {
    @include media(">=uol-media-s") {
      .uol-news-tile {
        width: calc(100% / 2);
      }
    }

    @include media(">=uol-media-l") {
      .uol-news-tile {
        width: calc(100% / 3);
      }
    }

    @include media(">=uol-media-xl") {
      .uol-news-tile {
        width: calc(100% / 4);
      }
    }
  }
  • URL: /components/raw/uol-news-tiles/_news-tiles.scss
  • Filesystem Path: src/library/02-components/news-tiles/_news-tiles.scss
  • Size: 6.1 KB 
{
  "newsTiles": [
    {
      "title": "University joins £3.4m health data initiative to address major health challenges",
      "url": "/news-1",
      "meta": [
        {
          "name": "Date",
          "values": [
            {
              "type": "date-time",
              "datetime": "2020-09-24 20:00"
            }
          ]
        }
      ],
      "img": {
        "src": "/placeholders/tiles/parkinson.jpg",
        "alt": "Parkinson building"
      }
    },
    {
      "title": "How animals &lsquo;dial-up&rsquo; the pain they experience from certain stimuli",
      "url": "/news-2",
      "meta": [
        {
          "name": "Date",
          "values": [
            {
              "type": "date-time",
              "datetime": "2020-09-24 20:00"
            }
          ]
        }
      ]
    },
    {
      "title": "Universities unite over global climate challenges",
      "url": "/news-3",
      "meta": [
        {
          "name": "Date",
          "values": [
            {
              "type": "date-time",
              "datetime": "2020-09-24 20:00"
            }
          ]
        }
      ],
      "img": {
        "src": "/placeholders/tiles/background.jpg",
        "alt": "Arial photograph of distributary"
      }
    },
    {
      "title": "Online tool captures real time reactions of voters watching TV leaders’ debates",
      "url": "/news-4",
      "meta": [
        {
          "name": "Date",
          "values": [
            {
              "type": "date-time",
              "datetime": "2020-09-24 20:00"
            }
          ]
        }
      ]
    }
  ]
}