University of Leeds Design System v1.0.17

Facts And Figures Widget V 2: Homepage Concept

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 ">Why Leeds?</h2>

            </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">Top 100</strong>

                        <p class="uol-facts-figures-v2__headline__2">
                            Mandatory text
                        </p>
                    </div>

                    <p class="uol-facts-figures-v2__optional-fact-source">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">

                                Optional 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">
                            No.1 city for students in the World
                        </p>
                    </div>

                    <p class="uol-facts-figures-v2__optional-fact-source">(Student Crowd 2024)</p>

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

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

                                Student life in Leeds

                            </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--mdiTrophyVariantOutline"></div>

                        <p class="uol-facts-figures-v2__headline__2">
                            Favoured by top graduate employees
                        </p>
                    </div>

                    <p class="uol-facts-figures-v2__optional-fact-source">(The Times 2023-24)</p>

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

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

                                How we help career building

                            </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">90%</strong>

                        <p class="uol-facts-figures-v2__headline__2">
                            of submitted research of ‘world-leading’ standard
                        </p>
                    </div>

                    <p class="uol-facts-figures-v2__optional-fact-source">(REF 2021)</p>

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

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

                                Our academic excellence

                            </a>

                        </cite>
                    </div>

                </div>

            </div>

        </div>
    </div>
</div>
 
{
  "widget_type": "facts-figures",
  "widget_title": "Why Leeds?",
  "widget_lead": null,
  "facts": [
    {
      "title_1": "Top 100",
      "title_2": "Mandatory text",
      "optional_fact_source": "Optional fact source",
      "cite": {
        "text": "Optional link",
        "url": "https://example.com/1"
      }
    },
    {
      "icon": "mdiEarth",
      "title_2": "No.1 city for students in the World",
      "optional_fact_source": "(Student Crowd 2024)",
      "cite": {
        "text": "Student life in Leeds",
        "url": "https://example.com/2"
      }
    },
    {
      "icon": "mdiTrophyVariantOutline",
      "title_2": "Favoured by top graduate employees",
      "optional_fact_source": "(The Times 2023-24)",
      "cite": {
        "text": "How we help career building",
        "url": "https://example.com/3"
      }
    },
    {
      "title_1": "90%",
      "title_2": "of submitted research of ‘world-leading’ standard",
      "optional_fact_source": "(REF 2021)",
      "cite": {
        "text": "Our academic excellence",
        "url": "https://example.com/4"
      }
    }
  ]
}