University of Leeds Design System v1.0.13

Content widget: Default

No notes defined.

{% extends '@uol-widget' %}

{% block widget_content %}
  <div class="uol-rich-text">
      {{ widget_content | safe }}
  </div>
{% endblock %}
 
<div class="uol-widget-container">
    <div class="uol-widget uol-widget--content">

        <div class="uol-widget__left-col">

            <div class="uol-widget__head">

                <h2 class="uol-widget__title">Content widget with text formatting</h2>

                <div class="uol-widget__lead">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, excepturi necessitatibus magnam nostrum sunt velit iste cum distinctio. Perferendis, ut.</p>
                </div>

            </div>

        </div>

        <div class="uol-widget__content">

            <div class="uol-rich-text">
                <p>Our widgets also allow users to add a summary block of text too, which is our default paragraph style and size. Lorem ipsum dolor sit amet,</p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra elementum tincidunt. Aliquam porta nisl fermentum mi commodo facilisis vel nec arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse pellentesque lacus vitae dolor placerat, sed mollis lectus iaculis. In et interdum turpis. Donec sit amet accumsan purus. Vivamus pellentesque massa ac mi mollis condimentum. Mauris ullamcorper nibh hendrerit, pretium velit fringilla, tempor velit. Mauris malesuada neque in ex mollis, quis finibus erat gravida. Aenean eget ornare lacus.</p>
                <p> <strong>We can use bold text</strong> consectetuer adipiscing elit. <em>We can also use italic text, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>. Aenean massa.</p>
                <p>We can use other text formatting, such as <sub>subscript text</sub> or <sup>superscript text.</sup>, nascetur ridiculus mus. Donec quam felis.
                <p> We can use an in-text CTA: <a href="/some-featured-content-link">et dolore magnam aliquam quaerat voluptatem</a>. </p>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>
            </div>

        </div>
    </div>
</div>
 
{
  "widget_type": "content",
  "widget_title": "Content widget with text formatting",
  "widget_lead": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempore, excepturi necessitatibus magnam nostrum sunt velit iste cum distinctio. Perferendis, ut.</p>",
  "widget_content": "<p>Our widgets also allow users to add a summary block of text too, which is our default paragraph style and size. Lorem ipsum dolor sit amet,</p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam viverra elementum tincidunt. Aliquam porta nisl fermentum mi commodo facilisis vel nec arcu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Suspendisse pellentesque lacus vitae dolor placerat, sed mollis lectus iaculis. In et interdum turpis. Donec sit amet accumsan purus. Vivamus pellentesque massa ac mi mollis condimentum. Mauris ullamcorper nibh hendrerit, pretium velit fringilla, tempor velit. Mauris malesuada neque in ex mollis, quis finibus erat gravida. Aenean eget ornare lacus.</p><p> <strong>We can use bold text</strong> consectetuer adipiscing elit. <em>We can also use italic text, Lorem ipsum dolor sit amet, consectetur adipiscing elit.</em>. Aenean massa.</p><p>We can use other text formatting, such as <sub>subscript text</sub> or <sup>superscript text.</sup>, nascetur ridiculus mus. Donec quam felis.<p> We can use an in-text CTA: <a href=\"/some-featured-content-link\">et dolore magnam aliquam quaerat voluptatem</a>. </p><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</p>"
}