University of Leeds Design System v1.0.14.2

Nav List Group

No notes defined.

<nav class="nav-list-group" aria-label="{{ link_group.group_title }}">
    <{{ link_group_heading_tag }} class="nav-list-group__title">{{ link_group.group_title }}</{{ link_group_heading_tag }}>
    <ul class="nav-list-group__list">
        {% for link in link_group.links %}
        <li class="nav-list-group__item">
            <a href="{{ link.url }}" class="nav-list-group__link" {% if link.current %}aria-current="page"{% endif %}>{{ link.title }}</a>
        </li>
        {% endfor %}
    </ul>
</nav>
 
<nav class="nav-list-group" aria-label="Faculty of Environment">
    <h3 class="nav-list-group__title">Faculty of Environment</h3>
    <ul class="nav-list-group__list">

        <li class="nav-list-group__item">
            <a href="http://environment.leeds.ac.uk" class="nav-list-group__link">Faculty of Environment</a>
        </li>

        <li class="nav-list-group__item">
            <a href="http://environment.leeds.ac.uk/see" class="nav-list-group__link">School of Earth and Environment</a>
        </li>

        <li class="nav-list-group__item">
            <a href="http://environment.leeds.ac.uk/food-nutrition" class="nav-list-group__link">School of Food Science and Nutrition</a>
        </li>

        <li class="nav-list-group__item">
            <a href="http://environment.leeds.ac.uk/geography" class="nav-list-group__link">School of Geography</a>
        </li>

        <li class="nav-list-group__item">
            <a href="http://environment.leeds.ac.uk/geography" class="nav-list-group__link">School of Geography</a>
        </li>

    </ul>
</nav>
  • Content: 
    .nav-list-group {

}

  .nav-list-group__title {
    @extend %text-size-paragraph--small;

    position: relative;
    font-weight: $font-weight-bold--sans-serif;
    margin-top: 1rem;
    margin-bottom: 1.5rem;

    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      top: -1rem;
      left: 0;
      width: 1rem;
      height: 0.25rem;
      background-color: $color-brand--bright;
    }
  }

  .nav-list-group__list {
    @extend %text-size-paragraph--small;

    list-style: none;
    padding: 0 0 $spacing-6;
    margin-bottom: 0;
  }

  .nav-list-group__item {
    margin-bottom: $spacing-2;
  }

  .nav-list-group__link {
    color: inherit;
    text-decoration: none;
  }
  • URL: /components/raw/uol-nav-list-group/_list-group.scss
  • Filesystem Path: src/library/02-components/list-group/_list-group.scss
  • Size: 720 Bytes 
{
  "link_group_heading_tag": "h3",
  "link_group": {
    "group_title": "Faculty of Environment",
    "links": [
      {
        "title": "Faculty of Environment",
        "url": "http://environment.leeds.ac.uk"
      },
      {
        "title": "School of Earth and Environment",
        "url": "http://environment.leeds.ac.uk/see"
      },
      {
        "title": "School of Food Science and Nutrition",
        "url": "http://environment.leeds.ac.uk/food-nutrition"
      },
      {
        "title": "School of Geography",
        "url": "http://environment.leeds.ac.uk/geography"
      },
      {
        "title": "School of Geography",
        "url": "http://environment.leeds.ac.uk/geography"
      }
    ]
  }
}