University of Leeds Design System v1.0.15

Results Items: Default

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__featured">
            <div class="uol-results-items__item__featured__text">Featured news</div>
        </div>

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

            <div class="uol-results-items__item__image-container">
                <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
            </div>

            <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-2" class="uol-results-items__item__link">The Inaugural Edith Pechey Lecture<span class="hide-accessible">: Featured news</span></a>
                    </h2>

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

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Sunday 9th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">University</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.</p>

                </div>
            </div>

        </div>

    </article>

    <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">Ilkley Literature Festival event: &ldquo;Illuminating the Chaos and Obscurity&rdquo;: Ferrante and Dostoevsky in Dialogue</a>
                    </h2>

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

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Saturday 8th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">University</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">Conversation between Dr Sarah Hudspith, a scholar of Dostoevsky, and Dr Olivia Santovetti, an expert on Ferrante, both members of the University of Leeds Centre for World Literature.</p>

                </div>
            </div>

        </div>

    </article>

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

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

            <div class="uol-results-items__item__image-container">
                <img class="uol-results-items__item__img" src="/placeholders/banner/banner-05.jpg" alt="A super informative description">
            </div>

            <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-2" class="uol-results-items__item__link">The Inaugural Edith Pechey Lecture</a>
                    </h2>

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

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Published</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Friday 7th May, 2021
                            </dd>
                        </div>

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Categories</dt>

                            <dd class="uol-results-items__item__meta__data">University</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">The inaugural Edith Pechey online lecture with guest speaker Professor Simone Buitendijk, University of Leeds Vice Chancellor.</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": [
    {
      "type": "news",
      "featured": true,
      "url": "/result-link-2",
      "title": "The Inaugural Edith Pechey Lecture",
      "date": "Sunday 9th May, 2021",
      "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"
      }
    },
    {
      "type": "news",
      "url": "/result-link-1",
      "date": "Saturday 8th May, 2021",
      "categories": [
        {
          "title": "University"
        }
      ],
      "title": "Ilkley Literature Festival event: &ldquo;Illuminating the Chaos and Obscurity&rdquo;: Ferrante and Dostoevsky in Dialogue",
      "text": "Conversation between Dr Sarah Hudspith, a scholar of Dostoevsky, and Dr Olivia Santovetti, an expert on Ferrante, both members of the University of Leeds Centre for World Literature."
    },
    {
      "type": "news",
      "url": "/result-link-2",
      "title": "The Inaugural Edith Pechey Lecture",
      "date": "Friday 7th May, 2021",
      "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"
      }
    }
  ]
}