University of Leeds Design System v1.0.14.2

In Text Facts: Two Facts

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">Two items, one with link</h3>
    <div class="uol-in-text-facts__container">

        <a href="/facts-url" class="uol-in-text-fact__item uol-in-text-fact__link">
            <h4 class="uol-in-text-fact__item__title">
                With link
            </h4>
            <p class="uol-in-text-fact__item__description">
                In text facts item description
            </p>
        </a>

        <div class="uol-in-text-fact__item">
            <h4 class="uol-in-text-fact__item__title">
                Without link
            </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": "Two items, one with link",
  "items": [
    {
      "title": "With link",
      "description": "In text facts item description",
      "url": "/facts-url"
    },
    {
      "title": "Without link",
      "description": "In text facts item description"
    }
  ]
}