V6 Clearleft Patterns

Internship 

<div class="Internship flow--gutter">
    <figure class="Internship__media">
        <div class="Internship__image">
            <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="" loading="lazy">
        </div>
        <figcaption class="Internship__content theme--dark body flow">
            <h2>
                2019: Self treat
            </h2>
            <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.</p>
        </figcaption>
    </figure>

    <div class="grid grid--7/5">
        <div class="body flow">
            <p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
        </div>

        <div class="body small flow">
            <p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>

            <a class="combo-button focus" href="#">
                <span class="">selftreat.co.uk</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="Internship flow--gutter">
  <figure class="Internship__media">
    <div class="Internship__image">
      {% include '@srcset' with {
        imageList: imageList,
        alt: alt
      } %}
    </div>
    <figcaption class="Internship__content theme--dark body flow">
      <h2>
        {{ title }}
      </h2>
      {{ preview|raw }}
    </figcaption>
  </figure>

  <div class="grid grid--7/5">
    <div class="body flow">
      {{ content|raw }}
    </div>

    <div class="body small flow">
      {{ author|raw }}

      {% if link and linkLabel %}
        {% include '@combo-button' with {
          text: linkLabel,
          link: link
        } %}
      {% endif %}
    </div>
  </div>
</div>
 
{
  "title": "2019: Self treat",
  "preview": "<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Sed posuere consectetur est at lobortis.</p>",
  "content": "<p>Donec id elit non mi porta gravida at eget metus. Donec ullamcorper nulla non metus auctor fringilla. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>",
  "author": "<p>Nullam id dolor id nibh ultricies vehicula ut id elit. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Nullam quis risus eget urna mollis ornare vel eu leo.</p>",
  "link": "#",
  "linkLabel": "selftreat.co.uk",
  "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: 
    .Internship {
  &__content {
    padding: var(--space-s-l);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  @media screen and (min-width: 50rem) {
    &__content {
      width: 45%;
      max-width: 416px;
    }

    &__media {
      display: flex;
      align-items: stretch;
      min-height: 40vw;
    }

    &__image {
      order: 1;
      position: relative;
      flex: 1;

      img {
        position: absolute;
        height: 100%;
        width: 100%;
        left: 0;
        top: 0;
        object-fit: cover;
      }
    }
  }

  @media screen and (min-width: 75rem) {
    &__media {
      min-height: 444px;
    }
  }
}
  • URL: /components/raw/internship/internship.css
  • Filesystem Path: src/templates/components/internship/internship.css
  • Size: 671 Bytes

No notes defined.