University of Leeds Design System v1.0.16

Facts And Figures Widget V 2

No notes defined.

{% extends '@uol-widget' %}

{% block widget_content %}
  {% render '@uol-facts-figures-v2', { facts: facts } %}
{% endblock %}
 
<div class="uol-widget-container uol-widget-container__facts-figures">
    <div class="uol-widget uol-widget--facts-figures ">

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

            <div class="uol-widget__head ">

                <h2 class="uol-widget__title ">Facts and figures new widget</h2>

                <div class="uol-widget__lead ">
                    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem sequi animi exercitationem sunt. Eos consequatur, eveniet nulla beatae nisi voluptatibus.</p>
                </div>

            </div>

        </div>

        <div class="uol-widget__content ">

            <div class="uol-facts-figures-v2-container">

                <div class="uol-facts-figures-v2">
                    <div class="uol-facts-figures-v2__headline">

                        <strong class="uol-facts-figures-v2__headline__1">Highlight</strong>

                        <p class="uol-facts-figures-v2__headline__2">
                            Example of fact with a word highlight and citation with link
                        </p>
                    </div>

                    <p class="uol-facts-figures-v2__optional-fact-source">Test for optional fact source</p>

                    <div class="uol-facts-figures-v2__footer">
                        <cite class="uol-facts-figures-v2__cite">

                            <a href="https://example.com/1" class="uol-facts-figures-v2__link">

                                Citation with link

                            </a>

                        </cite>
                    </div>

                </div>

                <div class="uol-facts-figures-v2">
                    <div class="uol-facts-figures-v2__headline">

                        <div class="uol-facts-figures-v2__headline__1 in-text-icon uol-icon uol-icon--mdiEarth"></div>

                        <p class="uol-facts-figures-v2__headline__2">
                            Example of fact with globe icon and citation with no link
                        </p>
                    </div>

                    <div class="uol-facts-figures-v2__footer">
                        <cite class="uol-facts-figures-v2__cite">

                            Citation without link

                        </cite>
                    </div>

                </div>

                <div class="uol-facts-figures-v2">
                    <div class="uol-facts-figures-v2__headline">

                        <div class="uol-facts-figures-v2__headline__1 in-text-icon uol-icon uol-icon--mdiTrophyVariantOutline"></div>

                        <p class="uol-facts-figures-v2__headline__2">
                            Example of fact with trophy icon and citation with link
                        </p>
                    </div>

                    <div class="uol-facts-figures-v2__footer">
                        <cite class="uol-facts-figures-v2__cite">

                            <a href="https://example.com/1" class="uol-facts-figures-v2__link">

                                Citation with link

                            </a>

                        </cite>
                    </div>

                </div>

                <div class="uol-facts-figures-v2">
                    <div class="uol-facts-figures-v2__headline">

                        <strong class="uol-facts-figures-v2__headline__1">22800</strong>

                        <p class="uol-facts-figures-v2__headline__2">
                            Example of fact with numerical highlight and citation with no link
                        </p>
                    </div>

                    <div class="uol-facts-figures-v2__footer">
                        <cite class="uol-facts-figures-v2__cite">

                            Citation without link

                        </cite>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>
 
{
  "widget_type": "facts-figures",
  "widget_title": "Facts and figures new widget",
  "widget_lead": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem sequi animi exercitationem sunt. Eos consequatur, eveniet nulla beatae nisi voluptatibus.</p>",
  "facts": [
    {
      "title_1": "Highlight",
      "title_2": "Example of fact with a word highlight and citation with link",
      "optional_fact_source": "Test for optional fact source",
      "cite": {
        "text": "Citation with link",
        "url": "https://example.com/1"
      }
    },
    {
      "icon": "mdiEarth",
      "title_2": "Example of fact with globe icon and citation with no link",
      "cite": {
        "text": "Citation without link"
      }
    },
    {
      "icon": "mdiTrophyVariantOutline",
      "title_2": "Example of fact with trophy icon and citation with link",
      "cite": {
        "text": "Citation with link",
        "url": "https://example.com/1"
      }
    },
    {
      "title_1": "22800",
      "title_2": "Example of fact with numerical highlight and citation with no link",
      "cite": {
        "text": "Citation without link"
      }
    }
  ]
}