BUX Component Development Platform

image: 3 By 2 

<img class="bux-image " src="/images/placeholders/bux-image-placeholder-3-2.png" alt="3:2 image placeholder" />
 
{# 

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-3-2.png
image_alt_text: 3:2 image placeholder
  • 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.