E3 Alliance Pattern Library

Image: Default 

<figure class="image ">
    <picture class="image__picture">
        <img class="image__image" loading="lazy" type="image/jpeg" src="holder.js/800x650" alt="">

    </picture>
</figure>
 
<figure class="image {{ image.caption ? 'image--with-caption' : '' }}">
    <picture class="image__picture">
        <img
            class="image__image"
            loading="lazy"
            type="image/jpeg"
            src="{{ image.src | towebp }}"
            alt="{{ image.alt ?: '' }}">
{#            height="{{ cropHeight }}"#}
{#            width="{{ width }}">#}
    </picture>
    {% if image.caption %}
        <figcaption class="image__caption">
            {{ image.caption }}
        </figcaption>
    {% endif %}
</figure>
 
{
  "site": {
    "name": "E3 Alliance"
  },
  "image": {
    "src": "holder.js/800x650",
    "altText": "placeholder"
  }
}
  • Content: 
    .image
    --captionColor grayDarkest

    &--dark
        --captionColor gray

    width 100%
    height 100%

    &__picture
        width 100%

    &__image
        width 100%
        height 100%
        object-fit cover

    &__gallery-image
        height 100%
        width auto

    &__image-divider
        border-bottom 2px solid orange
        margin-top 24px

    &__caption
        @extends $detail
  • URL: /components/raw/image/image.styl
  • Filesystem Path: patterns/partials/image/image.styl
  • Size: 411 Bytes

No notes defined.