University of Leeds Design System v1.0.13

Description List: 2 items

Guidance

This component is used within the @uol-widget-description-list pattern to display a list of links.

When to use

Use only with the @uol-widget-description-list pattern.

When not to use

  • Do not use as a standalone component outside of the @uol-widget-description-list pattern.
  • 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 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:

  • “title” - a text string with no HTML tags (Required)
  • “content” - a description of the link with paragraph tags (Required)
  • “link” - an absolute or relative url (Required)
"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>

</ul>
  • Content: 
    .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;
      }
    }
  • URL: /components/raw/uol-description-list/_description-list.scss
  • Filesystem Path: src/library/02-components/description-list/_description-list.scss
  • Size: 1.9 KB 
{
  "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"
    }
  ]
}