University of Leeds Design System v1.0.19

Linked list: Default

Guidance

This component is used within the @uol-widget-linked-list pattern to display a list of links in a prominent way.

When to use

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

When not to use

  • Do not use as a standalone component outside of the @uol-widget-linked-list pattern.
  • Do not use within page content eg. document pages, blog posts, news etc.

Developer guidance

This component accepts an array of “items”. Each item consists of:

  • “text” - a text string with no HTML tags (Required)
  • “url” - an absolute or relative url (Required)
    "items": [
{
  "text": "School of Typography",
  "url": "/item-1"
},
{
  "text": "School of Web Design",
  "url": "/item-2"
},
...
]
{% if items.length %}
  <ul class="uol-linked-list">
    {% for item in items %}
      <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="{{ item.url }}">{{ item.text }}</a>
      </li>
    {% endfor %}
  </ul>
{% endif %}
 
<ul class="uol-linked-list">

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-1">School of Typography</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-2">School of Web Design</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-3">School of Branding</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-4">School of Fine Art History of Art and Print Illustration</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-5">School of Media Queries</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-6">School of Media and Communications</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-7">School of New CSS Tricks</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-8">School of Console Commands</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-9">School of Front-end Development</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-10">Institute of Accessibility for Everyone</a>
    </li>

    <li class="uol-linked-list__item">
        <a class="uol-linked-list__link" href="/item-11">Institute of Content Design</a>
    </li>

</ul>
  • Content: 
    .uol-linked-list {
  padding: 0;
  margin: 0 $spacing-4 0 0;
  list-style-type: none;

  @include media(">=uol-media-m") {
    column-count: 2;
    column-gap: 1.75rem;
  }

  @include media(">=uol-media-l") {
    column-gap: 2.25rem;
  }

  @include media("<uol-media-xl") {
    max-width: 60rem;
  }

  @include media(">=uol-media-xl") {
    column-count: 4;
    column-gap: 2.75rem;

    .uol-side-nav-container--populated + .uol-homepage-content & {
      column-count: 3;
    }
  }
}
  //specifics when in a article page
  .uol-article, .uol-page {
    .uol-linked-list {
      column-count: 1;
      padding-left: 0;
    }

    p + .uol-linked-list {
      @include media(">=uol-media-m") {
        padding-top: $spacing-2;
      }
    }
  }



.uol-widget--linked-list {
  max-width: 100%;

  .uol-widget__head {
    padding-bottom: 0;

    @include media(">=uol-media-m") {
      padding-bottom: $spacing-2;
    }

    @include media(">=uol-media-l") {
      padding-bottom: $spacing-4;
    }
  }

  .uol-widget__content {
    margin-top: $spacing-3;
  }
}

  .uol-linked-list__item {
    @include font-size-responsive(1.125rem, 1.25rem);

    box-sizing: border-box;
    color: $color-font;
    break-inside: avoid;
    padding: $spacing-1 0;
    display: block;
    width: 100%;
  }

    .uol-linked-list__link {
      @include line-height-responsive(1.778, 1.6);

      margin-left: $spacing-4;
      padding: 0.375rem 0;
      display: inline-block;
      position: relative;

      @include media(">=uol-media-l") {
        margin-left: $spacing-4;
      }

      &::before {
        content: "";
        position: absolute;
        height: 4px;
        width: 4px;
        background-color: $color-brand;
        left: -14px;
        top: 1.2rem;

        @media (-ms-high-contrast: active), (forced-colors: active) {
          background-color: currentColor;
        }
      }

      &:hover {
        text-decoration: underline;
        text-decoration-color: $color-brand--bright;
        text-decoration-thickness: 3px;
      }

      &:focus {
        outline-color: transparent;
        background: $color-brand--faded;
        text-underline-offset: 2px;
        text-decoration-thickness: 3px;
        text-decoration-color: $color-brand--bright;
      }

      .no-csspositionsticky & {
        &:hover,
        &:focus {
          text-decoration: none;
          border-bottom: 3px solid $color-brand--bright;
        }
      }
    }


.uol-widget__content {
  
  // linked list only one column when in content widget
  .uol-linked-list {

    padding-left: 0;
  
    @include media(">=uol-media-m") {
      column-count: 1;
    }

    @include media(">=uol-media-xl") {
      column-count: 1;
    }
  }
}
  • URL: /components/raw/uol-linked-list/_linked-list.scss
  • Filesystem Path: src/library/02-components/linked-list/_linked-list.scss
  • Size: 2.7 KB 
{
  "items": [
    {
      "text": "School of Typography",
      "url": "/item-1"
    },
    {
      "text": "School of Web Design",
      "url": "/item-2"
    },
    {
      "text": "School of Branding",
      "url": "/item-3"
    },
    {
      "text": "School of Fine Art History of Art and Print Illustration",
      "url": "/item-4"
    },
    {
      "text": "School of Media Queries",
      "url": "/item-5"
    },
    {
      "text": "School of Media and Communications",
      "url": "/item-6"
    },
    {
      "text": "School of  New CSS Tricks",
      "url": "/item-7"
    },
    {
      "text": "School of Console Commands",
      "url": "/item-8"
    },
    {
      "text": "School of Front-end Development",
      "url": "/item-9"
    },
    {
      "text": "Institute of Accessibility for Everyone",
      "url": "/item-10"
    },
    {
      "text": "Institute of Content Design",
      "url": "/item-11"
    }
  ]
}