V6 Clearleft Patterns

Hero Case Study 

<div class="Hero-case-study flow--l">
    <header class="flow--3xs">
        <h2 class="Hero-case-study__eyebrow eyebrow">
            case studies
        </h2>
        <h3 class="h h-4">
            We've recently helped
        </h3>
    </header>
    <div class="Hero-case-study__inner">
        <img class="srcset" src="/v6-assets/img/splash300w.jpg" sizes="(min-width: 1220px) 1100px, calc(93.78vw - 25px)" srcset="        /v6-assets/img/splash300w.jpg 300w,
            /v6-assets/img/splash600w.jpg 600w,
            /v6-assets/img/splash1000w.jpg 1000w,
            /v6-assets/img/splash2000w.jpg 2000w,
    " alt="Build the culture and the capabilities for design to flourish" loading="lazy">

        <div class="Hero-case-study__content flow">
            <img class="Hero-case-study__logo" src="/v6-assets/img/3m.png" alt="" />
            <h3 class="h h-4">
                Build the culture and the capabilities for design to flourish
            </h3>
            <p class="body">
            <p>How do you help a small team in a large multinational company use design to achieve an impact at scale?</p>
            </p>

            <a class="combo-button focus" href="">
                <span class="">Read this client story</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>
</div>
 
<div class="Hero-case-study flow--l">
  <header class="flow--3xs">
    <h2 class="Hero-case-study__eyebrow eyebrow">
      {{ eyebrow }}
    </h2>
    <h3 class="h h-4">
      {{ title }}
    </h3>
  </header>
  <div class="Hero-case-study__inner">
    {% include '@srcset' with {
      imageList: caseStudy.imageList,
      alt: caseStudy.title
    } %}

    <div class="Hero-case-study__content flow">
      {% if caseStudy.logo %}
        <img class="Hero-case-study__logo" src="{{ caseStudy.logo }}" alt="" />
      {% endif %}
      <h3 class="h h-4">
        {{ caseStudy.title }}
      </h3>
      <p class="body">
        {{ caseStudy.description }}
      </p>
      {% include '@combo-button' with {
        text: 'Read this client story',
        link: caseStudy.link
      } %}
    </div>
  </div>
</div>
 
{
  "eyebrow": "case studies",
  "title": "We've recently helped",
  "caseStudy": {
    "title": "Build the culture and the capabilities for design to flourish",
    "description": "<p>How do you help a small team in a large multinational company use design to achieve an impact at scale?</p>",
    "logo": "/v6-assets/img/3m.png",
    "imageList": [
      {
        "src": "/v6-assets/img/splash300w.jpg",
        "size": "300w"
      },
      {
        "src": "/v6-assets/img/splash600w.jpg",
        "size": "600w"
      },
      {
        "src": "/v6-assets/img/splash1000w.jpg",
        "size": "1000w"
      },
      {
        "src": "/v6-assets/img/splash2000w.jpg",
        "size": "2000w"
      }
    ]
  }
}
  • Content: 
    .Hero-case-study {
  --content-width: 100%;

  &__inner {
    position: relative;
    padding: var(--space-l-xl) var(--gutter);
    max-width: 100vw;
    margin-left: var(--negative-gutter);
    margin-right: var(--negative-gutter);
  }

  .srcset {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
    object-fit: cover;
    z-index: -1;
  }

  &__content {
    background-color: var(--white);
    padding: var(--space-s-l);
    width: calc(var(--content-width) - var(--content-offset, 0px));
    margin-right: var(--space-l-xl);
    position: relative;
  }

  &__logo {
    max-height: 80px;
    max-width: 200px;
  }

  .combo-button:after {
    content: '';
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
    z-index: 1;
  }
}

@media screen and (min-width: 50rem) {
  .Hero-case-study {
    --content-width: 66%;
    --content-offset: var(--space-l-xl) * 2;

    &__inner {
      width: 100%;
      padding: var(--space-l-xl) 0rem;
      margin-left: 0;
      display: flex;
      justify-content: flex-end;
    }
  }
}

@media screen and (min-width: 75rem) {
  .Hero-case-study {
    --content-width: 50%;
  }
}
  • URL: /components/raw/hero-case-study/hero-case-study.css
  • Filesystem Path: src/templates/components/hero-case-study/hero-case-study.css
  • Size: 1.2 KB

No notes defined.