University of Leeds Design System v1.0.15

Results Items: Circular Images

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 uol-results-items__circle">

        <div class="uol-results-items__item__featured">
            <div class="uol-results-items__item__featured__text">Featured profile</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/avatars/Avatar-1.jpg" alt="Person name">
            </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-1" class="uol-results-items__item__link">Debbi Tennison<span class="hide-accessible">: Featured profile</span></a>
                    </h2>

                    <strong class="uol-results-items__item__highlight">International fashion marketing and design management</strong>

                    <p class="uol-results-items__item__introduction">When circular images is specified for a results items page this applies to all results items with images on that page. Note, images are cropped to the horizontal centre of the image so ensure faces are central. This item is highlighted as a featured profile.</p>

                </div>
            </div>

        </div>

    </article>

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

        <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/avatars/Avatar-2.jpg" alt="Person Name">
            </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">Name</a>
                    </h2>

                    <strong class="uol-results-items__item__highlight">Subheading</strong>

                    <p class="uol-results-items__item__introduction">Further information such as category information can be added to results items with circular images. These appear underneath the title, category. All text information is displayed under the image or alongside the image for higher screen resolutions.</p>

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

                        <div class="uol-results-items__item__meta__group ">
                            <dt class="uol-results-items__item__meta__label">Category label</dt>
                            <dd class="uol-results-items__item__meta__data">Category information</dd>

                        </div>

                        <div class="uol-results-items__item__meta__group ">
                            <dt class="uol-results-items__item__meta__label">Category label</dt>
                            <dd class="uol-results-items__item__meta__data">Category information</dd>

                        </div>

                    </dl>

                </div>
            </div>

        </div>

    </article>

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

        <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/avatars/Avatar-3.jpg" alt="Person Name">
            </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">Name</a>
                    </h2>

                    <strong class="uol-results-items__item__highlight">Subheading</strong>

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

                        <div class="uol-results-items__item__meta__group ">
                            <dt class="uol-results-items__item__meta__label">Category label</dt>
                            <dd class="uol-results-items__item__meta__data">Category information</dd>

                        </div>

                        <div class="uol-results-items__item__meta__group ">
                            <dt class="uol-results-items__item__meta__label">Category label</dt>
                            <dd class="uol-results-items__item__meta__data">Category information</dd>

                        </div>

                    </dl>

                    <p class="uol-results-items__item__summary">Text information added in to the "introduction_text" field appears before category information, text added to the "text" field appears after.</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">Person name</a>
                    </h2>

                    <strong class="uol-results-items__item__highlight">Subject area</strong>

                    <p class="uol-results-items__item__introduction">When no image is provided the information is displayed as per this results item</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": "profile",
      "featured": true,
      "circle": true,
      "url": "/result-link-1",
      "title": "Debbi Tennison",
      "highlight": "International fashion marketing and design management",
      "image": {
        "src": "/placeholders/avatars/Avatar-1.jpg",
        "alt": "Person name"
      },
      "introduction_text": "When circular images is specified for a results items page this applies to all results items with images on that page. Note, images are cropped to the horizontal centre of the image so ensure faces are central. This item is highlighted as a featured profile."
    },
    {
      "type": "profile",
      "circle": true,
      "url": "/result-link-2",
      "title": "Name",
      "highlight": "Subheading",
      "image": {
        "src": "/placeholders/avatars/Avatar-2.jpg",
        "alt": "Person Name"
      },
      "introduction_text": "Further information such as category information can be added to results items with circular images. These appear underneath the title, category. All text information is displayed under the image or alongside the image for higher screen resolutions.",
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ]
    },
    {
      "type": "profile",
      "circle": true,
      "url": "/result-link-2",
      "title": "Name",
      "highlight": "Subheading",
      "image": {
        "src": "/placeholders/avatars/Avatar-3.jpg",
        "alt": "Person Name"
      },
      "text": "Text information added in to the \"introduction_text\" field appears before category information, text added to the \"text\" field appears after.",
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ]
    },
    {
      "type": "event",
      "url": "/result-link-1",
      "title": "Person name",
      "highlight": "Subject area",
      "introduction_text": "When no image is provided the information is displayed as per this results item"
    }
  ]
}