Use the description list widget to display important links that will help users find key pages on the site. Each item is a link that includes a short title and lead sentence, which provides a brief overview of the information that can be found.
The title has a character limit of 75 and the lead sentence has a character limit of 200.
Use the Description List Widget when you want to present a list of links on a home page or section landing page.
The Description List Widget makes use of the @uol-description-list component.
{% if items.length %}
{% extends '@uol-widget' %}
{% block widget_content %}
{% render '@uol-description-list', { items: items } %}
{% endblock %}
{% endif %}
<div class="uol-widget-container">
<div class="uol-widget">
<div class="uol-widget__left-col">
<div class="uol-widget__head">
<h2 class="uol-widget__title">Description list widget</h2>
<div class="uol-widget__lead">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem sequi animi exercitationem sunt. Eos consequatur, eveniet nulla beatae nisi voluptatibus.</p>
</div>
</div>
</div>
<div class="uol-widget__content">
<ul class="uol-description-list">
<li class="uol-description-list__item">
<div class="uol-description-list__item__inner">
<h3 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-1">Working with business</a>
</h3>
<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">
<h3 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-2">Short courses</a>
</h3>
<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">
<h3 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-3">Outreach and public engagement</a>
</h3>
<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">
<h3 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-4">Equality and inclusion</a>
</h3>
<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">
<h3 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>
</h3>
<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">
<h3 class="uol-description-list__item__title">
<a class="uol-description-list__item__link" href="/description-list-link-6">Coronavirus latest</a>
</h3>
<p class="uol-description-list__item__content">Please visit our coronavirus website for the latest information.</p>
</div>
</li>
</ul>
</div>
</div>
</div>
{
"widget_title": "Description list widget",
"widget_lead": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem sequi animi exercitationem sunt. Eos consequatur, eveniet nulla beatae nisi voluptatibus.</p>",
"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"
}
]
}