Image

View on GitHub

import { Image } from '@sky-uk/ui-core';

Select background colour

<Image
    src="https://placehold.co/640x320"
    alt="Example Image"
    $borderRadius={2}
    $margin={6}
    $maxWidth="640px"
    $width="100%"
/>

<Image
    src="https://placehold.co/640x320"
    alt="Example Image"
    $borderRadius={2}
    $margin={6}
    $maxWidth="640px"
    $width="100%"
/>

Props

Focal Point

You can specify a focal point for the image by passing x and y coordinates to the focalPoint prop. This will apply the object-fit:cover styles automatically.

$focalPoint supports values 0 - 24 and any values outside of that range will be capped.

Select background colour

<Image
  src="https://placehold.co/640x320"
  alt="Example Image"
  $focalPoint={[24, 24]}
  $height="320px"
  $margin={1}
  $maxWidth="320px"
  $width="100%"
/>

<Image
  src="https://placehold.co/640x320"
  alt="Example Image"
  $focalPoint={[24, 24]}
  $height="320px"
  $margin={1}
  $maxWidth="320px"
  $width="100%"
/>

System Modifiers

The Image component supports the props applied using the following system modifiers: