University of Leeds Design System v1.0.14.2

Description List Widget

Guidance

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.

When to use

Use the Description List Widget when you want to present a list of links on a home page or section landing page.

When not to use

  • Do not use within page content eg. document pages, blog posts, news etc.
  • Do not use when the title is over 75 characters or the content is over 200 characters.

Developer guidance

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>

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