Image

Images use a composable architecture similar to borders. The base class provides consistent display behaviour, and aspect-ratio combo classes control proportions independently.

Base Class

The class turns images into block-level elements with responsive width and cover-fit behaviour.

<img class="img" src="image.jpg" alt="Description">

Property	Value	Purpose
`display`	`block`	Removes inline whitespace gap
`width`	`100%`	Fills container width
`height`	`auto`	Maintains natural aspect ratio
`object-fit`	`cover`	Crops to fill when aspect ratio is forced

Aspect Ratio Combos

Add an aspect-ratio class alongside to enforce proportions. The image will crop to fit using object-fit: cover.

1:1

<img class="img img-1x1" src="image.jpg" alt="Description">

3:2

<img class="img img-3x2" src="image.jpg" alt="Description">

4:3

<img class="img img-4x3" src="image.jpg" alt="Description">

16:9

<img class="img img-16x9" src="image.jpg" alt="Description">

21:9

<img class="img img-21x9" src="image.jpg" alt="Description">

Available Classes

Class	Effect
	Base image — block display, full width, cover fit
	Square (1:1)
	Landscape (3:2)
	Landscape (4:3)
	Widescreen (16:9)
	Ultra-wide (21:9)

Usage with Components

Images compose with component-specific classes. For example, inside a card:

<a class="card card--flush card--interactive" href="#">
  <img class="img img-16x9 card-image" src="image.jpg" alt="Description">
  <div style="padding: var(--card-padding);">
    <h3 class="card-title">Card with image</h3>
    <p class="card-description">Supporting text below the image.</p>
  </div>
</a>

Here provides the base display, sets the aspect ratio, and adds the top border-radius specific to cards.

How Object-Fit Works

When an aspect ratio is applied, the image may not match its natural proportions. object-fit: cover ensures the image always fills the frame, cropping from the centre rather than stretching or letterboxing.

Without aspect ratio — image displays at natural proportions, no cropping
With aspect ratio — image crops to fill the forced proportions

Do Not

Do not use on decorative SVG icons — use instead
Do not hardcode width and height attributes when using — the class manages sizing
Do not combine multiple aspect-ratio classes on one element