University of Leeds Design System v1.0.13

Key Facts

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">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</dd>

                </div>

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

                    <dd class="uol-key-facts__data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus.</dd>

                </div>

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

                    <dd class="uol-key-facts__data">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus.</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": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
        }
      ]
    },
    {
      "term": "Item 2",
      "data": [
        {
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus."
        }
      ]
    },
    {
      "term": "Item 3",
      "data": [
        {
          "content": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam malesuada in lorem eu cursus. Duis id ipsum tortor. Suspendisse imperdiet purus id varius tempus. In ac pulvinar elit, at tempus metus."
        }
      ]
    }
  ]
}