University of Leeds Design System v1.0.13

Ctas Widget

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 widget as main calls to actions on a page/within content.

The CTAs widget can be used 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.

Developer guidance

The CTAs widget makes use of the @uol-in-text-cta typography component

{% extends '@uol-widget' %}

{% block widget_content %}
  {% if ctas.items.length %}
    <div class="uol-in-text-ctas-wrapper">
      {% render '@uol-in-text-cta', { ctas: ctas } %}
    </div>
  {% endif %}
{% endblock %}
 
<div class="uol-widget-container">
    <div class="uol-widget">

        <div class="uol-widget__content">

            <div class="uol-in-text-ctas-wrapper">

                <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>

            </div>

        </div>
    </div>
</div>
 
{
  "ctas": {
    "heading_level": "h2",
    "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."
      }
    ]
  }
}