University of Leeds Design System v1.0.13

In text CTAs

Guidance

The CTA must contain a title (max 40 characters) and possibly a lead sentence (max 140 characters)

When to use

Use the In text CTAs as main calls to actions on a page/within content.

The CTAs can be used inside and outside content areas.

When not to use

Avoid using multiple In Text CTAs on one page as this reduces their impact and be overwhelming for users.

{% for cta in ctas.items %}
  <div class="uol-in-text-cta">
    <{{ ctas.heading_level if heading_level else 'h2' }} class="uol-in-text-cta__heading">
      <a class="uol-in-text-cta__link" href="{{ cta.url }}">{{ cta.title }}</a>
    </{{ ctas.heading_level if heading_level else 'h2' }}>
    {% if cta.text %}
      <p class="uol-in-text-cta__text">{{ cta.text }}</p>
    {% endif %}
  </div>
{% endfor %}
 
<div class="uol-in-text-cta">
    <h2 class="uol-in-text-cta__heading">
        <a class="uol-in-text-cta__link" href="/home">Coronavirus (covid19) update</a>
    </h2>

</div>

<div class="uol-in-text-cta">
    <h2 class="uol-in-text-cta__heading">
        <a class="uol-in-text-cta__link" href="/home">Coronavirus (covid19) update</a>
    </h2>

    <p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>

</div>

<div class="uol-in-text-cta">
    <h2 class="uol-in-text-cta__heading">
        <a class="uol-in-text-cta__link" href="/home">Coronavirus (covid19) update</a>
    </h2>

    <p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim.</p>

</div>

<div class="uol-in-text-cta">
    <h2 class="uol-in-text-cta__heading">
        <a class="uol-in-text-cta__link" href="/home">Coronavirus (covid19) update</a>
    </h2>

    <p class="uol-in-text-cta__text">Lorem ipsum dolor sit amet, ncididunt ut labore et dolore magna aliqua ut enim ad minim.</p>

</div>
  • Content: 
    .uol-in-text-ctas-wrapper {

  .uol-rich-text & {
    margin: $spacing-6 0;


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

  .uol-in-text-cta {
    position: relative;
    box-sizing: border-box;
    margin-bottom: $spacing-5;
    padding: $spacing-5;
    width: 100%;
    background-color: $color-brand--faded;
    border: 2px solid $color-brand;
    border-radius: 10px;

    &:hover {
      box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, .12);
    }

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

    .uol-widget & {

      @include media(">=uol-media-l") {
        width: calc((100% + #{$spacing-5}) / 12 * 9 - #{$spacing-5});
      }

      @include media(">=uol-media-xl") {
        width: calc((100% + #{$spacing-6}) / 12 * 7 - #{$spacing-6});
      }

      .uol-side-nav-container--populated + .uol-homepage-content & {

        @include media(">=uol-media-l") {
          width: calc(100% - #{$spacing-5 / 2} - 4px);
        }

        @include media(">=uol-media-xl") {
          // TODO: no idea why this requires the - 10px and don;t have time to check now
          width: calc((100% + #{$spacing-6}) / 9 * 7 - #{$spacing-6} - 10px);
        }
      }
    }

      .uol-in-text-cta__heading {
        @extend %uol-font-sans-serif;
        @extend %text-size-paragraph;

        margin: 0 0 $spacing-2;
        color: $color-font;
        line-height: 1.4;
        font-weight: 600;

        @include media(">=uol-media-xl") {
          line-height: 1.4;
        }
      }

      .uol-in-text-cta__link {
        text-decoration: none;

        &::before {
          content: "";
          position: absolute;
          top: 0;
          right: 0;
          bottom: 0;
          left: 0;
        }

        &:hover,
        &:focus-within {
          text-decoration: underline;
        }

        &:focus-within {
          text-decoration-color: $color-brand--bright;
        }
      }

      .uol-in-text-cta__text {
        @extend %text-size-paragraph;

        line-height: 1.625;
        margin: 0;
        color: $color-font--light;

        @include media(">=uol-media-xl") {
          line-height: 1.556;
        }
      }
    }
  • URL: /components/raw/uol-in-text-cta/_in-text-cta.scss
  • Filesystem Path: src/library/01-foundations/01-typography/03-typography-components/08-in-text-cta/_in-text-cta.scss
  • Size: 2.2 KB
  • Content: 
    export const uolInTextCTAsEqualHeights = () => {

  const ctas = document.querySelectorAll('.uol-in-text-cta');

  ctas.forEach((cta) => {
    // Ignore if already wrapped
    if (!cta.parentElement.classList.contains('uol-in-text-ctas-wrapper')) {
      // Check whether there is a sibling
      if(cta.previousElementSibling && cta.previousElementSibling.classList.contains('uol-in-text-cta')) {
        if (cta.previousElementSibling.classList.contains('uol-in-text-cta')) {
          cta.classList.add('uol-in-text-cta--has-previous-sibling')
        }
      }
    }
  })

  // Do the wrappping
  ctas.forEach( (cta) => {

    if (!cta.parentElement.classList.contains('uol-in-text-ctas-wrapper')) {

      // Create the container
      const container = document.createElement('div');
      container.classList.add('uol-in-text-ctas-wrapper');

      // Get the previous sibling
      const previousEl = cta.previousElementSibling;

      // If it's the first in its "group"
      if (!cta.classList.contains('uol-in-text-cta--has-previous-sibling')) {
        // Put it in the container and place it before the previous element
        cta.insertAdjacentElement('beforebegin', container)
        container.appendChild(cta)

      } else {
        // Otherwise chuck it into the container alongside the previous cta
        previousEl.insertAdjacentElement('beforeend', cta)
      }
    }
  })
}
  • URL: /components/raw/uol-in-text-cta/in-text-cta.module.js
  • Filesystem Path: src/library/01-foundations/01-typography/03-typography-components/08-in-text-cta/in-text-cta.module.js
  • Size: 1.4 KB 
{
  "ctas": {
    "heading_level": "h3",
    "items": [
      {
        "url": "/home",
        "title": "Coronavirus (covid19) update"
      },
      {
        "url": "/home",
        "title": "Coronavirus (covid19) update",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim."
      },
      {
        "url": "/home",
        "title": "Coronavirus (covid19) update",
        "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim."
      },
      {
        "url": "/home",
        "title": "Coronavirus (covid19) update",
        "text": "Lorem ipsum dolor sit amet, ncididunt ut labore et dolore magna aliqua ut enim ad minim."
      }
    ]
  }
}