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

</div>

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

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

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

    <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": "h5"
  }
}