University of Leeds Design System v1.0.13

Contact: Example

No notes defined.

{% if organisation | length %}
<h2 class="uol-footer-contact__title">Contact information</h2>
<address class="uol-footer-contact" vocab="https://schema.org/" typeof="Organization">
  {% if organisation.name %}<strong class="uol-footer-contact__name" property="name">{{ organisation.name }}</strong>{% endif %}
  {% if organisation.address %}
    <div class="uol-footer-contact__address" property="address" typeof="PostalAddress">
      {% if organisation.address.street %}
        <div property="streetAddress">
          <span class="uol-footer-contact__address__item" >{{ organisation.address.street }}</span>
          {% if organisation.address.street2 %}
            <span class="uol-footer-contact__address__item">{{ organisation.address.street2 }}</span>
          {% endif %}
          </div>
      {% endif %}
      {% if organisation.address.locality %}<span class="uol-footer-contact__address__item" property="addressLocality">{{ organisation.address.locality }}</span>{% endif %}
      {% if organisation.address.region %}<span class="uol-footer-contact__address__item" property="addressRegion">{{ organisation.address.region }}</span>{% endif %}
      {% if organisation.address.postalCode %}<span class="uol-footer-contact__address__item" property="postalCode">{{ organisation.address.postalCode }}</span>{% endif %}
      {% if organisation.address.country %}<span class="uol-footer-contact__address__item" property="addressCountry">{{ organisation.address.country }}</span>{% endif %}
    </div>
  {% endif %}
  {% if organisation.telephone or organisation.email %}
    <dl class="uol-footer-contact__telephone-email-container">
        {% if organisation.telephone %}
          <dt class="uol-footer-contact__telephone-email-label">Telephone</dt>
            <dd class="uol-footer-contact__telephone-email-data">
              <a class="uol-footer-contact__telephone" href="tel:{{ organisation.telephone | replace(" ", "") }}" property="telephone">{{ organisation.telephone }}</a>
            </dd>
        {% endif %}
        {% if organisation.email %}
          <dt class="uol-footer-contact__telephone-email-label">Email</dt>
            <dd class="uol-footer-contact__telephone-email-data">
              <a class="uol-footer-contact__email" href="mailto:{{ organisation.email }}" property="email">{{ organisation.email }}</a>
            </dd>
        {% endif %}
    </dl>

  {% endif %}
</address>
{% endif %}
 
<h2 class="uol-footer-contact__title">Contact information</h2>
<address class="uol-footer-contact" vocab="https://schema.org/" typeof="Organization">
    <strong class="uol-footer-contact__name" property="name">Organisation name</strong>

    <div class="uol-footer-contact__address" property="address" typeof="PostalAddress">

        <div property="streetAddress">
            <span class="uol-footer-contact__address__item">1 Example Street</span>

            <span class="uol-footer-contact__address__item">Area name</span>

        </div>

        <span class="uol-footer-contact__address__item" property="addressLocality">Leeds</span>
        <span class="uol-footer-contact__address__item" property="addressRegion">Region</span>
        <span class="uol-footer-contact__address__item" property="postalCode">A11 2BC</span>
        <span class="uol-footer-contact__address__item" property="addressCountry">Country</span>
    </div>

    <dl class="uol-footer-contact__telephone-email-container">

        <dt class="uol-footer-contact__telephone-email-label">Telephone</dt>
        <dd class="uol-footer-contact__telephone-email-data">
            <a class="uol-footer-contact__telephone" href="tel:+44123456789" property="telephone">+44 1234 56789</a>
        </dd>

        <dt class="uol-footer-contact__telephone-email-label">Email</dt>
        <dd class="uol-footer-contact__telephone-email-data">
            <a class="uol-footer-contact__email" href="mailto:test@example.com" property="email">test@example.com</a>
        </dd>

    </dl>

</address>
  • Content: 
    .uol-footer-contact {
  font-style: normal;
  font-variant-numeric: lining-nums;
}

  .uol-footer-contact__title {
    @extend .hide-accessible;
  }

  .uol-footer-contact__name {
    @extend %text-size-paragraph--small;

    display: block;
    position: relative;
    font-weight: $font-weight-bold--sans-serif;
    margin-top: 1rem;
    margin-bottom: 1.5rem;

    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      top: -1rem;
      left: 0;
      width: 1rem;
      height: 0.25rem;
      background-color: $color-brand--bright;
    }
  }

  .uol-footer-contact__address {
    @extend %text-size-paragraph--small;

    padding: 0 0 $spacing-4;
  }

    .uol-footer-contact__address__item {
      display: block;
    }

  .uol-footer-contact__telephone-email-container {
    position: relative;
    margin-top: $spacing-4;
    margin-bottom: $spacing-6;

    &::before {
      content: "";
      position: absolute;
      display: inline-block;
      top: -1rem;
      left: 0;
      width: 1rem;
      height: 0.25rem;
      background-color: $color-brand--bright;
    }
  }

  .uol-footer-contact__telephone-email-label {
    @extend .hide-accessible;
  }

  .uol-footer-contact__telephone-email-data {
    margin-left: 0;
  }

  .uol-footer-contact__telephone,
  .uol-footer-contact__email {
    @extend %text-size-paragraph--small;

    display: inline-block;
    color: inherit;
    text-decoration: none;
  }
  • URL: /components/raw/uol-footer-contact/_contact-address.scss
  • Filesystem Path: src/library/02-components/footer-partials/contact-address/_contact-address.scss
  • Size: 1.5 KB 
{
  "organisation": {
    "name": "Organisation name",
    "address": {
      "street": "1 Example Street",
      "street2": "Area name",
      "locality": "Leeds",
      "region": "Region",
      "postalCode": "A11 2BC",
      "country": "Country"
    },
    "telephone": "+44 1234 56789",
    "email": "test@example.com"
  }
}