V6 Clearleft Patterns

Contact Footer 

<aside class="Contact theme--light">
    <div class="constrain">
        <div class="Contact__container">
            <img class="Contact__image" src="/v6-assets/img/splash1000w.jpg" alt="" loading="lazy" />

            <div class="Contact__content flow">
                <h2 class="h h-3">
                    You're unique
                </h2>
                <div class="body">
                    <p>Which is why we prefer to tailor our approach specifically for you. We'd be happy to discuss a collaborative partnership with your organisation about how we can achieve the best outcomes together.</p>
                </div>

                <div class="Team-contact">
                    <figure>
                        <img src="/v6-assets/img/author-image.png" alt="Alt" loading="lazy" />
                    </figure>
                    <div class="flow--3xs">
                        <a href="mailto:#" class="Twi Twi--link text-blue focus" style="">
                            <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right ">
                                <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                            </svg>
                            <span>Lets chat</span></a>
                        <p class="small">
                            Jeremy Keith, Co-Founder
                        </p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</aside>
 
<aside class="Contact theme--light">
  <div class="constrain">
    <div class="Contact__container">
      {% if image is defined and image.src is defined %}
        <img class="Contact__image"
          src="{{ image.src }}"
          alt="{{ image.alt }}"
          loading="lazy" />
      {% endif %}

      <div class="Contact__content flow">
        <h2 class="h h-3">
          {{ title }}
        </h2>
        <div class="body">
          {{ description }}
        </div>

        {% if teamContact is defined and teamContact %}
          {% include '@team-contact' with teamContact|merge({
            title: link.text ? link.text : 'Email ' ~ teamContact.name
          }) only %}
        {% elseif link is defined and link.url is defined %}
          {% include '@combo-button' with {
            text: link.text,
            link: link.url
          } only %}
        {% endif %}
      </div>
    </div>
  </div>
</aside>
 
{
  "title": "You're unique",
  "description": "<p>Which is why we prefer to tailor our approach specifically for you. We'd be happy to discuss a collaborative partnership with your organisation about how we can achieve the best outcomes together.</p>",
  "link": {
    "text": "Lets chat",
    "url": "#"
  },
  "image": {
    "src": "/v6-assets/img/splash1000w.jpg"
  },
  "teamContact": {
    "title": "Email Jeremy Keith about stuff and things",
    "name": "Jeremy Keith",
    "role": "Co-Founder",
    "email": "#",
    "image": {
      "src": "/v6-assets/img/author-image.png",
      "alt": "Alt"
    }
  }
}
  • Content: 
    .Contact {
  position: relative;
  z-index: 2;
  margin-top: var(--space-xl-2xl);

  &__container {
    padding-top: var(--gutter);
    padding-bottom: var(--gutter);
  }

  &__image {
    aspect-ratio: 16 / 9;
    object-fit: cover;
    margin-bottom: var(--space-s);
  }

  @media screen and (min-width: 50rem) {
    &__container {
      display: grid;
      grid-gap: var(--gutter);
      grid-template-columns: 3fr 2fr;
      align-items: stretch;
    }

    &__content {
      padding-top: var(--space-s-l);
      padding-bottom: var(--space-s-l);
    }

    &__image {
      order: 1;
      margin-bottom: calc(2 * var(--negative-gutter));
      margin-top: calc(2 * var(--negative-gutter));
    }
  }
}
  • URL: /components/raw/contact-footer/contact-footer.css
  • Filesystem Path: src/templates/components/contact-footer/contact-footer.css
  • Size: 710 Bytes

No notes defined.