University of Leeds Design System v1.14.3

Facts And Figures: 5 Items

No notes defined.

{% if facts.length %}
  <div class="uol-facts-figures-container">
    {% for fact in facts %}
      <div class="uol-facts-figures">
        <div class="uol-facts-figures__headline">
          {% if fact.title_1 %}
            <strong class="uol-facts-figures__headline__1">{{ fact.title_1 }}</strong>
          {% else %}
            
            <li class="uol-facts-figures__headline__1 in-text-icon uol-icon uol-icon--{{ fact.icon }}"></li>
          {% endif %}
          <p class="uol-facts-figures__headline__2">
            {{ fact.title_2 }}
          </p>
        </div>
        {% if fact.cite %}
          <footer class="uol-facts-figures__footer">
              <cite class="uol-facts-figures__cite">
                  {% if fact.cite.url %}
                      <a href="{{ fact.cite.url }}" class="uol-facts-figures__link">
                  {% endif%}
                  {{ fact.cite.text }}
                  {% if fact.cite.url %}
                      </a>
                  {% endif%}
              </cite>
          </footer>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endif %}
 
<div class="uol-facts-figures-container">

    <div class="uol-facts-figures">
        <div class="uol-facts-figures__headline">

            <strong class="uol-facts-figures__headline__1">Top 100</strong>

            <p class="uol-facts-figures__headline__2">
                world ranking university
            </p>
        </div>

        <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>

    </div>

    <div class="uol-facts-figures">
        <div class="uol-facts-figures__headline">

            <strong class="uol-facts-figures__headline__1">Over 9,000</strong>

            <p class="uol-facts-figures__headline__2">
                international students from more than 170 countries
            </p>
        </div>

    </div>

    <div class="uol-facts-figures">
        <div class="uol-facts-figures__headline">

            <strong class="uol-facts-figures__headline__1">5th</strong>

            <p class="uol-facts-figures__headline__2">
                most targeted university in the UK by graduate recruiters
            </p>
        </div>

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

                QS World University Rankings 2021

            </cite>
        </footer>

    </div>

    <div class="uol-facts-figures">
        <div class="uol-facts-figures__headline">

            <strong class="uol-facts-figures__headline__1">Top 10</strong>

            <p class="uol-facts-figures__headline__2">
                University for research power
            </p>
        </div>

        <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>

    </div>

    <div class="uol-facts-figures">
        <div class="uol-facts-figures__headline">

            <strong class="uol-facts-figures__headline__1">Top 10</strong>

            <p class="uol-facts-figures__headline__2">
                UK university
            </p>
        </div>

        <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>

    </div>

</div>
  • Content: 
    // Not used in tiles pattern
.uol-facts-figures-container {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  box-sizing: border-box;

  & > * {
    box-sizing: border-box;
  }
}

.uol-facts-figures {
  margin: 0;
  text-align: left;

  @include media("<uol-media-s") {
    margin-bottom: $spacing-4;
  }

  // ie. Not in tiles pattern
  .uol-facts-figures-container & {
    border: 1px solid black;
    margin: 0 0 $spacing-6 0;
    padding: 0 $spacing-4 0 0;
    justify-content: flex-start;
    width: 100%;


    @include media(">=uol-media-m") {
      margin: 0 $spacing-4 $spacing-6 0;
    }

    @include media(">=uol-media-l") {
      margin: 0 $spacing-6 calc(#{$spacing-2} * 5) 0; //0 32px 40px 0
    }

    @include media(">=uol-media-m", "<uol-media-xl") {
      width: calc(50% - #{$spacing-7});

      &:nth-child(odd):last-of-type {
        border-right: none;
      }
    }

    @include media(">=uol-media-xl") {
      width: calc(100% / 3 - #{$spacing-7});
    }
  }
}

  .uol-facts-figures__headline {
    @extend %uol-font-sans-serif;

    margin-top: 0;
    margin-bottom: 0;

    &+footer {
      margin-top: $spacing-4;
    }

    .in-text-icon {
      height: 44px;
      margin-bottom: $spacing-2 !important;
    }
  }

    .uol-facts-figures__headline__1 {

      @include font-size-responsive(1.5rem, 2rem, 2.1875rem); // 24px, 32px, 35px
      @include line-height-responsive(2rem, 2.75rem, 2.8125rem); // 32px, 44px, 45px

      display: block;
      margin-bottom: $spacing-2;
      font-weight: $font-weight-bold--serif;
      color: $color-brand;

      .uol-tiles & {
        color: $color-brand--bright;
      }      
    }

      .uol-facts-figures__headline__1__emphasis {
        @include font-size-responsive(2.75rem, 4.25rem);
        @include line-height-responsive(2.75rem, 3rem);
      }
    
    .uol-facts-figures__headline__2 {
      @include font-size-responsive(1.125rem, 1.25rem, 1.25rem); // 18px, 20px, 20px
      @include line-height-responsive(1.75rem, 1.75rem, 2rem,); // 28px, 28px, 32px
      margin-top: 0;
    }

  .uol-facts-figures__cite {
    @include font-size-responsive(1rem, 1rem, 1.125rem);
    @include line-height-responsive(1.375rem, 1.375rem, 1.75rem);

    font-style: normal;
  }

  .uol-facts-figures__link {
    @include link_focus(3px);

    color: inherit;

    &:hover {
      text-decoration-color: $color-brand;
    }
  }
  • URL: /components/raw/uol-facts-figures/_facts-figures.scss
  • Filesystem Path: src/library/02-components/facts-figures/_facts-figures.scss
  • Size: 2.4 KB 
{
  "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"
      }
    }
  ]
}