University of Leeds Design System v1.0.15

In text CTAs: Heading P Tag

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.

How to use

The content can be passed through the config like in the example below, with a heading level, url, title and optionally a text value:

'ctas': {
  'heading_level': 'h3',
  'items': [
    {
      'url': '/home',
      'title': 'Coronavirus (covid19) update',
      'text': 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.'
    },
  ]
}

Please note, only a h2, h3, h4, h5, h6 or p tag should be used within the ‘heading_level’ option.

H1 should not be used, if no heading level value is passed the component will default to h2. 

{% for cta in ctas.items %}
  <div class="uol-in-text-cta">
    <{{ ctas.heading_level if ctas.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 ctas.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">
    <p class="uol-in-text-cta__heading">
        <a class="uol-in-text-cta__link" href="/home">Coronavirus (covid19) update</a>
    </p>

</div>

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

    <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">
    <p class="uol-in-text-cta__heading">
        <a class="uol-in-text-cta__link" href="/home">Coronavirus (covid19) update</a>
    </p>

    <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">
    <p class="uol-in-text-cta__heading">
        <a class="uol-in-text-cta__link" href="/home">Coronavirus (covid19) update</a>
    </p>

    <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;
    padding: $spacing-5;
    width: 100%;
    background-color: $color-brand--faded;
    border: 2px solid $color-brand;
    border-radius: 10px;

    + .uol-in-text-cta {
      margin-top: $spacing-5;

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

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

    

    .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;
        color: $color-font;
        line-height: 1.4;
        font-weight: 600;
        letter-spacing: 0;

        @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: $spacing-2 0 0;
        color: $color-font--light;

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

// in text CTA same width as other content when in content widget...
.uol-widget__content {
  .uol-in-text-cta {
    width: 100%;
  }
}

// ...when in homepage width changes
.uol-homepage-content-container {
  .uol-widget__content {
    .uol-in-text-cta {
      @include media(">=uol-media-l") {
        width: calc((100% + 1.5rem) / 12* 9 - 1.5rem);
      }
      @include media(">=uol-media-xl") {
        width: calc((100% + 2rem) / 12 * 7 - 2rem);
      }
    }
  }
}
  • 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.8 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": {
    "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."
      }
    ],
    "heading_level": "p"
  }
}