Guidance

This component is used within the @uol-widget-list-featured pattern to display important information in an numbered or unnumbered list.

When to use

When not to use

  • Do not use as a standalone component outside of the @uol-widget-list-featured pattern.
  • Do not use within page content eg. document pages, blog posts, news etc.
  • Do not use when the any of the items are over 400 characters or contain typographical or other content (eg images) not listed above.

Developer guidance

If you are providing a text editor to allow your editors to populate the list content, you should ensure that only the following html is allowed:

  • bold <strong>
  • italics <em>
  • superscript <sup>
  • subscript <sub>
  • links <a>

The content should not allow the inclusion of or output of paragraph tags <p>, line breaks <b> or any other markup not in the above list.

The maximum character limit of of 400 (not including markup tags) should be enforced on content for each item.

<{{ 'ol' if type==='ordered' else 'ul role=list' }} class="uol-list-featured">
  {% for item in items %}
    <li class="uol-list-featured__item {{ 'uol-list-featured__item--ordered' if type==='ordered' }}" {{ 'role=listitem' if type!=='ordered' }}>{{ item.content | safe }}</li>
  {% endfor %}
</{{ 'ol' if type==='ordered' else 'ul' }}>
<ul role=list class="uol-list-featured">

    <li class="uol-list-featured__item " role=listitem>Ensure that its research environment delivers high quality outputs to academia and the financial sectors. We strive for research excellence.</li>

    <li class="uol-list-featured__item " role=listitem>Promote and encourage a lively and successful doctoral community. While the number of staff focusing on banking research at Leeds is already large by UK standards, the outputs of IBI will be leveraged via close working partnerships with its doctoral students.</li>

    <li class="uol-list-featured__item " role=listitem>To address key issues facing the global banking industry.</li>

    <li class="uol-list-featured__item " role=listitem>Develop and support existing academic staff to achieve their potential and appoint high achievers. IBI has a clear strategy of combining experienced and early career academics, creating a stream of research papers and reports from complementary and overlapping interests and expertise.</li>

    <li class="uol-list-featured__item " role=listitem>Success will be achieved by a series of ‘milestone outputs’ from the individual and collective efforts of the team: discussion papers introducing novel research ideas and findings, journal publications with ABS 4* and 4 ratings, industry-relevant reports, and the progression of graduate students and staff members.</li>

</ul>
  • Content:
    .uol-list-featured {
      list-style-type: none;
      margin: 0;
      padding: 0;
      max-width: 52rem;
    }
    
    .uol-list-featured__item {
      @include font-size-responsive(1.125rem, 1.125rem, 1.25rem);
      @include line-height-responsive(1.556, 1.6);
    
      position: relative;
      margin-bottom: $spacing-4;
      padding: $spacing-2 0 $spacing-2 $spacing-6;
    
      @include media(">=uol-media-l") {
        margin-bottom: $spacing-5;
      }
    
      @include media(">=uol-media-xl") {
        margin-bottom: $spacing-6;
      }
    
      &::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        height: 100%;
        width: $spacing-4;
        background-color: $color-grey--faded;
        z-index: -1;
      }
    
      a {
        @include link_focus(2px);
    
        padding: 0 1px;
        margin: 0 -1px;
    
        &:hover {
          text-decoration-color: $color-brand--bright;
          text-decoration-thickness: 3px;
          text-underline-offset: 2px;
          transition: all 0s;
        }
    
        .no-csspositionsticky & {
          &:hover {
            text-decoration: none;
            border-bottom: 3px solid $color-brand--bright;
          }
        }
      }
    }
    
    .uol-list-featured__item--ordered {
      padding: $spacing-4 0 $spacing-4 ($spacing-5 + $spacing-6);
      counter-increment: list-number;
      font-variant-numeric: lining-nums;
    
      &::before {
        font-size: 1.75rem;
        content: counter(list-number) ".";
        position: absolute;
        left: $spacing-4;
        font-family: $font-family-serif;
        color: $color-black;
        top: $spacing-4;
        line-height: 1;
        font-weight: $font-weight-bold--serif;
    
        @include media(">=uol-media-m") {
          font-size: 2rem;
          top: 50%;
          transform: translateY(-50%);
        }
    
        @include media(">=uol-media-l") {
          font-size: 2.1875rem;
        }
      }
    
      &::after {
        width: ($spacing-4 + $spacing-3);
      }
    }
    
  • URL: /components/raw/uol-list-featured/_list-featured.scss
  • Filesystem Path: src/library/02-components/list-featured/_list-featured.scss
  • Size: 1.8 KB
{
  "type": "unordered",
  "items": [
    {
      "content": "Ensure that its research environment delivers high quality outputs to academia and the financial sectors. We strive for research excellence."
    },
    {
      "content": "Promote and encourage a lively and successful doctoral community. While the number of staff focusing on banking research at Leeds is already large by UK standards, the outputs of IBI will be leveraged via close working partnerships with its doctoral students."
    },
    {
      "content": "To address key issues facing the global banking industry."
    },
    {
      "content": "Develop and support existing academic staff to achieve their potential and appoint high achievers. IBI has a clear strategy of combining experienced and early career academics, creating a stream of research papers and reports from complementary and overlapping interests and expertise."
    },
    {
      "content": "Success will be achieved by a series of ‘milestone outputs’ from the individual and collective efforts of the team: discussion papers introducing novel research ideas and findings, journal publications with ABS 4* and 4 ratings, industry-relevant reports, and the progression of graduate students and staff members."
    }
  ]
}