This component is used within the @uol-widget-description-list pattern to display a list of links.
Use only with the @uol-widget-description-list pattern.
The component accepts an optional headingLevel value which can be used to over-write the default heading level of h3. { headingLevel: 2, }
This component accepts an array of “items”. Each item consists of:
"items": [
{
"title": "Working with business",
"content": "We have an expert team, which supports our academics to exchange vital knowledge and experience with industry and other organisations.",
"link": "/item-1"
},
{
"title": "Short courses",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
"link": "/item-2"
},
...
]
{% if items.length %}
{% set headingTag = 'h' + headingLevel if headingLevel else 'h3' %}
<ul class="uol-description-list">
{% for item in items %}
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<{{ headingTag }} class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="{{ item.link }}">{{ item.title }}</a>
</{{ headingTag }}>
<p class="uol-description-list__item__content">{{ item.content }}</p>
</div>
</li>
{% endfor %}
</ul>
{% endif %}
<ul class="uol-description-list">
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<h2 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-1">Working with business</a>
</h2>
<p class="uol-description-list__item__content">We have an expert team, which supports our academics to exchange vital knowledge and experience with industry and other organisations.</p>
</div>
</li>
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<h2 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-2">Short courses</a>
</h2>
<p class="uol-description-list__item__content">We offer a range of short courses, which are linked to our research and specifically designed for people in industry.</p>
</div>
</li>
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<h2 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-3">Outreach and public engagement</a>
</h2>
<p class="uol-description-list__item__content">We deliver events and activities to showcase this fascinating subject area to students at schools and colleges across the UK.</p>
</div>
</li>
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<h2 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-4">Equality and inclusion</a>
</h2>
<p class="uol-description-list__item__content">The University community is made up of a wide range of people with diverse backgrounds and circumstances, which we value and regard as a great asset.</p>
</div>
</li>
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<h2 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-5">Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo</a>
</h2>
<p class="uol-description-list__item__content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</li>
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<h2 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-6">Coronavirus latest</a>
</h2>
<p class="uol-description-list__item__content">Please visit our coronavirus website for the latest information.</p>
</div>
</li>
</ul>
.uol-description-list {
position: relative;
display: flex;
flex-wrap: wrap;
padding: 0;
@include media(">=uol-media-m") {
margin: 0 -#{$spacing-2};
}
@include media(">=uol-media-l") {
margin: 0 -#{$spacing-3};
}
@include media(">=uol-media-xl") {
margin: 0 -#{$spacing-4};
}
}
.uol-description-list__item {
box-sizing: border-box;
position: relative;
flex: 0 0 100%;
list-style: none;
@include media(">=uol-media-m") {
flex-basis: 50%;
padding: 0 $spacing-2;
}
@include media(">=uol-media-l") {
padding: 0 $spacing-3;
}
@include media(">=uol-media-xl") {
flex-basis: 25%;
padding: 0 $spacing-4;
}
.uol-side-nav-container--populated + .uol-homepage-content & {
@include media(">=uol-media-xl") {
flex-basis: calc(100% / 3);
}
}
}
.uol-description-list__item__inner {
box-sizing: border-box;
padding: $spacing-5 0 $spacing-6;
border-color: $color-border--light;
border-style: solid;
border-width: 2px 0 0;
height: 100%;
&:focus-within {
background-color: $color-brand--faded;
}
}
.uol-description-list__item__title {
@extend .uol-typography-heading-5;
margin: 0 0 $spacing-2;
&:hover {
text-decoration: underline;
}
}
.uol-description-list__item__content {
@extend .uol-typography-paragraph-small;
margin: 0;
}
.uol-description-list__item__link {
text-decoration: none;
&::before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&:hover,
&:focus {
text-decoration: underline;
}
&:focus {
text-decoration-color: $color-brand--bright;
}
}
{
"headingLevel": 2,
"items": [
{
"title": "Working with business",
"content": "We have an expert team, which supports our academics to exchange vital knowledge and experience with industry and other organisations.",
"link": "/description-list-link-1"
},
{
"title": "Short courses",
"content": "We offer a range of short courses, which are linked to our research and specifically designed for people in industry.",
"link": "/description-list-link-2"
},
{
"title": "Outreach and public engagement",
"content": "We deliver events and activities to showcase this fascinating subject area to students at schools and colleges across the UK.",
"link": "/description-list-link-3"
},
{
"title": "Equality and inclusion",
"content": "The University community is made up of a wide range of people with diverse backgrounds and circumstances, which we value and regard as a great asset.",
"link": "/description-list-link-4"
},
{
"title": "Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod tempo",
"content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.",
"link": "/description-list-link-5"
},
{
"title": "Coronavirus latest",
"content": "Please visit our coronavirus website for the latest information.",
"link": "/description-list-link-6"
}
]
}