University of Leeds Design System v1.0.15

Results Items: Multiple Category Items

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 event</div>
        </div>

        <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">Search results item title<span class="hide-accessible">: Featured event</span></a>
                    </h2>

                    <strong class="uol-results-items__item__highlight">Subtitle</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>

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

                            <dd class="uol-results-items__item__meta__additional-data">Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>

                        <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">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-1" class="uol-results-items__item__link">Search results item title</a>
                    </h2>

                    <strong class="uol-results-items__item__highlight">Subtitle</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>

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

                            <dd class="uol-results-items__item__meta__additional-data">Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>

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

        <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">Search results item title<span class="hide-accessible">: Featured event</span></a>
                    </h2>

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

                    <p class="uol-results-items__item__introduction">Introduction 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.</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>

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

                            <dd class="uol-results-items__item__meta__additional-data">Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>

                        <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 ">

        <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-1" class="uol-results-items__item__link">Search results item title</a>
                    </h2>

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

                    <p class="uol-results-items__item__introduction">Introduction 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.</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>

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

                            <dd class="uol-results-items__item__meta__additional-data">Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>

                        <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 ">

        <div class="uol-results-items__item__featured">
            <div class="uol-results-items__item__featured__text">Featured event</div>
        </div>

        <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">Search results item title with date and categories<span class="hide-accessible">: Featured event</span></a>
                    </h2>

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

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

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Event date</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Thursday 6 May 2021 - Thursday 20th May, 09.00am - 8.00pm
                            </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>

                            <dd class="uol-results-items__item__meta__data">Networking and staff groups</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>

                        <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 uol-results-items__item__meta__group--has-additional">
                            <dt class="uol-results-items__item__meta__label">Category label</dt>
                            <dd class="uol-results-items__item__meta__data">Category information</dd>

                            <dd class="uol-results-items__item__meta__additional-data">Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>

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

        <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">Search results item title with date and categories<span class="hide-accessible">: Featured event</span></a>
                    </h2>

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

                    <p class="uol-results-items__item__introduction">Introduction 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.</p>

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

                        <div class="uol-results-items__item__meta__group">
                            <dt class="uol-results-items__item__meta__label">Event date</dt>
                            <dd class="uol-results-items__item__meta__data">
                                Thursday 6 May 2021 - Thursday 20th May, 09.00am - 8.00pm
                            </dd>
                        </div>

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

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

                            <dd class="uol-results-items__item__meta__data">Networking and staff groups</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>

                        <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 uol-results-items__item__meta__group--has-additional">
                            <dt class="uol-results-items__item__meta__label">Category label</dt>
                            <dd class="uol-results-items__item__meta__data">Category information</dd>

                            <dd class="uol-results-items__item__meta__additional-data">Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</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>

                        <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>

</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": "event",
      "featured": true,
      "url": "/result-link-1",
      "title": "Search results item title",
      "highlight": "Subtitle",
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information",
          "additional_data": "Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ],
      "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": "event",
      "featured": false,
      "url": "/result-link-1",
      "title": "Search results item title",
      "highlight": "Subtitle",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      },
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information",
          "additional_data": "Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ],
      "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": "event",
      "featured": true,
      "url": "/result-link-1",
      "title": "Search results item title",
      "highlight": "Subtitle",
      "introduction_text": "Introduction 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.",
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information",
          "additional_data": "Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ]
    },
    {
      "type": "event",
      "featured": false,
      "url": "/result-link-1",
      "title": "Search results item title",
      "highlight": "Subtitle",
      "image": {
        "src": "/placeholders/banner/banner-05.jpg",
        "alt": "A super informative description"
      },
      "introduction_text": "Introduction 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.",
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information",
          "additional_data": "Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ]
    },
    {
      "type": "event",
      "featured": true,
      "url": "/result-link-1",
      "title": "Search results item title with date and categories",
      "highlight": "Subtitle",
      "date": "Thursday 6 May 2021 - Thursday 20th May, 09.00am - 8.00pm",
      "categories": [
        {
          "title": "University"
        },
        {
          "title": "Networking and staff groups"
        }
      ],
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information",
          "additional_data": "Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ],
      "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": "event",
      "featured": true,
      "url": "/result-link-1",
      "title": "Search results item title with date and categories",
      "highlight": "Subtitle",
      "date": "Thursday 6 May 2021 - Thursday 20th May, 09.00am - 8.00pm",
      "introduction_text": "Introduction 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.",
      "category_main_title": "Topic area",
      "categories": [
        {
          "title": "University"
        },
        {
          "title": "Networking and staff groups"
        }
      ],
      "custom_data": [
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information",
          "additional_data": "Additional description details element, Lorem ipsum dolor sit amet, consectetur adipiscing elit."
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        },
        {
          "title": "Category label",
          "data": "Category information"
        }
      ]
    }
  ]
}