Image

Open in Figma View all renders

Original Image

Default image rendering with no size constraints applied. 

<figure class="img">
    <img src="/images/car.png" alt="Car" />
</figure>

Variations and modifiers

Fixed Width Sizes

Images using predefined fixed width sizes (small, medium, large, xlarge). 

<div class="flex flex-wrap gap-m">
    <figure class="img img--w-small">
        <img src="/images/car.png" alt="Car" />
    </figure>

    <figure class="img img--w-medium">
        <img src="/images/car.png" alt="Car" />
    </figure>

    <figure class="img img--w-large">
        <img src="/images/car.png" alt="Car" />
    </figure>

    <figure class="img img--w-xlarge">
        <img src="/images/car.png" alt="Car" />
    </figure>
</div>

Fixed Height Sizes

Images using predefined fixed height sizes (small, medium, large, xlarge). 

<div class="flex flex--column gap-m">
    <figure class="img img--h-small">
        <img src="/images/car.png" alt="Car" />
    </figure>

    <figure class="img img--h-medium">
        <img src="/images/car.png" alt="Car" />
    </figure>

    <figure class="img img--h-large">
        <img src="/images/car.png" alt="Car" />
    </figure>

    <figure class="img img--h-xlarge">
        <img src="/images/car.png" alt="Car" />
    </figure>
</div>

Full Width Image

An image that spans the full width of its container. 

<figure class="img img--w-full img--h-xlarge" data-fit="cover">
    <img src="/images/car.png" alt="Car" />
</figure>

Aspect Ratios

Images with different aspect ratios (1:1, 3:2, 4:3, 16:9, 21:9). 

<div class="flex flex-wrap gap-m">
    <figure class="img img--h-large" data-ratio="1:1">
        <img src="/images/car.png" alt="Car" />
    </figure>

   <figure class="img img--h-large" data-ratio="3:2">
       <img src="/images/car.png" alt="Car" />
   </figure>

   <figure class="img img--h-large" data-ratio="4:3">
       <img src="/images/car.png" alt="Car" />
   </figure>

    <figure class="img img--h-large" data-ratio="16:9">
       <img src="/images/car.png" alt="Car" />
    </figure>

    <figure class="img img--h-large" data-ratio="21:9">
        <img src="/images/car.png" alt="Car" />
    </figure>
</div>