Images

The .image class activates a set of modifiers that control how an image scales and appears. Apply .image directly to an <img> element and combine it with the modifiers below.

Responsive images

Adding .fluid makes an image scale with its container by applying max-width: 100% and height: auto, so it never exceeds its natural width.

<img src="..." class="image fluid" alt="...">

Thumbnails

Adding .thumbnail frames an image with a border, padding, border-radius, and a box shadow — all controlled by the thumbnail Sass variables. Border-radius utilities can further adjust the rounding. The modifier also makes the image fluid.

<img src="..." class="image thumbnail" alt="...">

Aligning images

Align images with the float utilities or text alignment utilities. Block-level images can be centered with the .mx-auto margin utility.

<img src="..." class="rounded float-start" alt="...">
<img src="..." class="rounded float-end" alt="...">

<img src="..." class="rounded mx-auto d-block" alt="...">

<div class="text-center">
<img src="..." class="rounded" alt="...">
</div>

Picture element

When using <picture> to specify multiple <source> alternatives, apply .image modifier classes to the inner <img>, not to the <picture> wrapper.

<picture>
  <source srcset="..." type="image/svg+xml">
  <img src="..." class="image fluid thumbnail" alt="...">
</picture>

CSS

The Image component can be customized through Sass variables at compile time.

Custom properties

The Image component exposes CSS custom properties to control its appearance at runtime.

--cx-thumbnail-padding: 0.25rem;
--cx-thumbnail-bg-color: var(--cx-bg-main);
--cx-thumbnail-border-width: var(--cx-border-width-medium);
--cx-thumbnail-border-style: solid;
--cx-thumbnail-border-color: var(--cx-border-subtle);
--cx-thumbnail-border-radius: var(--cx-border-radius-medium);
--cx-thumbnail-box-shadow: var(--cx-box-shadow-small);

Sass variables

The Image component uses Sass variables in scss/config/_defaults.scss to define its defaults.

$thumbnail-padding:           .25rem;
$thumbnail-bg-color:          var(--bg-main);
$thumbnail-border-width:      var(--border-width-medium);
$thumbnail-border-style:      solid;
$thumbnail-border-color:      var(--border-subtle);
$thumbnail-border-radius:     var(--border-radius-medium);
$thumbnail-box-shadow:        var(--box-shadow-small);