Contact

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
/* No context defined. */