University of Leeds Design System v1.14.3

Facts Figures

No notes defined.

{% if facts.length %}
  <div class="uol-facts-figures-archive-container">
    {% for fact in facts %}
      <blockquote class="uol-facts-figures-archive">
        <p class="uol-facts-figures-archive__headline">
            <strong class="uol-facts-figures-archive__headline__1">{{ fact.title_1 }}</strong>
            <span class="uol-facts-figures-archive__headline__2">
                {{ fact.title_2 }}
            </span>
        </p>
        {% if fact.cite %}
          <footer class="uol-facts-figures-archive__footer">
              <cite class="uol-facts-figures-archive__cite">
                  {% if fact.cite.url %}
                      <a href="{{ fact.cite.url }}" class="uol-facts-figures-archive__link">
                  {% endif%}
                  {{ fact.cite.text }}
                  {% if fact.cite.url %}
                      </a>
                  {% endif%}
              </cite>
          </footer>
        {% endif %}
      </blockquote>
    {% endfor %}
  </div>
{% endif %}
 
<div class="uol-facts-figures-archive-container">

    <blockquote class="uol-facts-figures-archive">
        <p class="uol-facts-figures-archive__headline">
            <strong class="uol-facts-figures-archive__headline__1">Top 100</strong>
            <span class="uol-facts-figures-archive__headline__2">
                world ranking university
            </span>
        </p>

        <footer class="uol-facts-figures-archive__footer">
            <cite class="uol-facts-figures-archive__cite">

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

                    QS World University Rankings 2021

                </a>

            </cite>
        </footer>

    </blockquote>

    <blockquote class="uol-facts-figures-archive">
        <p class="uol-facts-figures-archive__headline">
            <strong class="uol-facts-figures-archive__headline__1">Over 9,000</strong>
            <span class="uol-facts-figures-archive__headline__2">
                international students from more than 170 countries
            </span>
        </p>

    </blockquote>

    <blockquote class="uol-facts-figures-archive">
        <p class="uol-facts-figures-archive__headline">
            <strong class="uol-facts-figures-archive__headline__1">5th</strong>
            <span class="uol-facts-figures-archive__headline__2">
                most targeted university in the UK by graduate recruiters
            </span>
        </p>

        <footer class="uol-facts-figures-archive__footer">
            <cite class="uol-facts-figures-archive__cite">

                QS World University Rankings 2021

            </cite>
        </footer>

    </blockquote>

    <blockquote class="uol-facts-figures-archive">
        <p class="uol-facts-figures-archive__headline">
            <strong class="uol-facts-figures-archive__headline__1">Top 10</strong>
            <span class="uol-facts-figures-archive__headline__2">
                University for research power
            </span>
        </p>

        <footer class="uol-facts-figures-archive__footer">
            <cite class="uol-facts-figures-archive__cite">

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

                    QS World University Rankings 2021

                </a>

            </cite>
        </footer>

    </blockquote>

    <blockquote class="uol-facts-figures-archive">
        <p class="uol-facts-figures-archive__headline">
            <strong class="uol-facts-figures-archive__headline__1">Top 10</strong>
            <span class="uol-facts-figures-archive__headline__2">
                UK university
            </span>
        </p>

        <footer class="uol-facts-figures-archive__footer">
            <cite class="uol-facts-figures-archive__cite">

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

                    The Times and Sunday Times University Guide, 2020

                </a>

            </cite>
        </footer>

    </blockquote>

    <blockquote class="uol-facts-figures-archive">
        <p class="uol-facts-figures-archive__headline">
            <strong class="uol-facts-figures-archive__headline__1">7th</strong>
            <span class="uol-facts-figures-archive__headline__2">
                in the UK for graduate recruitment
            </span>
        </p>

        <footer class="uol-facts-figures-archive__footer">
            <cite class="uol-facts-figures-archive__cite">

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

                    The Graduate Market in 2018, High Fliers Research

                </a>

            </cite>
        </footer>

    </blockquote>

</div>
  • Handle: @facts-figures
  • Preview:
  • Filesystem Path: src/library/02-components/facts-figures-archive/facts-figures.njk 
{
  "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"
      }
    },
    {
      "title_1": "7th",
      "title_2": "in the UK for graduate recruitment",
      "cite": {
        "text": "The Graduate Market in 2018, High Fliers Research",
        "url": "https://example.com/4"
      }
    }
  ]
}