V6 Clearleft Patterns

Image Triptych: Default 

<div class="Image-triptych">
    <figure class="Image-triptych__item Image-triptych__item--1">
        <img alt="" src="/v6-assets/img/splash1000w.jpg" loading="lazy" />
    </figure>
    <figure class="Image-triptych__item Image-triptych__item--2">
        <img alt="" src="/v6-assets/img/jeremy-keith-2x.jpg" loading="lazy" />
    </figure>
    <figure class="Image-triptych__item Image-triptych__item--3">
        <img alt="" src="/v6-assets/img/hero2.jpg" loading="lazy" />
    </figure>
</div>
 
<div class="Image-triptych{{
  layout is defined and layout is not empty
    ? ' Image-triptych--' ~ layout
  }}">
  {% for image in images %}
    <figure class="Image-triptych__item Image-triptych__item--{{ loop.index }}">
      {% if image.src is defined %}
        <img alt="{{ image.alt }}" src="{{ image.src }}" loading="lazy" />
      {% endif %}
    </figure>
  {% endfor %}
</div>
 
{
  "images": [
    {
      "src": "/v6-assets/img/splash1000w.jpg",
      "alt": ""
    },
    {
      "src": "/v6-assets/img/jeremy-keith-2x.jpg",
      "alt": ""
    },
    {
      "src": "/v6-assets/img/hero2.jpg",
      "alt": ""
    }
  ]
}
  • Content: 
    .Image-triptych {
  display: grid;
  grid-gap: var(--gutter);
  grid-template-columns: repeat(3, 1fr);

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 1;
  }

  &--1\/2,
  &--2\/1 {
    img {
      aspect-ratio: 16 / 9;
    }
  }

  &--2\/1 &__item--1 {
    grid-column: 1 / span 2;
    grid-row: 1 / span 2;
  }

  &--1\/2 &__item--1 {
    grid-column: 2 / span 2;
    grid-row: 1 / span 2;
  }
}
  • URL: /components/raw/image-triptych/image-triptych.css
  • Filesystem Path: src/templates/components/image-triptych/image-triptych.css
  • Size: 435 Bytes

No notes defined.