University of Leeds Design System v1.0.15

Results Items: Courses

Results items guidance

The results items component is used to display the results within a search page.

Each result within a search page that uses the results item component gets displayed in a card which optionally can have a number of different pieces of content.

The required content:

  • Title
  • URL

The optional content you can add

There are a number of different pieces of optional content and configurations that can be added.

General content:

  • A lead sentence
  • A lead sentence followed by/after a category/categories
  • The date (for example for an event), please also note date format ‘date’: ‘Sunday 9th May, 2021’, can be seen in ‘Basic example’
  • A category
  • A category/categories followed by/after a lead sentence
  • A rectangular image (for news, events, blog images)
  • Category label allows for custom data, so could be ‘Topic area’, instead of ‘Categories’ (see basic examples configuration section)

Basic examples configuration

The items are passed as an array, more items can be added.

'items': [
  {
    'url': '/result-link-2',
    'title': 'The Inaugural Edith Pechey Lecture',
    'date': 'Sunday 9th May, 2021',
    'introduction_text' : 'Introduction text, lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'categories': [
      {
        'title': 'University'
      }
    ],
    'text': 'The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.',
    'image': {
      'src': '/placeholders/banner/banner-05.jpg',
      'alt': 'A super informative description'
    },
  }
]

Example of changing the ‘Categories:’ title (to ‘Topic Area:’ in this example).

Note the following: ‘category_main_title’: ‘Topic area’

'items': [
  {
    'url': '/result-link-2',
    'title': 'The Inaugural Edith Pechey Lecture',
    'date': 'Sunday 9th May, 2021',
    'introduction_text' : 'Introduction text, lorem ipsum dolor sit amet, consectetur adipiscing elit.',
    'category_main_title': 'Topic area',
    'categories': [
      {
        'title': 'University'
      }
    ],
    ...
  }
]

The items have a number of different configurations to pick out or highlight the card or content in a particular way. This includes:

  • Featured flag
  • Type of information (for example ‘news’)
  • Highlighted subtitle (this displays a title like ‘Projects’ under the main title)

The featured flag appears above a featured item to let the user know this is a special event or item, ‘featured’: true’.

Setting the type of an item, for example ‘type’: ‘event’, will change the ‘Featured’ flag to ‘Featured event’ and also output the date label as ‘Event date’.

Using ‘type’: ‘news’ will not only change ‘Featured’ to ‘Featured news’, but will also output the date label as ‘Published’.

A highlighted subtitle can also be added, for example ‘highlight’: ‘Projects’ which appears under the main title.

'items': [
  {

    'type': 'event',
    'featured': true,
    'url': '/result-link-1',
    'title': 'MSc by Research in Quaternary environmental change and archaeology',
    'highlight': 'Projects',
    'custom_data': [
      {
        'title': 'Category heading',
        'data': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.'
      },
      {
        'title': 'Application deadline',
        'data': 'Ongoing'
      },
      {
        'title': 'Funding',
        'data': 'Non-funded'
      }
    ],
  },
]

Course related content:

Please note the label for each one of these items is fixed, it just allows for the data to be added.

  • Duration
  • Typical A-level offer
  • UCAS code

Course example configuration

Below is an example of how an item with course content could be configured, using the fixed labels ‘duration’ etc.

'items': [
  {
    'url': '/result-link-1',
    'title': 'Accounting and Finance BSC',
    'duration': '3 Years (Full time)',
    'alevel_offer': 'AAA',
    'ucas_code': 'N420'
  }
]
{% if items.length %}
<div class="uol-results-items ">
  {% for item in items %}
   
    <article class="uol-results-items__item {{ 'uol-results-items__circle' if item.circle }}">
      
      {% if item.featured %}
        <div class="uol-results-items__item__featured">
          <div class="uol-results-items__item__featured__text">Featured {{ item.type }}</div>
        </div>
      {% endif %}

      <div class="uol-results-items__item__content-wrapper {{ 'uol-results-items__item__has-image' if item.image }}">
        
        {% if item.image.src %}
          <div class="uol-results-items__item__image-container">
            <img class="uol-results-items__item__img" src="{{ item.image.src }}" alt="{{ item.image.alt }}">
          </div>
        {% endif %}

        <div class="uol-results-items__item__text-container">
          <div class="uol-results-items__item__text-container__inner">
            
            
              <h2 class="uol-results-items__item__title">
                <a href="{{ item.url }}" class="uol-results-items__item__link">{{ item.title | safe }}{% if item.featured %}<span class="hide-accessible">: Featured {{ item.type }}</span>{% endif %}</a>
              </h2>

              {% if item.highlight %}
                <strong class="uol-results-items__item__highlight">{{ item.highlight | safe }}</strong>
              {% endif %}
            

            {% if item.introduction_text %}
              <p class="uol-results-items__item__introduction">{{ item.introduction_text | safe }}</p>
            {% endif %}

            {% if item.categories.length or item.date or item.duration or item.alevel_offer or item.ucas_code or item.custom_data %}
              <dl class="uol-results-items__item__meta">

                {% if item.duration %}
                  <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Duration</dt>
                    <dd class="uol-results-items__item__meta__data">{{ item.duration | safe }}</dd>
                  </div>
                {% endif %}
                {% if item.alevel_offer %}
                  <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">Typical A-level offer</dt>
                    <dd class="uol-results-items__item__meta__data">{{ item.alevel_offer | safe }}</dd>
                  </div>
                {% endif %}
                {% if item.ucas_code %}
                  <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">UCAS code</dt>
                    <dd class="uol-results-items__item__meta__data">{{ item.ucas_code | safe }}</dd>
                  </div>
                {% endif %}

                {% if item.date %}
                  <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">{{'Event date' if item.type == 'event' else 'Published' }}</dt>
                    <dd class="uol-results-items__item__meta__data">
                      {{ item.date }}
                    </dd>
                  </div>
                {% endif %}

                {% if item.categories.length %}
                  <div class="uol-results-items__item__meta__group">
                    <dt class="uol-results-items__item__meta__label">{% if item.category_main_title %}{{item.category_main_title}}{% else %}Categories{% endif %}</dt>
                    {% for category in item.categories %}
                      <dd class="uol-results-items__item__meta__data">{{ category.title | safe }}</dd>
                    {% endfor %}
                  </div>
                {% endif %}

                {% if item.custom_data.length %}
                  {% for custom_data in item.custom_data %}
                    <div class="uol-results-items__item__meta__group {{ 'uol-results-items__item__meta__group--has-additional' if custom_data.additional_data }}">
                      <dt class="uol-results-items__item__meta__label">{{custom_data.title}}</dt>
                      <dd class="uol-results-items__item__meta__data">{{custom_data.data}}</dd>

                      {% if  custom_data.additional_data %}
                      <dd class="uol-results-items__item__meta__additional-data">{{custom_data.additional_data}}</dd>
                      {% endif %}

                    </div>
                  {% endfor %}
                {% endif %}

              </dl>
            {% endif %}

            {% if item.text %}
              <p class="uol-results-items__item__summary">{{ item.text | safe }}</p>
            {% endif %}
          </div>
        </div>

      </div>

    </article>

  {% endfor %}
</div>
{% endif %}
 
<div class="uol-results-items ">

    <article class="uol-results-items__item ">

        <div class="uol-results-items__item__content-wrapper ">

            <div class="uol-results-items__item__text-container">
                <div class="uol-results-items__item__text-container__inner">

                    <h2 class="uol-results-items__item__title">
                        <a href="/result-link-1" class="uol-results-items__item__link">Accounting and Finance BSC</a>
                    </h2>

                    <p class="uol-results-items__item__introduction">Introduction text, lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                    <dl class="uol-results-items__item__meta">

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Duration</dt>
                            <dd class="uol-results-items__item__meta__data">3 Years (Full time)</dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Typical A-level offer</dt>
                            <dd class="uol-results-items__item__meta__data">AAA</dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">UCAS code</dt>
                            <dd class="uol-results-items__item__meta__data">N420</dd>
                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

                </div>
            </div>

        </div>

    </article>

</div>
  • Content: 
    .uol-results-items {
  padding-top: $spacing-4;
  padding-bottom: $spacing-4;
}

  .uol-results-items__item {
    box-sizing: border-box;
    margin-bottom: $spacing-4;
    box-shadow: 0;
    transition: box-shadow 0.25s ease-in-out;

    @include media(">=uol-media-l") {
      margin-bottom: $spacing-5;
    }

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

    .uol-results-items__item__featured {
      color: $color-white;
      display: flex;
      border-bottom: 2px solid $color-black;

      @include media(">=uol-media-m") {
        flex-direction: row;
      }
    }

    .uol-results-items__item__featured__text {
      padding: $spacing-2 $spacing-4;
      background: $color-black;
      color: $color-white;
    }

    .uol-results-items__item__content-wrapper {
      border: 1px solid rgba($color-border--light, 0.6);
      border-top: 0;
      transition: box-shadow 0.25s ease-in-out;

      &:hover,
      &:focus-within {
        box-shadow:
          0 15px 25px rgba($color-black--dark, 0.15),
          0 5px 10px rgba($color-black--dark, 0.05);
      }
      
      @include media(">=uol-media-m") {
        border: 1px solid rgba($color-border--light, 0.6);
        display: flex;
        gap: 0 16px;
        background: $color-grey--faded;
        padding: $spacing-5 $spacing-4 $spacing-5 $spacing-4;
        box-shadow: 0;
        transition: box-shadow 0.25s ease-in-out;
        position: relative;
      }

      @include media(">=uol-media-l") {
        padding-left: $spacing-5;
        padding-right: $spacing-5;
        gap: 0 24px;
        padding-bottom: 0.875rem; // 14px
      }

      @include media(">=uol-media-xl") {
        gap: 0 32px;
      }
    }

    .uol-results-items__item__text-container {
      background: $color-grey--faded;
      padding: $spacing-5 $spacing-4 $spacing-4 $spacing-4;

      @include media("<=uol-media-m") {
        position: relative;
      }

      @include media(">=uol-media-m") {
        padding-top: 0;
        border: 0;
        background: none;
        padding: 0;
        margin: 0;
        flex-basis: 100%;
      }
    }

    .uol-results-items__item__text-container__inner {

      @include media(">=uol-media-s") {
        max-width: 470px;
      }

      @include media(">=uol-media-m") {
        max-width: 610px;
      }

      @include media(">=uol-media-l") {
        max-width: 564px;
      }

      @include media(">=uol-media-xl") {
        max-width: 674px;
      }

      @include media(">=uol-media-xxl") {
        max-width: 784px;
      }
    }

    .uol-results-items__item__title {
      margin: 0 0 $spacing-2;
    }

    .uol-results-items__item__link {
      @extend .uol-typography-heading-4;

      /*
      Incorrect heading sizes in DS. Hard code these for now.
      */

      font-size: 1.375rem; // 22px
  
      @include media(">=uol-media-m") {
        font-size: 1.75rem; // 28px
      }

      text-decoration: none;

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

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

    .uol-results-items__item__highlight {
      @extend .uol-typography-heading-6;

      margin-top: 0;
      margin-bottom: $spacing-2;
      display: block;
      color: $color-brand;
    }

    .uol-results-items__item__meta {
      @extend %text-size-caption;

      font-weight: $font-weight-medium--sans-serif;
      margin: 0 0 $spacing-2;

      &:last-child {
        margin-bottom: $spacing-4;
      }

    }

      .uol-results-items__item__meta__group {
        margin-bottom: $spacing-2;
        line-height: 1.5rem;
      }

      .uol-results-items__item__meta + p {
        margin-top: 0px;
      }

      .uol-results-items__item__meta__label {
        @extend .uol-typography-paragraph-small;
        
        display: inline;
        font-weight: $font-weight-bold--sans-serif;

        &::after {
          content: ":";
        }
      }

      .uol-results-items__item__meta__data {
        @extend .uol-typography-paragraph-small;

        margin: 0;
        display: inline;

        &::after {
          content: "";
          display: inline-block;
          position: relative;
          width: 1px;
          height: 0.8em;
          background-color: $color-brand;
          margin-left: 0.3em;
          margin-right: 0.15em;
          top: 0.1em;
        }

        &:last-of-type {
          &::after {
            content: none;
          }
        }
      }

        .uol-results-items__item__meta__group--has-additional {
          .uol-results-items__item__meta__data {
            &::after {
              content: none;
            }
          }

          .uol-results-items__item__meta__additional-data {
            @extend .uol-typography-paragraph-small;

            margin: $spacing-2 0 0 0;
          }
        }

    .uol-results-items__item__image-container {
      
      @include media(">=uol-media-m") {
        max-width: 220px;
        flex-basis: 100%;
      }

      @include media(">=uol-media-l") {
        max-width: 290px;
      }

      @include media(">=uol-media-xxl") {
        max-width: 344px;
      }
    }

    .uol-results-items__item__img {
      display: block;
      width: 100%;
      height: auto;

      @include media(">=uol-media-m") {
        margin-bottom: 16px;
      }

      @include media(">=uol-media-l") {
        margin-bottom: 18px;
      }

      &:hover,
      &:focus {
        cursor: pointer;
      }
    }

    .uol-results-items__item__summary,
    .uol-results-items__item__introduction {
      @extend .uol-typography-paragraph-small;
      
      margin-top: 0;
    }

    .uol-results-items__item__introduction {
      margin-bottom: $spacing-2;
    }

    .image-titles-and-content {
      display: flex;
      flex-direction: column;
    }

    
    @media only screen and (min-width: 600px) {
      .image-titles-and-content {
        flex-direction: row;
      }
    }

/*
Below CSS needed to make results items in course pages look as they should
TODO: replace course content results items with new component
*/
.uol-course__content .uol-results-items {
  .uol-results-items__item__title {
    margin-top: 0;
  }
  .uol-results-items__item__meta {
    font-size: 16px;

    @include media(">=uol-media-l") {
      font-size: 18px;
    }
  }
  .uol-results-items__item__meta__label {
    font-weight: 600;
  }
  .uol-results-items__item__content-wrapper {
    border: 1px solid rgba($color-border--light, 0.6);
    padding: 0;
  }
  .uol-results-items__item__text-container {
    padding: $spacing-3 $spacing-4 $spacing-1;

    @include media(">=uol-media-l") {
      padding: $spacing-3 $spacing-5 $spacing-2;
    }
  }
  .uol-results-items__item {
    padding: 0;
  }
}


    

    

/*
.uol-results-items__circle added to top level and applied to all items
.uol-results-items__item__has-image for each image, added when image is available
below rule applies if both criteria met
*/

.uol-results-items__circle .uol-results-items__item__has-image {
  $width320: 97px;
  $width414: 116px;
  $width768: 156px;
  $width1024: 161px;
  $width1440: 179px;
  $width1660: 215px;

  padding: 0;
  gap: 0;
  position: relative;

  .uol-results-items__item__image-container {
    /*
    float left to allow wrapping content so things like subheading can change
    from alongside image to underneath
    */
    
    float: left;
    flex-basis: initial;

    // same padding as text container but with bottom set to 0
    padding: $spacing-5 $spacing-4 0 $spacing-4;

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

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

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

    .uol-results-items__item__img {
      border-radius: 50%;
      object-fit: cover;
      width: $width320;
      height: $width320;

      @include media(">=uol-media-xs") {
        width: $width414;
        height: $width414;
      }

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

      @include media(">=uol-media-l") {
        width: $width1024;
        height: $width1024;
      }

      @include media(">=uol-media-xl") {
        width: $width1440;
        height: $width1440;
      }

      @include media(">=uol-media-xxl") {
        width: $width1660;
        height: $width1660;
      }
    }
  }

  .uol-results-items__item__text-container { 
    // cancels position relative used for square images
    position: initial;
    padding: $spacing-5 $spacing-4 $spacing-6;

    @include media(">=uol-media-m") {
      display: flex;
      flex-direction: column;
      padding: $spacing-5 $spacing-5 $spacing-6 0;
    }

    .uol-results-items__item__headings {
      height: calc(#{$width320} - #{$spacing-4}); // 84px;
      margin-bottom: $spacing-4;

      @include media(">=uol-media-xs") {
        height: calc(#{$width414} - #{$spacing-4}); // 100px;
      }

      // no margin bottom when both heading and subheading alongside image
      @include media(">=uol-media-m") {
        margin-bottom: 0;
        height: initial;
      }
    }

    .uol-results-items__item__title {
      height: calc(#{$width320} - #{$spacing-4}); 
      margin-top: $spacing-4;
      
      // edge case for very long surnames
      word-break: break-word;

      @include media(">=uol-media-xs") {
        height: calc(#{$width414} - #{$spacing-4}); 
      }

      @include media(">=uol-media-m") {
        height: initial;
        margin-top: 0;
      }
    }

    .uol-results-items__item__highlight {
      margin-top: $spacing-4;
      
      @include media(">=uol-media-s") {
        margin-bottom: $spacing-2;
      }

      @include media(">=uol-media-m") {
        margin-top: $spacing-2;
      }
    }

    .uol-results-items__item__text-container__inner {
      
      > *:last-child {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;

        .uol-results-items__item__meta__group:last-of-type {
          margin-bottom: 0;
        }
      }
    }
  }
}
  • URL: /components/raw/uol-results-items/_results-items.scss
  • Filesystem Path: src/library/02-components/results-items/_results-items.scss
  • Size: 10.3 KB 
{
  "items": [
    {
      "url": "/result-link-1",
      "title": "Accounting and Finance BSC",
      "introduction_text": "Introduction text, lorem ipsum dolor sit amet, consectetur adipiscing elit.",
      "duration": "3 Years (Full time)",
      "alevel_offer": "AAA",
      "ucas_code": "N420",
      "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit."
    }
  ]
}