University of Leeds Design System v1.0.13

Key Facts: Multiple Values

Guidance

This component is used to display a list of key facts. This block of facts communicates important facts about a course, for instance, and is prominently positioned at the top of a page.

Developer guidance

This component accepts an array of “facts” which is output as a description list in one to three columns dependent upon device.

Each fact consists of:

  • “term” - For example “Delivery type”
  • “data” - Array of one or more “content” items, for example “On campus”
    "facts": [
{
  "term": "Delivery type",
  "data": [
    {
      "content": "On campus"
    },
    {
      "content": "Virtual"
    },
    ...
  ]
},
...
]
{% if facts.length > 0 %}
<div class="uol-key-facts">
  <div class="uol-content-container">
    <div class="uol-col-container uol-col-container--key-facts">
      <dl class="uol-key-facts__list">
        {% for fact in facts %}
          <div class="uol-key-facts__group">
            <dt class="uol-key-facts__term">{{ fact.term }}</dt>
              {% for data in fact.data %}
                <dd class="uol-key-facts__data">{{ data.content | safe }}</dd>
              {% endfor %}
          </div>
        {% endfor %}
      </dl>
    </div>
  </div>
</div>
{% endif %}
 
<div class="uol-key-facts">
    <div class="uol-content-container">
        <div class="uol-col-container uol-col-container--key-facts">
            <dl class="uol-key-facts__list">

                <div class="uol-key-facts__group">
                    <dt class="uol-key-facts__term">Item 1</dt>

                    <dd class="uol-key-facts__data">Value 1</dd>

                </div>

                <div class="uol-key-facts__group">
                    <dt class="uol-key-facts__term">Item 2</dt>

                    <dd class="uol-key-facts__data">Value 1</dd>

                </div>

                <div class="uol-key-facts__group">
                    <dt class="uol-key-facts__term">Item 3</dt>

                    <dd class="uol-key-facts__data">Value 1</dd>

                </div>

                <div class="uol-key-facts__group">
                    <dt class="uol-key-facts__term">Item 4</dt>

                    <dd class="uol-key-facts__data">Value 1</dd>

                    <dd class="uol-key-facts__data">Value 2</dd>

                    <dd class="uol-key-facts__data">Value 3</dd>

                </div>

                <div class="uol-key-facts__group">
                    <dt class="uol-key-facts__term">Item 5</dt>

                    <dd class="uol-key-facts__data">Value 1</dd>

                    <dd class="uol-key-facts__data">Value 2</dd>

                </div>

            </dl>
        </div>
    </div>
</div>
  • Content: 
    .uol-key-facts {
  background-color: $color-brand-2--light;

  /*
  TODO: width fix for fitting in to course pages incorporating scroll bar
  Do more robust solution whereby scrollbar width is calculated via using client width
  */
  width: 100%;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50%;
  margin-right: -50%;
  margin-bottom: $spacing-6;

  @include media(">=uol-media-l") {
    width: calc(100vw - 9px);
    position: relative;
    margin-left: -50vw;
    margin-right: -50vw;
    margin-bottom: $spacing-6;
    margin-bottom: $spacing-7;
  }
}

  .uol-key-facts__list {
    @extend .text-size-paragraph;

    font-variant-numeric: lining-nums;
    padding: 0;
    margin: $spacing-5 #{$spacing-4 / 2};
    width: 100%;

    @include media(">=uol-media-s", "<uol-media-l") {
      columns: 2;
      column-gap: $spacing-4;
      margin: $spacing-5 calc((1 / 12) * 100% + #{$spacing-2});
    }

    @include media(">=uol-media-l") {
      columns: 3;
      margin: $spacing-4 #{$spacing-5 / 2};
      column-gap: $spacing-5;
    }

    @include media(">=uol-media-xl") {
      margin: 2.25rem calc((1 / 12) * 100% + #{$spacing-6 / 2}) 2.25rem #{$spacing-6 / 2};
      column-gap: calc((100% + #{$spacing-6}) / 11 + #{$spacing-6});
    }
  }

  .uol-key-facts__group {
    break-inside: avoid;
    margin-bottom: $spacing-4;
    // background-color: rgba(#0FF, 0.3);

    &:last-child {
      // margin-bottom: 0;
    }

    @include media(">=uol-media-l") {
      margin: 0;
      padding: $spacing-3 0;
    }
  }

  .uol-key-facts__term {
    font-weight: $font-weight-bold--sans-serif;
    color: $color-font--dark;
  }

  .uol-key-facts__data {
    margin-left: 0;
  }

  // Temp to fix alignment, there is probably better way to do this.
  .uol-col-container--key-facts {
    
    [class*=uol-col-] & {
      margin: 0;
    }
    @include media(">=uol-media-l") {
      padding: 1rem 1.5rem;
    }
  }
  • URL: /components/raw/uol-key-facts/_key-facts.scss
  • Filesystem Path: src/library/02-components/key-facts/_key-facts.scss
  • Size: 1.9 KB 
{
  "facts": [
    {
      "term": "Item 1",
      "data": [
        {
          "content": "Value 1"
        }
      ]
    },
    {
      "term": "Item 2",
      "data": [
        {
          "content": "Value 1"
        }
      ]
    },
    {
      "term": "Item 3",
      "data": [
        {
          "content": "Value 1"
        }
      ]
    },
    {
      "term": "Item 4",
      "data": [
        {
          "content": "Value 1"
        },
        {
          "content": "Value 2"
        },
        {
          "content": "Value 3"
        }
      ]
    },
    {
      "term": "Item 5",
      "data": [
        {
          "content": "Value 1"
        },
        {
          "content": "Value 2"
        }
      ]
    }
  ]
}