No notes defined.
{% if items.length %}
<div class="uol-results-items">
{% for item in items %}
<article class="uol-results-items__item {{ 'uol-results-items__item--has-image' if item.image.src }} {{ 'uol-results-items__item--featured' if item.featured }}">
{% if item.featured %}
<div class="uol-results-items__item__featured">Featured {{ item.type }}</div>
{% endif %}
<div class="uol-results-items__item__text-container">
<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.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">Categories</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">
<dt class="uol-results-items__item__meta__label">{{custom_data.title}}</dt>
<dd class="uol-results-items__item__meta__data">{{custom_data.data}}</dd>
</div>
{% endfor %}
{% endif %}
</dl>
{% endif %}
{% if item.text %}
<p class="uol-results-items__item__summary">{{ item.text | safe }}</p>
{% endif %}
</div>
{% 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 %}
</article>
{% endfor %}
</div>
{% endif %}
<div class="uol-results-items">
<article class="uol-results-items__item ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/result-link-1" class="uol-results-items__item__link">MSc by Research in Quaternary environmental change and archaeology</a>
</h2>
<strong class="uol-results-items__item__highlight">Projects</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 heading</dt>
<dd class="uol-results-items__item__meta__data">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</dd>
</div>
<div class="uol-results-items__item__meta__group">
<dt class="uol-results-items__item__meta__label">Application deadline</dt>
<dd class="uol-results-items__item__meta__data">Ongoing</dd>
</div>
<div class="uol-results-items__item__meta__group">
<dt class="uol-results-items__item__meta__label">Funding</dt>
<dd class="uol-results-items__item__meta__data">Non-funded</dd>
</div>
</dl>
</div>
</article>
<article class="uol-results-items__item ">
<div class="uol-results-items__item__text-container">
<h2 class="uol-results-items__item__title">
<a href="/result-link-2" class="uol-results-items__item__link">Palaeontology</a>
</h2>
<dl class="uol-results-items__item__meta">
<div class="uol-results-items__item__meta__group">
<dt class="uol-results-items__item__meta__label">Category label</dt>
<dd class="uol-results-items__item__meta__data">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore.</dd>
</div>
</dl>
</div>
</article>
</div>
.uol-results-items {
padding-top: $spacing-4;
padding-bottom: $spacing-4;
}
.uol-results-items__item {
box-sizing: border-box;
position: relative;
display: flex;
flex-direction: column;
background: $color-grey--faded;
margin-bottom: $spacing-4;
padding: $spacing-4;
border: 1px solid rgba($color-border--light, 0.6);
transition: all 0.25s ease-in-out;
@include media(">=uol-media-l") {
margin-bottom: $spacing-5;
padding: $spacing-5;
flex-direction: row;
}
@include media(">=uol-media-xl") {
margin-bottom: $spacing-6;
padding: $spacing-6;
}
&:hover,
&:focus-within {
box-shadow:
0 15px 25px rgba($color-black--dark, 0.15),
0 5px 10px rgba($color-black--dark, 0.05);
}
}
.uol-results-items__item--featured {
margin-top: $spacing-5;
&::before {
content: "";
position: absolute;
top: -2px;
right: -1px;
left: -1px;
height: 2px;
background: $color-black;
}
}
.uol-results-items__item__featured {
position: absolute;
bottom: 100%;
left: -1px;
padding: $spacing-2 $spacing-4;
background: $color-black;
color: $color-white;
@include media(">=uol-media-l") {
padding: $spacing-2 $spacing-5;
}
@include media(">=uol-media-xl") {
padding: $spacing-2 $spacing-6;
}
}
.uol-results-items__item__text-container {
flex: 1 1 auto;
.uol-results-items__item--has-image & {
@include media(">=uol-media-l") {
flex-basis: calc(65% - #{$spacing-5});
}
@include media(">=uol-media-xl") {
flex-basis: calc(65% - #{$spacing-6});
}
}
}
.uol-results-items__item__title {
margin: 0 0 $spacing-3;
}
.uol-results-items__item__link {
@extend .uol-typography-heading-4;
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-4;
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;
}
.uol-results-items__item__meta__group {
margin-bottom: $spacing-2;
line-height: 1.5rem;
}
.uol-results-items__item__meta__label {
display: inline;
font-weight: $font-weight-bold--sans-serif;
&::after {
content: ":";
}
}
.uol-results-items__item__meta__data {
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__image-container {
order: -1;
position: relative;
padding-bottom: 50%;
height: 0;
overflow: hidden;
margin: -#{$spacing-4} -#{$spacing-4} $spacing-4 -#{$spacing-4};
flex: 1 1 auto;
@include media(">=uol-media-l") {
width: unset;
flex-basis: 35%;
padding-bottom: 18%;
margin: 0 $spacing-5 0 0;
}
@include media(">=uol-media-xl") {
margin: 0 $spacing-6 0 0;
}
}
.uol-results-items__item__img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: auto;
}
.uol-results-items__item__summary {
@extend .uol-typography-paragraph-small;
}
{
"items": [
{
"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"
}
]
},
{
"url": "/result-link-2",
"title": "Palaeontology",
"custom_data": [
{
"title": "Category label",
"data": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore."
}
]
}
]
}