University of Leeds Design System v1.0.13

Info List: With Email

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 ">Name</dt>

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

                John Smith

            </dd>

        </div>

        <div class="uol-info-list__group">
            <dt class="uol-info-list__term ">Email</dt>

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

                <a href="mailto:j.smith@example.com">j.smith@example.com</a>

            </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
      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": "Name",
      "data": [
        {
          "label": "John Smith"
        }
      ]
    },
    {
      "term": "Email",
      "data": [
        {
          "type": "email",
          "label": "j.smith@example.com"
        }
      ]
    }
  ]
}