University of Florida College of the Arts Pattern Library

Image: Left Aligned 

<div data-cy-block="image-block" class="image-block image-block--align-left">
    <figure class="image-block__figure image-block--with-caption">
        <img class="image-block__image" loading="lazy" type="image/webp" src="https://placekitten.com/1000/750" alt="friendly kitten">
        <figcaption class="image-block__caption">
            This is a caption with <strong>bold</strong>, <em>italic</em> and <a href="#">link</a>.
        </figcaption>
    </figure>
</div>
 
<div data-cy-block="image-block" class="image-block {{ image.align ? 'image-block--align-' ~ image.align : 'image-block__align-full'}}">
    <figure class="image-block__figure {{ image.caption ? 'image-block--with-caption' : '' }}">
		<img
			class="image-block__image"
			loading="lazy"
			type="image/webp"
			src="{{ image.src | resize(848) | towebp }}"
			alt="{{ image.alt ?: '' }}"
		>
        {% if image.caption %}
            <figcaption class="image-block__caption">
                {{ image.caption }}
            </figcaption>
        {% endif %}
    </figure>
</div>
 
{
  "image": {
    "src": "https://placekitten.com/1000/750",
    "alt": "friendly kitten",
    "caption": "This is a caption with <strong>bold</strong>, <em>italic</em> and <a href=\"#\">link</a>.",
    "align": "left",
    "width": "320",
    "height": "228"
  }
}
  • Content: 
    .image-block
    z-index 1

    &__image
        width 100%
        border-radius 8px
        height auto


    &--align-full
        margin-bottom 32px
        margin-top 32px
        width 100%

    &__caption
        @extends $detail
        color blue500
        margin-top 8px
		
@container (min-width: 600px)
    .image-block--align-right
        float right
        margin-bottom 20px
        margin-left 20px
        width 50%

    .image-block--align-left
        float left
        margin-bottom 20px
        margin-right 20px
        width 50%
  • URL: /components/raw/image/image.styl
  • Filesystem Path: patterns/blocks/image/image.styl
  • Size: 555 Bytes

No notes defined.