University of Leeds Design System v1.0.14.2

Page navigation

No notes defined.

{% if page_nav.length %}
<nav class="uol-page-nav" aria-label="Pagination">

  {% for nav in page_nav %}
  <a href="{{ nav.url }}" class="uol-page-nav__item uol-page-nav__item--{{ nav.nav_type }}">
    <span class="uol-page-nav__item__identifier">{% if nav.nav_type == 'prev' %}Previous{% elseif nav.nav_type == 'next' %}Next{% endif %} {{ nav.item_type }}</span>
    <span class="uol-page-nav__item__title">{{ nav.title | safe }}</span>
  </a>
  {% endfor %}

</nav>
{% endif %}
 
<nav class="uol-page-nav" aria-label="Pagination">

    <a href="/technical-information" class="uol-page-nav__item uol-page-nav__item--prev">
        <span class="uol-page-nav__item__identifier">Previous page</span>
        <span class="uol-page-nav__item__title">Technical information about this website&apos;s accessibility</span>
    </a>

    <a href="/how-we-tested-this-site-for-accessibility" class="uol-page-nav__item uol-page-nav__item--next">
        <span class="uol-page-nav__item__identifier">Next page</span>
        <span class="uol-page-nav__item__title">How we tested this site for accessibility and what we tested</span>
    </a>

</nav>
  • Content: 
    .uol-page-nav {
  display: block;
  max-width: 47.5rem;
  margin: $spacing-6 0;

  @include media(">=uol-media-m") {
    display: flex;
    margin: $spacing-8 0;
  }

  .uol-course__content & {
    max-width: none;
  }

}

  .uol-page-nav__item {
    @include link_focus();

    &:focus {
      text-decoration: none;
    }

    box-sizing: border-box;
    display: block;
    text-decoration: none;
    border: solid $color-border;
    border-width: 1px 0;
    padding: $spacing-5 $spacing-4;

    .uol-page-nav__item + & {
      @include media("<uol-media-m") {
        border-top: none;
      }

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

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

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

    @include media(">=uol-media-m") {
      flex-basis: calc(50% - #{$spacing-2});
    }

    @include media(">=uol-media-l") {
      flex-basis: calc(50% - #{$spacing-3});
    }

    @include media(">=uol-media-xl") {
      flex-basis: calc(50% - #{$spacing-4});
    }
  }

    .uol-page-nav__item--next {
      @include media(">=uol-media-m") {
        text-align: right;
        margin-left: auto;
      }
    }

    .uol-page-nav__item__identifier {
      @extend .uol-typography-paragraph;

      display: block;
      color: $color-font--dark;

      .uol-page-nav__item:focus & {
        text-decoration: none;
      }
    }

    .uol-page-nav__item__title {
      @extend .uol-typography-heading-5;

      display: block;

      .uol-page-nav__item:hover &,
      .uol-page-nav__item:focus & {
        text-underline-offset: 4px;
        text-decoration: underline;
      }

      .uol-page-nav__item:focus & {
        text-decoration-color: $color-brand--bright;
      }
    }
  • URL: /components/raw/uol-page-nav/_page-nav.scss
  • Filesystem Path: src/library/02-components/page-nav/_page-nav.scss
  • Size: 1.8 KB 
{
  "page_nav": [
    {
      "item_type": "page",
      "nav_type": "prev",
      "url": "/technical-information",
      "title": "Technical information about this website&apos;s accessibility"
    },
    {
      "item_type": "page",
      "nav_type": "next",
      "url": "/how-we-tested-this-site-for-accessibility",
      "title": "How we tested this site for accessibility and what we tested"
    }
  ]
}