University of Leeds Design System v1.0.15

Description List Widget: 2 items

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 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>

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