University of Leeds Design System v1.0.15

Facts And Figures Widget: 5 Items

No notes defined.

{% extends '@uol-widget' %}

{% block widget_content %}
  {% render '@uol-facts-figures', { 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 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-container">

                <blockquote class="uol-facts-figures">
                    <p class="uol-facts-figures__headline">
                        <strong class="uol-facts-figures__headline__1">Top 100</strong>
                        <span class="uol-facts-figures__headline__2">
                            world ranking university
                        </span>
                    </p>

                    <footer class="uol-facts-figures__footer">
                        <cite class="uol-facts-figures__cite">

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

                                QS World University Rankings 2021

                            </a>

                        </cite>
                    </footer>

                </blockquote>

                <blockquote class="uol-facts-figures">
                    <p class="uol-facts-figures__headline">
                        <strong class="uol-facts-figures__headline__1">Over 9,000</strong>
                        <span class="uol-facts-figures__headline__2">
                            international students from more than 170 countries
                        </span>
                    </p>

                </blockquote>

                <blockquote class="uol-facts-figures">
                    <p class="uol-facts-figures__headline">
                        <strong class="uol-facts-figures__headline__1">5th</strong>
                        <span class="uol-facts-figures__headline__2">
                            most targeted university in the UK by graduate recruiters
                        </span>
                    </p>

                    <footer class="uol-facts-figures__footer">
                        <cite class="uol-facts-figures__cite">

                            QS World University Rankings 2021

                        </cite>
                    </footer>

                </blockquote>

                <blockquote class="uol-facts-figures">
                    <p class="uol-facts-figures__headline">
                        <strong class="uol-facts-figures__headline__1">Top 10</strong>
                        <span class="uol-facts-figures__headline__2">
                            University for research power
                        </span>
                    </p>

                    <footer class="uol-facts-figures__footer">
                        <cite class="uol-facts-figures__cite">

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

                                QS World University Rankings 2021

                            </a>

                        </cite>
                    </footer>

                </blockquote>

                <blockquote class="uol-facts-figures">
                    <p class="uol-facts-figures__headline">
                        <strong class="uol-facts-figures__headline__1">Top 10</strong>
                        <span class="uol-facts-figures__headline__2">
                            UK university
                        </span>
                    </p>

                    <footer class="uol-facts-figures__footer">
                        <cite class="uol-facts-figures__cite">

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

                                The Times and Sunday Times University Guide, 2020

                            </a>

                        </cite>
                    </footer>

                </blockquote>

            </div>

        </div>
    </div>
</div>
 
{
  "widget_type": "facts-figures",
  "widget_title": "Facts and figures 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": "Top 100",
      "title_2": "world ranking university",
      "cite": {
        "text": "QS World University Rankings 2021",
        "url": "https://example.com/1"
      }
    },
    {
      "title_1": "Over 9,000",
      "title_2": "international students from more than 170 countries"
    },
    {
      "title_1": "5th",
      "title_2": "most targeted university in the UK by graduate recruiters",
      "cite": {
        "text": "QS World University Rankings 2021"
      }
    },
    {
      "title_1": "Top 10",
      "title_2": "University for research power",
      "cite": {
        "text": "QS World University Rankings 2021",
        "url": "https://example.com/2"
      }
    },
    {
      "title_1": "Top 10",
      "title_2": "UK university",
      "cite": {
        "text": "The Times and Sunday Times University Guide, 2020",
        "url": "https://example.com/3"
      }
    }
  ]
}