BUX Component Development Platform

image: With Caption 

<figure>

    <img class="bux-image " src="/images/placeholders/bux-image-placeholder-4-3.png" alt="Image placeholder with caption" />

    <figcaption class="bux-image-caption">
        <div class="bux-image-caption__text">
            Lorem ipsum dolor sit amet lorem ipsum dolar amet, consectetur adipiscing elit. Vivamus in lectus lorem. Lorem ipsum dolor sit amet, consectetur amet lorem ipsum dolar amet lorem ipsum dolar.
            (Jo McCulty)
        </div>
    </figcaption>
</figure>
 
{# 

Image

Available variables:

- class:                List of optional classes for the image.
- image_url:            URL for the image.
- image_alt_text:       String for the image alt text.
- caption:              Boolean. Set to true to enable caption.
- caption_text:         String for the caption text.
- caption_attribution:  String for the caption attribution.

#}

{% if caption %}
<figure>
{% endif %}

<img class="bux-image {{ class }}" src="{{ image_url }}" alt="{{ image_alt_text }}" />

{% if caption %}
<figcaption class="bux-image-caption">
	<div class="bux-image-caption__text">
		{{ caption_text }}
		{% if caption_attribution %}
		    ({{ caption_attribution }})
		{% endif %}
	</div>
</figcaption>
</figure>
{% endif %}
 
site_name_prefix: Office of
site_name: Learning Relations Excellence
site_slogan: Additional text or site slogan
address_1: 100 Building Name
address_2: 1 Oval Mall
city: Columbus
state: OH
zip: '43210'
contact_email: email@osu.edu
contact_phone: 614-292-OHIO
contact_tty: 614-688-8605
image_url: /images/placeholders/bux-image-placeholder-4-3.png
caption: true
caption_text: >-
  Lorem ipsum dolor sit amet lorem ipsum dolar amet, consectetur adipiscing
  elit. Vivamus in lectus lorem. Lorem ipsum dolor sit amet, consectetur amet
  lorem ipsum dolar amet lorem ipsum dolar.
caption_attribution: Jo McCulty
image_alt_text: Image placeholder with caption
  • Content: 
    .bux-image {
    display: block;
    width: 100%;

    &__float-left {
        float: left;
        margin-right: $sp-32;
    }

    &__float-right {
        float: right;
        margin-left: $sp-32;
    }

    &--16x9 {
        aspect-ratio: 16/9;
        width: 100%;
        object-fit: cover;
    }
    &--1x1 {
        aspect-ratio: 1/1;
        width: 100%;
        object-fit: cover;
    }
    &--3x2 {
        aspect-ratio: 3/2;
        width: 100%;
        object-fit: cover;
    }
}

.bux-image-caption {
    border-bottom: 2px solid $gray-light-80;
    margin-bottom: $sp-32;
}

.bux-image-caption__text {
    font-family: $sans;
    font-size: 14px;
    line-height: 18px;
    margin: $sp-8 0 10px;
}
  • URL: /components/raw/image/_image.scss
  • Filesystem Path: src/components/image/_image.scss
  • Size: 714 Bytes

No notes defined.