University of Leeds Design System v1.14.3

Info List: Long Term And Data

No notes defined.

{#
    NB: .uol-info-list__group while semantically meaningless
    is required due to CSS DL styling limitations.
    See Example 3:
    https://html.spec.whatwg.org/multipage/grouping-content.html#the-dl-element
#}
{% if info_list.length > 0 %}
<div class="uol-info-list-container">
	<dl class="uol-info-list {{ 'uol-info-list--' + info_list_style if info_list_style }}">
		{% for info_item in info_list %}
			<div class="uol-info-list__group">
				<dt class="uol-info-list__term {{ 'uol-info-list__term--hidden' if info_item.term_hide }}">{{ info_item.term }}</dt>
				{% for data in info_item.data %}
					<dd class="uol-info-list__data {{ 'uol-info-list__data--' + data.type if data.type }}">
					{% if data.type == 'email' %}
						<a href="mailto:{{ data.label }}">{{ data.label }}</a>
					{% elseif data.type == 'url' %}
						<a href="{{ data.url }}">{{ data.label if data.label else data.url }}</a>
					{% elseif data.type == 'phone' %}
						<a href="tel:{{ data.label }}">{{ data.label }}</a>
					{% elseif data.type == 'button' %}
						<a class="uol-info-list__data__button uol-arrow-link" href="{{ data.url }}">{{ data.label }}</a>
					{% else %}
						{{ data.label }}
					{% endif %}
					</dd>
				{% endfor %}
			</div>
		{% endfor %}
	</dl>
</div>
{% endif %}
 
<div class="uol-info-list-container">
    <dl class="uol-info-list ">

        <div class="uol-info-list__group">
            <dt class="uol-info-list__term ">Cakes cakes and more cakes</dt>

            <dd class="uol-info-list__data ">

                Data item one of Fruits: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur diam et neque tincidunt, ac fringilla justo pretium. Sed eu faucibus lorem. Duis tincidunt eget nisl nec aliquam. Pellentesque pulvinar maximus justo vel maximus. Proin quis gravida ante, vel vulputate odio. Mauris laoreet, velit nec dignissim convallis, lacus erat rhoncus dui, id tristique mi enim eu felis. Suspendisse eget mauris quis odio pellentesque dictum. Fusce mauris velit, suscipit at dictum at, pulvinar id metus.

            </dd>

        </div>

    </dl>
</div>
  • Content: 
    .uol-info-list-container {
  display: block;
  width: 100%;
}

.uol-info-list {
  @extend .text-size-paragraph;

  overflow: auto;
}

  .uol-info-list--inline {
    @include media(">=uol-media-m") {
      display: flex;
      flex-wrap: wrap;
    }
  }

    .uol-info-list__group {
        clear: both;
        margin-bottom: $spacing-3;
        overflow: auto;

        .uol-info-list--inline & {
          @include media(">=uol-media-m") {
            margin-right: 1em;
          }
        }

        .uol-people-profile__card & {
          margin-bottom: 0;
        }
    }

    .uol-info-list__group:last-child {
      margin-bottom: 0;
    }

    .uol-info-list__term {
      float: left;
      font-weight: 700;
      margin-right: 0.2em;

      &::after {
        content: ":\00a0";
      }
    }

      .uol-info-list__term--hidden {
        @extend .hide-accessible;
      }

    .uol-info-list__data {
      float: left; // add comment to force update as not on dev
      display: contents;
      margin: 0;
      font-variant-numeric: lining-nums;

      &::after {
        content: ",\00a0";
        display: inline-block;
        margin-left: -0.2em;
      }

      &:last-of-type {
        &::after {
          content: none;
        }
      }

      a {
        @include link_focus(2px);

        text-decoration: underline;
        color: inherit;
        transition: all 0.3s ease;

        &:hover {
          text-decoration-color: $color-brand;
        }

        &.uol-info-list__data__button {
          @extend .uol-arrow-link;
          // @extend .uol-button;
        //   @extend .text-size-paragraph;

        //   display: block;
        //   text-decoration: none;
        //   background-color: $color-black;
        //   color: $color-white--dark;
        //   border-radius: $spacing-3;
        //   padding: $spacing-2 $spacing-6;
        //   margin: $spacing-6 0;
        //   transition: all 0.3s cubic-bezier(1, -0.37, 0.52, 0.96);;

        //   &:hover,
        //   &:focus {
        //     background-color: $color-brand--bright;
        //   }
        }
      }
    }

      .uol-info-list__data--date {
        // @extend .text-size-paragraph--intro;
        @extend %text-size-heading-5;
        @extend %uol-font-serif;

        font-weight: $font-weight-bold--serif;
        display: block;
        float: none;
        border-top: 3px solid $color-brand;
        padding-top: $spacing-5;
        margin-bottom: 0;
        font-variant-numeric: normal;

        @include media(">=uol-media-m") {
          margin-bottom: $spacing-2;
          padding-top: $spacing-6;
        }

      }
  • URL: /components/raw/uol-info-list/_info-list.scss
  • Filesystem Path: src/library/02-components/info-list/_info-list.scss
  • Size: 2.6 KB 
{
  "info_list": [
    {
      "term": "Cakes cakes and more cakes",
      "data": [
        {
          "label": "Data item one of Fruits: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam efficitur diam et neque tincidunt, ac fringilla justo pretium. Sed eu faucibus lorem. Duis tincidunt eget nisl nec aliquam. Pellentesque pulvinar maximus justo vel maximus. Proin quis gravida ante, vel vulputate odio. Mauris laoreet, velit nec dignissim convallis, lacus erat rhoncus dui, id tristique mi enim eu felis. Suspendisse eget mauris quis odio pellentesque dictum. Fusce mauris velit, suscipit at dictum at, pulvinar id metus."
        }
      ]
    }
  ]
}