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;
            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: $spacing-2 0 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."
      }
    ]
  }
}