Guidance

Blocks showing facts and figures on a page. One or two can be displayed but no more than two.

Developer guidance

The root level title apears as a title above the facts blocks.

Each item should be contained within the items array and include a title a description, and an optional url field. Specifying a url value turns the block in to an active link to that URL.

'context': {
  'title': 'Rankings and Awards',
  'items': [
    {
      'title': 'Top 10',
      'description': 'in the UK for Earth and Marine services',
      'url': '/facts-url'
    },
    {
      'title': 'Silver',
      'description': 'Athena Swan Award',
      'url': '/facts-url'
    }
  ]
}
<div class="uol-in-text-facts">
  <h3 class="uol-in-text-facts__title">{{ title }}</h3>
  <div class="uol-in-text-facts__container">

    {% for item in items %}
       {% if item.url %}<a href="{{ item.url }}" class="uol-in-text-fact__item uol-in-text-fact__link">{% else %}<div class="uol-in-text-fact__item">{% endif %}
        <h4 class="uol-in-text-fact__item__title">
          {{ item.title }}
        </h4>
        <p class="uol-in-text-fact__item__description">
          {{ item.description }}
        </p>
      {% if item.url %}</a>{% else %}</div>{% endif %}
    {% endfor %}
  </div>

</div>
<div class="uol-in-text-facts">
    <h3 class="uol-in-text-facts__title">One fact with no link</h3>
    <div class="uol-in-text-facts__container">

        <div class="uol-in-text-fact__item">
            <h4 class="uol-in-text-fact__item__title">
                In text facts item title
            </h4>
            <p class="uol-in-text-fact__item__description">
                In text facts item description
            </p>
        </div>

    </div>

</div>
  • Content:
    .uol-in-text-facts {
      margin-bottom: $spacing-4;
      
      @include media(">=uol-media-m") {
        margin-bottom: $spacing-6;
      }
    }
    
      .uol-in-text-facts__title {
        @extend .uol-typography-heading-3;
    
        color: $color-font--dark;
      }
    
      .uol-in-text-facts__container {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
    
      .uol-in-text-fact__item {
        width: 100%;
        background-color: $color-brand-2--bright;
        color: $color-white;
        text-align: center;
        padding: $spacing-4 0 $spacing-5;
        margin-bottom: $spacing-4;
    
        &:not(:only-child) {
          @include media(">=uol-media-m") {
            width: calc(50% - #{$spacing-4} / 2);
            margin-bottom: 0;
          }
    
          @include media(">=uol-media-l") {
            width: calc(50% - #{$spacing-5} / 2);
          }
    
          @include media(">=uol-media-xl") {
            width: calc(50% - #{$spacing-6} / 2);
          }
        }
      }
    
        .uol-in-text-fact__item__title {
          @extend .uol-typography-heading-4;
    
          margin: 0 0 $spacing-1 0;
          text-decoration: none;
        }
    
        .uol-in-text-fact__item__description {
          @extend .uol-typography-paragraph;
    
          margin: 0;
        }
    
        .uol-in-text-fact__link {
          text-decoration: none;
    
          &:hover,
          &:focus-within {
            box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15), 0 2px 4px rgba(0, 0, 0, .12);
          }
        }
    
        .uol-in-text-fact__link .uol-in-text-fact__item__description {
          text-decoration: underline;
        }
    
  • URL: /components/raw/uol-in-text-facts/_in-text-facts.scss
  • Filesystem Path: src/library/01-foundations/01-typography/03-typography-components/09-in-text-facts/_in-text-facts.scss
  • Size: 1.5 KB
{
  "title": "One fact with no link",
  "items": [
    {
      "title": "In text facts item title",
      "description": "In text facts item description"
    }
  ]
}