University of Leeds Design System v1.0.15

Content widget: Content guidance

No notes defined.

{% extends '@uol-widget' %}

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

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

            <div class="uol-widget__head">

                <h2 class="uol-widget__title">Guidance for what to put in to a content widget</h2>

                <div class="uol-widget__lead">
                    <p>The content widget must have a heading and an introduction text paragraph. It could alse include any of the following elements (each of which are shown below): Image/s, Video/s, iFrame/s, Block Quote/s, In Text CTA/s, Accordions with or without a table.</p>
                </div>

            </div>

        </div>

        <div class="uol-widget__content">

            <div class="uol-rich-text uol-spacing">

                <h3>Image example</h3>

                <figure>
                    <img alt="Polar bear with cubs on ice sheet" src="/placeholders/ph-news-14.jpg">
                    <figcaption>Picture credit: <a href=#>The person who has taken this photograph</a></figcaption>
                </figure>

                <h3>Video example</h3>

                <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/AjvkAkHZAzc" title="YouTube video player - Studying abroad" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

                <h3>Iframe example</h3>

                <iframe class="uol-iframe" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.9441538079813!2d-1.5536401236388144!3d53.80749174258921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795ea98c000001%3A0xa460454678f77e00!2sThe%20Parkinson%20Building!5e0!3m2!1sen!2suk!4v1685529471450!5m2!1sen!2suk" title="The Parkinson building on a map"></iframe>

                <h3>Blockquote example</h3>

                <blockquote>
                    <p>A blockquote is a quotation with a citation, designed to be offset from the main text on a page and is used to support content by visually highlighting a particular message or point.</p>
                    <footer>
                        <cite>(Blockquote citation)</cite>
                    </footer>
                </blockquote>

                <h3>CTA example</h3>

                <div class="uol-in-text-cta">
                    <h2 class="uol-in-text-cta__heading">
                        <a class="uol-in-text-cta__link" href="/home">In text CTA widget title</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>

                <h3>Accordion(s) without table</h3>

                <div class="uol-accordion">
                    <h3 class="uol-accordion__title">Five most recent selected publications</h3>
                    <div class="uol-accordion__content">
                        <div class="uol-rich-text">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p>
                        </div>
                    </div>
                </div>

                <div class="uol-accordion">
                    <h3 class="uol-accordion__title">Conference papers</h3>
                    <div class="uol-accordion__content">
                        <div class="uol-rich-text">
                            <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p>
                        </div>
                    </div>
                </div>

                <h3>Accordion with table</h3>

                <div class="uol-accordion">
                    <h3 class="uol-accordion__title">Cheeses</h3>
                    <div class="uol-accordion__content">
                        <div class="uol-rich-text">
                            <table>
                                <caption>List of cheeses</caption>
                                <thead>
                                    <tr>
                                        <th>Name</th>
                                        <th>Description</th>
                                        <th>Country of origin</th>
                                        <th>Fat percentage</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr>
                                        <td>Cheddar </td>
                                        <td>Cheddar cheese is a relatively hard,off-white,sometimes sharp-tasting,natural cheese. Originating in the English village of Cheddar in Somerset,cheeses of this style are now produced beyond the region and in several countries around the world </td>
                                        <td>UK </td>
                                        <td>16% </td>
                                    </tr>
                                    <tr>
                                        <td>Brie </td>
                                        <td>Brie is a soft cow's-milk cheese named after Brie,the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of #fff mould. The rind is typically eaten,with its flavor depending largely upon the ingredients used and its manufacturing environment </td>
                                        <td>France </td>
                                        <td>28% </td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>
</div>
 
{
  "widget_type": "content",
  "widget_title": "Guidance for what to put in to a content widget",
  "widget_lead": "<p>The content widget must have a heading and an introduction text paragraph. It could alse include any of the following elements (each of which are shown below): Image/s, Video/s, iFrame/s, Block Quote/s, In Text CTA/s, Accordions with or without a table.</p>",
  "widget_content": "\n\n        <h3>Image example</h3>\n\n        <figure>\n          <img alt=\"Polar bear with cubs on ice sheet\" src=\"/placeholders/ph-news-14.jpg\">\n          <figcaption>Picture credit: <a href=#>The person who has taken this photograph</a></figcaption>\n        </figure>\n\n        <h3>Video example</h3>\n\n        <iframe width=\"560\" height=\"315\" src=\"https://www.youtube-nocookie.com/embed/AjvkAkHZAzc\" title=\"YouTube video player - Studying abroad\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>\n\n        <h3>Iframe example</h3>\n\n        <iframe class=\"uol-iframe\" src=\"https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d945.9441538079813!2d-1.5536401236388144!3d53.80749174258921!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x48795ea98c000001%3A0xa460454678f77e00!2sThe%20Parkinson%20Building!5e0!3m2!1sen!2suk!4v1685529471450!5m2!1sen!2suk\" title=\"The Parkinson building on a map\"></iframe>\n\n        <h3>Blockquote example</h3>\n\n        <blockquote>\n          <p>A blockquote is a quotation with a citation, designed to be offset from the main text on a page and is used to support content by visually highlighting a particular message or point.</p>\n          <footer>\n            <cite>(Blockquote citation)</cite>\n          </footer>\n        </blockquote>\n\n        <h3>CTA example</h3>\n        \n        <div class=\"uol-in-text-cta\">\n          <h2 class=\"uol-in-text-cta__heading\">\n              <a class=\"uol-in-text-cta__link\" href=\"/home\">In text CTA widget title</a>\n          </h2>\n          <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>\n        </div>\n\n        <h3>Accordion(s) without table</h3>\n\n        <div class=\"uol-accordion\"> <h3 class=\"uol-accordion__title\">Five most recent selected publications</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p> </div> </div> </div>\n\n        <div class=\"uol-accordion\"> <h3 class=\"uol-accordion__title\">Conference papers</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\"><p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Doloribus saepe delectus quos quibusdam. Quos ducimus, nam consectetur ipsam illo laudantium quas, dignissimos voluptate neque est eligendi, alias et facere unde. Ex minima incidunt exercitationem mollitia ratione ut ducimus culpa nam.</p> </div> </div> </div>\n\n        <h3>Accordion with table</h3>\n        \n        <div class=\"uol-accordion\"><h3 class=\"uol-accordion__title\">Cheeses</h3> <div class=\"uol-accordion__content\"> <div class=\"uol-rich-text\">\n        <table><caption>List of cheeses</caption><thead><tr><th>Name</th><th>Description</th><th>Country of origin</th><th>Fat percentage</th></tr></thead><tbody><tr><td>Cheddar </td><td>Cheddar cheese is a relatively hard,off-white,sometimes sharp-tasting,natural cheese. Originating in the English village of Cheddar in Somerset,cheeses of this style are now produced beyond the region and in several countries around the world </td><td>UK </td><td>16% </td></tr><tr><td>Brie </td><td>Brie is a soft cow's-milk cheese named after Brie,the French region from which it originated. It is pale in color with a slight grayish tinge under a rind of #fff mould. The rind is typically eaten,with its flavor depending largely upon the ingredients used and its manufacturing environment </td><td>France </td><td>28% </td></tr></tbody></table> </div> </div> </div>\n\n        "
}