University of Leeds Design System v1.0.16

Facts And Figures V 2: 1 Item

The Facts and Figures component is used to present key statistics in a clear and visually engaging way. Ideal for highlighting institutional achievements, student demographics, research outputs, or campus milestones, this component helps surface important data at a glance.

Figures allow for a short title or an icon to add clarity and context. Please see below for details of the fields that can be configured.

  • Title: Optional if a title isn’t present an icon will be displayed in its place. This will be selected by editor.
  • Text: Mandatory, a paragraph describing what the fact is about.Fact source: Optional, a paragraph can be added detailing the source, for example if it was a quote.
  • Link: Optional, a link can be added for the users to find out more.
{% if facts.length %}
  <div class="uol-facts-figures-v2-container">
    {% for fact in facts %}
      <div class="uol-facts-figures-v2">
        <div class="uol-facts-figures-v2__headline">
          {% if fact.title_1 %}
            <strong class="uol-facts-figures-v2__headline__1">{{ fact.title_1 }}</strong>
          {% else %}
            
            <div class="uol-facts-figures-v2__headline__1 in-text-icon uol-icon uol-icon--{{ fact.icon }}"></div>
          {% endif %}
          <p class="uol-facts-figures-v2__headline__2">
            {{ fact.title_2 }}
          </p>
        </div>

        {% if fact.optional_fact_source %}
          <p class="uol-facts-figures-v2__optional-fact-source">{{ fact.optional_fact_source }}</p>
        {% endif %}

        {% if fact.cite %}
          <div class="uol-facts-figures-v2__footer">
              <cite class="uol-facts-figures-v2__cite">
                  {% if fact.cite.url %}
                      <a href="{{ fact.cite.url }}" class="uol-facts-figures-v2__link">
                  {% endif%}
                  {{ fact.cite.text }}
                  {% if fact.cite.url %}
                      </a>
                  {% endif%}
              </cite>
          </div>
        {% endif %}
      </div>
    {% endfor %}
  </div>
{% endif %}
 
<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">
                world ranking university
            </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">

                    QS World University Rankings 2021

                </a>

            </cite>
        </div>

    </div>

</div>
  • Content: 
    // Not used in tiles pattern
.uol-facts-figures-v2-container {
    // border: 1px dotted hotpink; // for debugging
    box-sizing: border-box;
    padding: 0 $spacing-4 $spacing-6 $spacing-4;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    row-gap: $spacing-6;

    @include media(">=uol-media-m") {
      column-gap: $spacing-4;
      row-gap: 2.5rem; // 40px
      padding-bottom: 2.5rem; // 40px
    }

    @include media(">=uol-media-l") {
      padding: 0 $spacing-5 2.5rem $spacing-5;
      column-gap: $spacing-5;
    }

    @include media(">=uol-media-xl") {
      padding: 0 $spacing-6 2.5rem $spacing-6;
      column-gap: $spacing-6;
    }
  
    & > * {
      box-sizing: border-box;
    }
  }

  .uol-facts-figures-v2 {
    margin: 0;
    text-align: center;
    // border: 1px solid red; // for debugging
    grid-column: 2 / span 10;
  
    // ie. Not in tiles pattern
    .uol-facts-figures-v2-container & {
      @include media(">=uol-media-m") {
        grid-column: auto;

        &:nth-child(2n-1) {
          grid-column: 2 / span 5;
        }
      
        &:nth-child(2n) {
          grid-column: span 5 / 12;
        }
      }

      @include media(">=uol-media-l") {
        grid-column: span 3;

        &:nth-child(2n-1),
        &:nth-child(2n) {
          grid-column: span 3;
        }
      }
    }
  }

    .uol-facts-figures-v2__headline {
      @extend %uol-font-sans-serif;
  
      margin-top: 0;
      margin-bottom: 0;

      & > :last-child {
        margin-bottom: 0;
      }
  
      &+footer {
        margin: 0;
      }
  
      .in-text-icon {
        margin-bottom: $spacing-3 !important; // To overwrite parent that is set to !important
        grid-template-columns: none;
        grid-gap: 0;
  
        @include media(">=uol-media-m") {
          height: 3.125rem;
        }
  
        svg {
          justify-self: center!important;
          color: #00A881;
          margin-top: 0.635rem;
        }
      }
    }
  
      .uol-facts-figures-v2__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-3;
        color: #00A881;
        font-family: $font-family-serif;
        font-weight: 800;
        font-size: 2rem;
        line-height: 2.5rem;
        
        @include media(">=uol-media-m") {
          font-size: 2.74rem;
          line-height: 3.5rem;
        }

        @include media(">=uol-media-l") {
          font-size: 3.3125rem;
          line-height: 3.9375rem;
        }
  
        .uol-tiles & {
          color: $color-brand--bright;
        } 
        
        &.uol-icon {
          @include media(">=uol-media-m") {
            padding-top: 0.4375rem;
            height: $spacing-7;
          }

          @include media(">=uol-media-l") {
            padding-top: 0.625rem;
            height: 3.3125rem;
          }
        }
      }
  
        .uol-facts-figures-v2__headline__1__emphasis {
          @include font-size-responsive(2.75rem, 4.25rem);
          @include line-height-responsive(2.75rem, 3rem);
        }
      
      .uol-facts-figures-v2__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
        @extend %text-size-paragraph;
        
        margin-top: 0;
        margin-bottom: $spacing-3;
        color: $color-font--dark;
      }

    .uol-facts-figures-v2__footer {
      padding-top: $spacing-3;
    }
  
    .uol-facts-figures-v2__optional-fact-source {
      @extend %text-size-paragraph--small;
      color: $color-font;
      margin-top: 0;
      margin-bottom: $spacing-3;
      padding-top: $spacing-3;

      &+footer {
        padding-top: 0;
      }
    }

    .uol-facts-figures-v2__cite {
      @include font-size-responsive(1rem, 1rem, 1.125rem);
      @include line-height-responsive(1.375rem, 1.375rem, 1.75rem);
  
      font-style: normal;
      color: $color-font--dark;
      font-weight: $font-weight-bold--sans-serif;
      font-size: 1.125rem;
      line-height: 1.75rem;

      @include media(">=uol-media-m") {
        font-size: 1.25rem;
        line-height: 2rem;
      }
    }
  
    .uol-facts-figures-v2__link {
      @include link_focus(3px);
      
      color: $color-font--dark;
      color: inherit;
  
      &:hover {
        text-decoration-color: $color-brand;
      }
    }
  • URL: /components/raw/uol-facts-figures-v2/_facts-figures-v2.scss
  • Filesystem Path: src/library/02-components/facts-figures-v2/_facts-figures-v2.scss
  • Size: 4.6 KB 
{
  "facts": [
    {
      "title_1": "Top 100",
      "title_2": "world ranking university",
      "cite": {
        "text": "QS World University Rankings 2021",
        "url": "https://example.com/1"
      }
    }
  ]
}