University of Leeds Design System v1.0.15

Tiles

No notes defined.

{% if tiles | length %}
  <div class="uol-tiles">
    {% for tile in tiles %}
      <div class="uol-tile uol-tile--{{ 'img' if tile.img.src else 'no-img' }} {% for type in tile.type %}uol-tile--{{type}} {% endfor %}">
        <div class="uol-tile__inner">
          {% if tile.type == 'profile' %}
              <h3 class="uol-tile__title">Profile: {{ tile.profile.name }}</h3>

              <blockquote class="uol-tile__profile-blockquote">
                <div class="uol-tile__profile-quote">
                  {{ tile.profile.quote | safe }}
                </div>
              </blockquote>

              <p class="uol-tile__profile-detail">
                <strong class="uol-tile__profile-name">{{ tile.profile.name }}</strong>
                <span class="uol-tile__profile-role">{{ tile.profile.role }}</span>
                <span class="uol-tile__profile-position">{{ tile.profile.position }}</span>
              </p>

            {% if tile.profile.img.src %}
              <div class="uol-tile__profile-image"
                role="img"
                aria-label="Portrait of  {{ tile.profile.name }}"
                style="background-image: url('{{ tile.profile.img.src | path }}');"
                ></div>
            {% endif %}

            <a class="uol-tile__profile-link" href="{{ tile.link }}"><span class="hide-accessible">View profile for {{ tile.profile.name }}</span></a>

          {% elseif tile.type == 'facts' %}
            <blockquote class="uol-facts-figures"{% if tile.fact.cite.url %} cite="{{ tile.fact.cite.url }}" {% endif%}>
                <p class="uol-facts-figures__headline">
                    <strong class="uol-facts-figures__headline__1">
                        {{ tile.fact.title_1}}
                    </strong>
                    <span class="uol-facts-figures__headline__2">
                        {{ tile.fact.title_2 }}
                    </span>
                </p>
                {% if tile.fact.cite %}
                    <footer class="uol-facts-figures__footer">
                        <cite class="uol-facts-figures__cite">
                            {% if tile.fact.cite.url %}
                                <a href="{{ tile.fact.cite.url }}" class="uol-facts-figures__link">
                            {% endif%}
                            {{ tile.fact.cite.text }}
                            {% if tile.fact.cite.url %}
                                </a>
                            {% endif%}
                        </cite>
                    </footer>
                {% endif %}
            </blockquote>
          {% else %}
            {% for typePram in tile.type %}
              {% if typePram === 'video' %}<span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>{% endif %}
            {% endfor %}
            <div class="uol-tile__text-container">
              <h3 class="uol-tile__title">
                <a class="uol-tile__link" href="{{ tile.link }}">{{ tile.title }}</a>
              </h3>


              {% if tile.subTitle %}
                <p class="uol-tile__subtitle">{{ tile.subTitle }}</p>
              {% endif %}
            </div>

            {% if tile.img %}
              <div class="uol-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 %}
          {% endif %}
        </div>
      </div>
    {% endfor %}
  </div>
{% endif %}
 
<div class="uol-tiles">

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

            <blockquote class="uol-facts-figures" cite="/tile-link-1">
                <p class="uol-facts-figures__headline">
                    <strong class="uol-facts-figures__headline__1">
                        Top 100
                    </strong>
                    <span class="uol-facts-figures__headline__2">
                        world ranking university
                    </span>
                </p>

                <footer class="uol-facts-figures__footer">
                    <cite class="uol-facts-figures__cite">

                        <a href="/tile-link-1" class="uol-facts-figures__link">

                            QS World University Rankings 2021

                        </a>

                    </cite>
                </footer>

            </blockquote>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-2">Student enterprise</a>
                </h3>

                <p class="uol-tile__subtitle">Take a year out of your studies to develop your own business</p>

            </div>

            <div class="uol-tile__img" role="img" aria-label="Astronaut on a space walk" style="background-image: url('../../placeholders/ph-news-03.jpg');"></div>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-3">Student life at Leeds - its one of a kind</a>
                </h3>

            </div>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-4">Student life at Leeds - its one of a kind</a>
                </h3>

            </div>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-5">Student life at Leeds - its one of a kind</a>
                </h3>

            </div>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-6">Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                </h3>

            </div>

            <div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-news-02.jpg');"></div>

        </div>
    </div>

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

            <blockquote class="uol-facts-figures">
                <p class="uol-facts-figures__headline">
                    <strong class="uol-facts-figures__headline__1">
                        Over 9,000
                    </strong>
                    <span class="uol-facts-figures__headline__2">
                        international students from more than 170 countries
                    </span>
                </p>

            </blockquote>

        </div>
    </div>

    <div class="uol-tile uol-tile--img uol-tile--video ">
        <div class="uol-tile__inner">

            <span role="presentation" class="uol-tile__icon uol-tile__icon--video"></span>

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="https://exampe.com/7">Video example Student life at Leeds - its one of a kind</a>
                </h3>

            </div>

            <div class="uol-tile__img" role="img" aria-label="Extracting a sample from liquid nitrogen" style="background-image: url('../../placeholders/ph-news-04.jpg');"></div>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-8">Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                </h3>

            </div>

            <div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-news-02.jpg');"></div>

        </div>
    </div>

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

            <h3 class="uol-tile__title">Profile: Jessica Osgerby</h3>

            <blockquote class="uol-tile__profile-blockquote">
                <div class="uol-tile__profile-quote">
                    <p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>
                </div>
            </blockquote>

            <p class="uol-tile__profile-detail">
                <strong class="uol-tile__profile-name">Jessica Osgerby</strong>
                <span class="uol-tile__profile-role">Student</span>
                <span class="uol-tile__profile-position">BA UOL Design System</span>
            </p>

            <div class="uol-tile__profile-image" role="img" aria-label="Portrait of  Jessica Osgerby" style="background-image: url('../../placeholders/ph-profile-student-02.jpg');"></div>

            <a class="uol-tile__profile-link" href="/profiles/jessica-osgerby"><span class="hide-accessible">View profile for Jessica Osgerby</span></a>

        </div>
    </div>

    <div class="uol-tile uol-tile--img uol-tile--small ">
        <div class="uol-tile__inner">

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-10">Student life at Leeds - its one of a kind</a>
                </h3>

            </div>

            <div class="uol-tile__img" role="img" aria-label="Extracting a sample from liquid nitrogen" style="background-image: url('../../placeholders/ph-news-04.jpg');"></div>

        </div>
    </div>

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

            <blockquote class="uol-facts-figures" cite="/tile-link-11">
                <p class="uol-facts-figures__headline">
                    <strong class="uol-facts-figures__headline__1">
                        5th
                    </strong>
                    <span class="uol-facts-figures__headline__2">
                        most targeted university in the UK by graduate recruiters
                    </span>
                </p>

                <footer class="uol-facts-figures__footer">
                    <cite class="uol-facts-figures__cite">

                        <a href="/tile-link-11" class="uol-facts-figures__link">

                            The Graduate Market in 2018, High Fliers Research

                        </a>

                    </cite>
                </footer>

            </blockquote>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-12">Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                </h3>

            </div>

            <div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-news-02.jpg');"></div>

        </div>
    </div>

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

            <h3 class="uol-tile__title">Profile: Joe Bloggs</h3>

            <blockquote class="uol-tile__profile-blockquote">
                <div class="uol-tile__profile-quote">
                    <p>I however am a human of few words. I like a pithy quote.</p>
                </div>
            </blockquote>

            <p class="uol-tile__profile-detail">
                <strong class="uol-tile__profile-name">Joe Bloggs</strong>
                <span class="uol-tile__profile-role">Student</span>
                <span class="uol-tile__profile-position">MA Laconic Speech</span>
            </p>

            <div class="uol-tile__profile-image" role="img" aria-label="Portrait of  Joe Bloggs" style="background-image: url('../../placeholders/ph-profile-student-04.jpg');"></div>

            <a class="uol-tile__profile-link" href="/profiles/joe-bloggs"><span class="hide-accessible">View profile for Joe Bloggs</span></a>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-13">Like a card a tile contains content and actions about a single subject</a>
                </h3>

                <p class="uol-tile__subtitle">As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet</p>

            </div>

            <div class="uol-tile__img" role="img" aria-label="Astronaut on a space walk" style="background-image: url('../../placeholders/ph-news-03.jpg');"></div>

        </div>
    </div>

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

            <h3 class="uol-tile__title">Profile: Vernon Morris</h3>

            <blockquote class="uol-tile__profile-blockquote">
                <div class="uol-tile__profile-quote">
                    <p>I however am a man of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an, ipsumss orattyi.</p>
                </div>
            </blockquote>

            <p class="uol-tile__profile-detail">
                <strong class="uol-tile__profile-name">Vernon Morris</strong>
                <span class="uol-tile__profile-role">Staff and Lead Researcher</span>
                <span class="uol-tile__profile-position">School of Design System and The Institute of Service Design at the University of Leeds can my title be any longer</span>
            </p>

            <div class="uol-tile__profile-image" role="img" aria-label="Portrait of  Vernon Morris" style="background-image: url('../../placeholders/ph-profile-student-07.jpg');"></div>

            <a class="uol-tile__profile-link" href="/profiles/vernon-morris"><span class="hide-accessible">View profile for Vernon Morris</span></a>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-14">Student life at Leeds - its one of a kind</a>
                </h3>

            </div>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-15">Lorem ipsum dolor sit amet consectetur adipisicing elit</a>
                </h3>

            </div>

            <div class="uol-tile__img" role="img" aria-label="The Brownlee brothers running in a race while spectators watch on" style="background-image: url('../../placeholders/ph-news-02.jpg');"></div>

        </div>
    </div>

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

            <div class="uol-tile__text-container">
                <h3 class="uol-tile__title">
                    <a class="uol-tile__link" href="/tile-link-16">Student life at Leeds - its one of a kind</a>
                </h3>

            </div>

            <div class="uol-tile__img" role="img" aria-label="Extracting a sample from liquid nitrogen" style="background-image: url('../../placeholders/ph-news-04.jpg');"></div>

        </div>
    </div>

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

  @include media(">=uol-media-m") {
    // padding: 0 $spacing-3;
    // margin: 0 -#{$spacing-1};
  }

  @include media(">=uol-media-xl") {
    // padding: 0;
  }
}

.uol-tile {
  position: relative;
  color: $color-white;
  width: 100%;
  min-height: 11.2rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  background-clip: padding-box;
  margin: 0 0 $spacing-2;

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

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

  @include media(">=uol-media-m") {
    margin: 0;
    border: $spacing-1 solid $color-white;
    min-height: 16rem;
    width: calc(100% / 3 * 2);
  }

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

  @include media(">=uol-media-xl") {
    width: 50%;
    min-height: 20rem;
  }
}

  .uol-tile--small,
  .uol-tile--facts {

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

    @include media(">=uol-media-xl") {
      width: 25%;
    }
  }

  .uol-tile--img {
    // text-shadow: 0 0 50px $color-font--dark;

    // TODO: IE 11 Hack - needs a better approach
    .csspositionsticky & {
      background-color: $color-black;
    }
  }

  .uol-tile--no-img {
    background-color: $color-black;

    &:nth-of-type(6n+2) {
      background: $color-brand--dark;
    }

    &:nth-of-type(6n+3) {
      background: $color-brand;
    }

    &:nth-of-type(6n+4) {
      background: $color-black--dark;
    }

    &:nth-of-type(6n+5) {
      background: $color-warmgrey--dark;
    }

    &:nth-of-type(6n+6) {
      background: $color-blue--dark;
    }

    @include media("<uol-media-m") {
      min-height: 7rem;
    }

    &:hover,
    &:focus-within {
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 4px solid $color-brand--bright;
        // z-index: 1;
      }
    }

    &.uol-tile--facts {
      &:hover,
      &:focus-within {
        &::after {
          content: none;
        }
      }
    }

    // + .uol-tile--no-img {
    //   background-color: $color-black;

    //   // Fix issues for profiles and tile backgrounds
    //   &.uol-tile--profile {
    //     background: $color-cream--medium;
    //   }

    //   &.uol-tile--facts {
    //     background: $color-black;
    //   }
    // }

    // + .uol-tile--no-img + .uol-tile--no-img {
    //   background-color: $color-brand;

    //   // Fix issues for profiles and tile backgrounds
    //   &.uol-tile--profile {
    //     background: $color-cream--medium;
    //   }

    //   &.uol-tile--facts {
    //     background: $color-black;
    //   }
    // }
  }

  .uol-tile--profile {
    justify-content: flex-start;
    background: $color-cream--medium;
    color: $color-font;
    transition: background 0.3s ease;

    &.uol-tile--no-img {
      background: $color-cream--medium;
    }

    @include media(">=uol-media-m") {
      width: 100%;
    }

    @include media(">=uol-media-xl") {
      width: 75%;
    }
  }

  .uol-tile__inner {
    box-sizing: border-box;
    padding: $spacing-4;
    z-index: 1;

    @include media("<uol-media-xs") {
      padding: $spacing-2;
    }

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

    .uol-tile--img & {
      @include media("<uol-media-xs") {
        padding: 0;
        display: flex;
        flex-direction: column-reverse;
      }

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

    .uol-tile--profile & {

      @include media(">=uol-media-m") {
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        width: calc(100% / 3 * 2);
      }
    }
  }

  .uol-tile__text-container {

    .uol-tile--img & {
      text-shadow: 0 0 50px $color-black--dark;
      background: $color-black;
      padding: $spacing-2;

      @include media("<uol-media-xs") {
        border: solid $color-black--dark;
        border-width: 0 4px 4px 4px;
        padding: $spacing-1;
      }

      @include media(">=uol-media-xs") {
        background: rgba($color-black, 0.8);
        margin-left: -#{$spacing-2};
        margin-right: -#{$spacing-2};
        margin-bottom: -#{$spacing-2};
      }

      @include media(">=uol-media-m") {
        margin-left: -#{$spacing-4};
        margin-right: -#{$spacing-4};
        margin-bottom: -#{$spacing-4};
      }
    }

    .uol-tile--img:hover & {
      @include media("<uol-media-xs") {
        border-color: $color-brand--bright;
      }
    }

    .uol-tile--small.uol-tile--video &,
    .uol-tile--no-img.uol-tile--video & {
        @include media("<uol-media-m") {
          margin-right: $spacing-7;
        }
    }
  }

  .uol-tile__title {
    @include font-size-responsive(1.25rem, 1.5rem, 1.75rem);
    @include line-height-responsive(1.75rem, 2.25rem, 2.375rem);
    @extend %uol-font-serif;

    font-weight: $font-weight-bold--serif;
    margin: 0;

    .uol-tile--profile & {
      @extend .hide-accessible;
    }
  }

  .uol-tile__subtitle {
    @extend %text-size-paragraph--small;

    display: none;
    margin: $spacing-2 0 0;

    @include media(">=uol-media-m") {
      display: block;
      margin-bottom: $spacing-3;
    }
  }

  .uol-tile__icon {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 0;
  }

    .uol-tile__icon--video {
      @extend %video-icon;

      .uol-tile:focus-within &,
      .uol-tile:hover & {

        &::after {
          transform: scale(1.2);
          transition: transform 0.5s ease;
        }
      }
    }

  .uol-tile__link {
    text-decoration: none;
    color: inherit;
    z-index: 4;

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

      .uol-tile--no-img & {
        text-decoration-color: $color-white;
      }

      // .uol-tile--no-img + .uol-tile--no-img & {
      //   text-decoration-color: $color-brand--bright;
      // }
    }

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

 .uol-tile__img {
    background-position: 50%;
    background-size: cover;
    z-index: -1;
    @include media("<uol-media-xs") {
      display: block;
      padding-bottom: 50%;
    }

    @include media(">=uol-media-xs") {
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }

    &::after {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      // transition: background 0.3s ease;
      z-index: 1;
    }

    .uol-tile--img:hover &,
    .uol-tile--img:focus-within & {
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 4px solid $color-brand--bright;
        z-index: 1;
      }
    }
  }

  .uol-tile__profile-image {
    position: relative;
    width: 8rem;
    height: 8rem;
    background-position: 50%;
    background-size: cover;
    margin: $spacing-3 $spacing-4;
    border-radius: 4px;
    box-sizing: border-box;

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

    @include media(">=uol-media-xs") {
      margin-left: $spacing-6;
    }

    @include media(">=uol-media-s") {
      margin: -3.7rem $spacing-7 $spacing-3 auto;
    }

    @include media(">=uol-media-m") {
      margin: 0;
      position: absolute;
      height: initial;
      top: 0;
      right: 0;
      bottom: 0;
      width: calc(100% / 3 - 1px);
      border-radius: 0;

      .uol-tile:hover & {

        &::after {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
          border: solid $color-brand--bright;
          border-width: 4px 4px 4px 0;
        }
      }
    }

    &::before {
      content: "";
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      box-shadow: inset 0 2px 4px rgba(black, 0.4);
      border-radius: inherit;
    }
  }

  .uol-tile__profile-blockquote {
    margin: 0;
    padding: $spacing-6 0 0 $spacing-4;
    display: flex;
    flex-direction: column;

    @include media(">=uol-media-xs") {
      padding-left: $spacing-6;
    }

    @include media(">=uol-media-s") {
      padding-left: $spacing-7;
      padding-right: $spacing-6;
    }

    @include media(">=uol-media-m") {
      // min-height: calc(100% - 5rem);
      padding-left: $spacing-4;
    }

    @include media(">=uol-media-l") {
      padding-left: 0;
    }
  }

  .uol-tile__profile-quote {
    // margin-bottom: $spacing-4;

    &::before {
      content: "\201C";
      @extend %uol-font-serif--bold;

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

      font-size: 600%;
      height: 1ex;
      display: block;
      position: absolute;
      top: -0.22em;
      left: 0.15em;
      color: $color-brand--bright;

      @include media(">=uol-media-s") {
        left: 0.4em;
      }

      @include media(">=uol-media-m") {
        left: 0.16em;
      }
    }

    p {
      @include font-size-responsive(1.125rem);
      @include line-height-responsive(1.75rem);

      font-family: $font-family-serif;

      &:first-of-type {
        margin-top: 0;
      }

      &:last-of-type {
        margin-bottom: 0;
      }
    }
  }

  .uol-tile__profile-detail {
    margin-bottom: 0;
    padding-left: $spacing-4;

    @include media(">=uol-media-xs") {
      padding-left: $spacing-6;
    }

    @include media(">=uol-media-s") {
      padding-left: $spacing-7;
      max-width: calc(100% - 14rem);
    }

    @include media(">=uol-media-m") {
      max-width: none;
      // min-height: calc(100% - 4rem);
      padding-left: $spacing-4;
    }

    @include media(">=uol-media-l") {
      padding-left: 0;
    }
  }

  .uol-tile__profile-name {
    display: block;
    font-weight: $font-weight-bold--serif;
    color: $color-font--x-light;
  }

  .uol-tile__profile-role,
  .uol-tile__profile-position {
    @include font-size-responsive(0.875rem);
    @include line-height-responsive(1.125rem);

    color: $color-font--x-light;
  }

  .uol-tile__profile-role + .uol-tile__profile-position {

    &::before {
      content: "";
      display: inline-block;
      height: 1.2em;
      width: 1px;
      position: relative;
      top: 0.28em;
      background: $color-brand--bright;
      margin-left: 0.2em;
      margin-right: 0.35em;
    }
  }

  .uol-tile__profile-link {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2;
    background: rgba($color-black--dark, 0);

    @media (-ms-high-contrast: active) {
      background: none;
    }

    &:focus {
      &::after {
        content: "";
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        border: 4px solid $color-brand--bright;
        z-index: 1;
      }
    }
  }

  .uol-tile--facts {
    background: $color-black;
    text-align: center;

    &.uol-tile--no-img {
      background: $color-black;
    }

    .uol-tile__inner {
      height: 100%;
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      justify-content: center;
    }
  }
  • URL: /components/raw/uol-tiles/_tiles.scss
  • Filesystem Path: src/library/02-components/tiles/_tiles.scss
  • Size: 11.7 KB
  • Content: 
    /*
 * @uol-facts-figures
  */

 export default () => {
  const stats = document.querySelectorAll('.uol-facts-figures .uol-facts-figures__headline__1')

  stats.forEach( (stat) => {
      const statText = stat.innerText

      // Wrap each number in a span
      const statTextModified = statText.replace(/((?!,)[0-9,]+)/g, "<span class='uol-facts-figures__headline__1__emphasis'>$1</span>");
      stat.innerHTML = statTextModified
  })
}
  • URL: /components/raw/uol-tiles/facts-figures.js
  • Filesystem Path: src/library/02-components/tiles/facts-figures.js
  • Size: 439 Bytes 
{
  "tiles": [
    {
      "type": [
        "facts"
      ],
      "fact": {
        "title_1": "Top 100",
        "title_2": "world ranking university",
        "cite": {
          "text": "QS World University Rankings 2021",
          "url": "/tile-link-1"
        }
      }
    },
    {
      "title": "Student enterprise",
      "subTitle": "Take a year out of your studies to develop your own business",
      "img": {
        "src": "/placeholders/ph-news-03.jpg",
        "alt": "Astronaut on a space walk"
      },
      "link": "/tile-link-2"
    },
    {
      "type": [
        "small"
      ],
      "title": "Student life at Leeds - its one of a kind",
      "link": "/tile-link-3"
    },
    {
      "type": [
        "small"
      ],
      "title": "Student life at Leeds - its one of a kind",
      "link": "/tile-link-4"
    },
    {
      "type": [
        "small"
      ],
      "title": "Student life at Leeds - its one of a kind",
      "link": "/tile-link-5"
    },
    {
      "title": "Lorem ipsum dolor sit amet consectetur adipisicing elit",
      "img": {
        "src": "/placeholders/ph-news-02.jpg",
        "alt": "The Brownlee brothers running in a race while spectators watch on"
      },
      "link": "/tile-link-6"
    },
    {
      "type": [
        "facts"
      ],
      "fact": {
        "title_1": "Over 9,000",
        "title_2": "international students from more than 170 countries"
      }
    },
    {
      "type": [
        "video"
      ],
      "title": "Video example Student life at Leeds - its one of a kind",
      "img": {
        "src": "/placeholders/ph-news-04.jpg",
        "alt": "Extracting a sample from liquid nitrogen"
      },
      "link": "https://exampe.com/7"
    },
    {
      "title": "Lorem ipsum dolor sit amet consectetur adipisicing elit",
      "img": {
        "src": "/placeholders/ph-news-02.jpg",
        "alt": "The Brownlee brothers running in a race while spectators watch on"
      },
      "link": "/tile-link-8"
    },
    {
      "type": [
        "profile"
      ],
      "link": "/profiles/jessica-osgerby",
      "profile": {
        "name": "Jessica Osgerby",
        "role": "Student",
        "position": "BA UOL Design System",
        "img": {
          "src": "/placeholders/ph-profile-student-02.jpg"
        },
        "quote": "<p>I however am a human of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an.</p>"
      }
    },
    {
      "type": [
        "small"
      ],
      "title": "Student life at Leeds - its one of a kind",
      "img": {
        "src": "/placeholders/ph-news-04.jpg",
        "alt": "Extracting a sample from liquid nitrogen"
      },
      "link": "/tile-link-10"
    },
    {
      "type": [
        "facts"
      ],
      "fact": {
        "title_1": "5th",
        "title_2": "most targeted university in the UK by graduate recruiters",
        "cite": {
          "text": "The Graduate Market in 2018, High Fliers Research",
          "url": "/tile-link-11"
        }
      }
    },
    {
      "title": "Lorem ipsum dolor sit amet consectetur adipisicing elit",
      "img": {
        "src": "/placeholders/ph-news-02.jpg",
        "alt": "The Brownlee brothers running in a race while spectators watch on"
      },
      "link": "/tile-link-12"
    },
    {
      "type": [
        "profile"
      ],
      "link": "/profiles/joe-bloggs",
      "profile": {
        "name": "Joe Bloggs",
        "role": "Student",
        "position": "MA Laconic Speech",
        "img": {
          "src": "/placeholders/ph-profile-student-04.jpg"
        },
        "quote": "<p>I however am a human of few words. I like a pithy quote.</p>"
      }
    },
    {
      "title": "Like a card a tile contains content and actions about a single subject",
      "subTitle": "As well as a title users can add supporting content of up to 140 characters which is exactly how many characters are in this little snippet",
      "img": {
        "src": "/placeholders/ph-news-03.jpg",
        "alt": "Astronaut on a space walk"
      },
      "link": "/tile-link-13"
    },
    {
      "type": [
        "profile"
      ],
      "link": "/profiles/vernon-morris",
      "profile": {
        "name": "Vernon Morris",
        "role": "Staff and Lead Researcher",
        "position": "School of Design System and The Institute of Service Design at the University of Leeds can my title be any longer",
        "img": {
          "src": "/placeholders/ph-profile-student-07.jpg"
        },
        "quote": "<p>I however am a man of many words I like a long quote lorem ipsum dolor sit amet, est te enim consul contentiones, eum ne debet partem. Augue oratio ea mei. An quo equidem rationibus sadipscing, eos habeo molestie ei. Eu sale dolore aliquip sed, sonet facilisis delicatissimi eum an, ipsumss orattyi.</p>"
      }
    },
    {
      "type": [
        "small"
      ],
      "title": "Student life at Leeds - its one of a kind",
      "link": "/tile-link-14"
    },
    {
      "title": "Lorem ipsum dolor sit amet consectetur adipisicing elit",
      "img": {
        "src": "/placeholders/ph-news-02.jpg",
        "alt": "The Brownlee brothers running in a race while spectators watch on"
      },
      "link": "/tile-link-15"
    },
    {
      "title": "Student life at Leeds - its one of a kind",
      "img": {
        "src": "/placeholders/ph-news-04.jpg",
        "alt": "Extracting a sample from liquid nitrogen"
      },
      "link": "/tile-link-16"
    }
  ]
}