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.
There are a number of different pieces of optional content and configurations that can be added.
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:
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'
}
],
},
]Please note the label for each one of these items is fixed, it just allows for the data to be added.
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">
{% 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">
{% 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">
<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">
<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>
.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-4 $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;
}
{
"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"
}
]
}
]
}