University of Leeds Design System v1.0.15

Section Navigation Calls To Action

No notes defined.

{% if ctas.links.length %}
  <aside class="uol-section-nav-ctas" aria-label="Related links">
      <h3 class="uol-section-nav-ctas__title">{{ ctas.title }}</h3>
      <div class="uol-section-nav-ctas__links">
          {% for link in ctas.links %}
              <a class="uol-button uol-section-nav-ctas__link" href="{{ link.href }}">{{ link.text }}</a>
          {% endfor %}
      </div>
  </aside>
{% endif %}
 
<aside class="uol-section-nav-ctas" aria-label="Related links">
    <h3 class="uol-section-nav-ctas__title">Discover Leeds</h3>
    <div class="uol-section-nav-ctas__links">

        <a class="uol-button uol-section-nav-ctas__link" href="/cta-link-1">Open days</a>

        <a class="uol-button uol-section-nav-ctas__link" href="/cta-link-2">Visit us</a>

        <a class="uol-button uol-section-nav-ctas__link" href="/cta-link-3">Virtual campus tour</a>

        <a class="uol-button uol-section-nav-ctas__link" href="/cta-link-4">Covid-19 FAQs for applicants and offer holders</a>

    </div>
</aside>
  • Content: 
    .uol-section-nav-ctas {
  font-family: $font-family-sans-serif--desktop;
  border-top: 4px solid $color-border--light;

  margin: $spacing-6 $spacing-4;

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

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

}

  .uol-section-nav-ctas__title {
    @extend .uol-typography-paragraph;

    color: $color-black--dark;
    margin-bottom: 0;
    margin-top: $spacing-4;
    font-weight: 700;
    
    @include media(">=uol-media-m") {
      font-weight: 600;
    }
  }

  .uol-section-nav-ctas__links {
    margin: 0;
    text-align: center;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    justify-content: start;
    align-content: start;

    @include media(">=uol-media-xs", "<uol-media-l") {
      margin-right: -16px;
    }

    @include media("<uol-media-l") {
      flex-direction: row;
    }
  }

  .uol-section-nav-ctas__link {
    @extend .uol-button;

    @include button_focus(-4px);
    
    margin: $spacing-6 $spacing-6 0 0;
    padding: 1.125rem 1.375rem 1.4125rem;
    width: 100%;

    @include media(">=uol-media-xs") {
      width: unset;
    }
  }
  • URL: /components/raw/uol-section-nav-ctas/_section-nav-cta.scss
  • Filesystem Path: src/library/02-components/section-nav-cta/_section-nav-cta.scss
  • Size: 1.2 KB
  • Content: 
    export const sectionNavCtaLocation = () => {

  const ctasGroups = document.querySelectorAll('.uol-content-container .uol-section-nav-ctas')

  //const main = document.getElementById('main')
  const main = document.querySelector('.uol-main-container');

  const sectionNavContainer = document.querySelector('.uol-side-nav-container')

  ctasGroups.forEach( (ctasGroup) => {

    window.addEventListener('resize', () => {

      if (window.innerWidth >= 1024) {
        sectionNavContainer.classList.add('uol-side-nav-container--populated')
        sectionNavContainer.insertAdjacentElement('beforeend', ctasGroup)
      } else {
        sectionNavContainer.classList.remove('uol-side-nav-container--populated')
        main.insertAdjacentElement('beforeend', ctasGroup)
      }
    })

    if (typeof(Event) === 'function') {
      // modern browsers
      window.dispatchEvent(new Event('resize'));
    } else {
        // for IE and other old browsers
        // causes deprecation warning on modern browsers
        var evt = window.document.createEvent('UIEvents')
        evt.initUIEvent('resize', true, false, window, 0)
        window.dispatchEvent(evt)
    }
  })
}
  • URL: /components/raw/uol-section-nav-ctas/section-nav-cta.module.js
  • Filesystem Path: src/library/02-components/section-nav-cta/section-nav-cta.module.js
  • Size: 1.2 KB 
{
  "ctas": {
    "title": "Discover Leeds",
    "links": [
      {
        "href": "/cta-link-1",
        "text": "Open days"
      },
      {
        "href": "/cta-link-2",
        "text": "Visit us"
      },
      {
        "href": "/cta-link-3",
        "text": "Virtual campus tour"
      },
      {
        "href": "/cta-link-4",
        "text": "Covid-19 FAQs for applicants and offer holders"
      }
    ]
  }
}