V6 Clearleft Patterns

Case Study Home 

<article class="Case-study-home">
    <figure class="Case-study-home__figure">
        <img class="Case-study-home__image" src="https://via.placeholder.com/1000x600" alt="alt" />
        <div class="Case-study-home__content flow--s">
            <img class="Case-study-home__logo" src="https://via.placeholder.com/200x50" alt="alt" loading="lazy" />
            <div class="flow--s">
                <h2 class="h h-4">
                    Redesigning UCL’s prospectus and application process
                </h2>
                <p class="body text-grey">
                    How do you help people to make life-changing decisions with confidence?
                </p>

                <a class="combo-button focus combo-button--blue" href="#">
                    <span class="">Read the case study</span>
                    <div>

                        <svg role="img" aria-hidden="true" focusable="false" class="Icon Icon--arrow-right  Icon--s">
                            <use xlink:href="/v6-assets/img/icons/sprite.svg?cachebust=2#arrow-right"></use>
                        </svg>
                    </div>
                </a>
            </div>
        </div>
    </figure>
</article>
 
<article class="Case-study-home">
  <figure class="Case-study-home__figure">
    {% if thumbnail is defined and thumbnail.src is defined %}
      <img class="Case-study-home__image" src="{{ thumbnail.src }}" alt="{{ thumbnail.alt }}" />
    {% endif %}
    <div class="Case-study-home__content flow--s">
      {% if logo is defined and logo.src is defined %}
        <img class="Case-study-home__logo"
          src="{{ logo.src }}"
          alt="{{ logo.alt }}"
          loading="lazy" />
      {% endif %}
      <div class="flow--s">
        <h2 class="h h-4">
          {{ title }}
        </h2>
        <p class="body text-grey">
          {{ description }}
        </p>
        {% include '@combo-button' with {
          text: 'Read the case study',
          link: url,
          theme: 'blue'
        } %}
      </div>
    </div>
  </figure>
</article>
 
{
  "tag": "Client name",
  "logo": {
    "src": "https://via.placeholder.com/200x50",
    "alt": "alt"
  },
  "thumbnail": {
    "src": "https://via.placeholder.com/1000x600",
    "alt": "alt"
  },
  "url": "#",
  "title": "Redesigning UCL’s prospectus and application process",
  "description": "How do you help people to make life-changing decisions with confidence?"
}
  • Content: 
    .Case-study-home {
  &__figure {
    display: grid;
    position: relative;
  }

  &__image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    position: absolute;
  }

  &__content {
    background-color: var(--white);
    margin: var(--space-s-l);
    padding: var(--space-s-l);
    z-index: 1;
  }

  &__logo {
    max-height: 56px;
    max-width: 180px;
  }
}

@media screen and (min-width: 50rem) {
  .Case-study-home {
    &__figure {
      grid-template-columns: repeat( 2, 1fr );
    }

    &__content {
      grid-column: 2 / 2;
    }

    &__logo {
      max-height: 66px;
      max-width: 280px;
    }
  }
}
  • URL: /components/raw/case-study-home/case-study-home.css
  • Filesystem Path: src/templates/components/case-study-home/case-study-home.css
  • Size: 631 Bytes

No notes defined.