University of Florida College of the Arts Pattern Library

Image: Image With Caption 

<figure class="image ">
    <picture class="image__picture">
        <source srcset="" type="image/webp">
        <source srcset="" type="image/jpeg">
        <img class="image__image" loading="lazy" type="image/jpeg" src="" alt="" style="object-position: center">
    </picture>
</figure>
 
<figure class="image {{ image.caption ? 'image--with-caption ' : '' }}">
    <picture class="image__picture">
            <source srcset="{{ image.src | resize(848) | towebp }}" type="image/webp">
            <source srcset="{{ image.src | resize(848) | tojpg }}" type="image/jpeg">
        <img
            class="image__image"
            loading="lazy"
            type="image/jpeg"
            src="{{ image.src | tojpg }}"
            alt="{{ image.alt ?: '' }}"
            style="object-position: {{ image.focalPoint ? image.focalPoint.x ~ '% ' ~ image.focalPoint.y ~ '%' : 'center' }}"
        >
    </picture>
    {% if image.caption %}
        <figcaption class="image__caption">
            {{ image.caption }}
        </figcaption>
    {% endif %}
</figure>
 
{
  "component": {
    "image": {
      "src": "https://picsum.photos/800/650",
      "altText": "placeholder",
      "focalPoint": {
        "x": 0.5,
        "y": 0.5
      },
      "caption": "Caption of image"
    }
  }
}
  • Content: 
    .image
    --width auto
    --height auto
    --captionColor blue500
    --aspect-ratio 16/9
    --border-radius 8px

    &--dark
        --captionColor gray

    width var(--width)
    height var(--height)

    &__picture
        width var(--width)

    &__image
        aspect-ratio var(--aspect-ratio)
        border-radius var(--border-radius)
        height var(--height)
        object-fit cover
        width var(--width)

    &__gallery-image
        height 100%
        width auto

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

    &__caption
        @extends $detail
        color var(--captionColor)
        margin-top 8px
  • URL: /components/raw/image/image.styl
  • Filesystem Path: patterns/partials/image/image.styl
  • Size: 673 Bytes

No notes defined.