Image

Component

Storybook

Figma Demo

Guidelines

Variations

Aspect ratios allowed include 1:1, 4:3, and 16:9, each in either landscape or portrait orientations. The default fit of the image is to cover the aspect ratio, but the image may also be set to contain the aspect ratio.

Usage

Images will be set to cover by default, which means that the image will keep its original aspect ratio and fills the aspect ratio used in the component. The image will be clipped to fit so some cropping (but not stretching) will occur. There will be no gaps within the image frame.

Images may instead be set to contain, which means that the image will keep its original aspect ratio but will be resized to fit within the aspect ratio of the component. No clipping (or stretching) will occur, but there may be gaps within the image frame.

In some cases, one may need to provide an ‘innerClass’ to ensure that a class is applied directly to the img element within the Image component. Regular additional classes passed through the ‘class’ prop are applied to the Image component’s picture element wrapper.

Accessibility

Images should have alt text that accurately describes the image so that visually impaired users have as much context as possible.

Component Specs

API

• alt: string | Required
  The alt text for the image.
• aspectRatio: 'square' | 'default' | 'wide' | Default: 'default'
  The aspect ratio of the image.
• class: string | Default: undefined
• fit: 'default' | 'contain' | Default: 'default'
  The fit of the image.
• height: string | number | Default: undefined
• innerClass: string | Default: undefined
• portrait: boolean | Default: false
  If true, the image will be displayed in portrait mode.
• src: string | Required
• width: string | number | Default: undefined

Example

<script>
	import { Image } from '@getprovi/craft-svelte';
</script>

<Image src="link to image" alt="Image description" aspectRatio="wide" width={240} />
<Image src="link to image" alt="Image description" aspectRatio="wide" width={240} portrait>
	<source srcset="link to images" type="image/webp" />
</Image>
<Image src="link to image" alt="Image description" aspectRatio="wide" width={240} fit="contain" />

Types

interface Props {
	alt: string;
	aspectRatio?: 'square' | 'default' | 'wide';
	class?: string;
	fit?: 'default' | 'contain';
	height?: string | number;
	innerClass?: string;
	portrait?: boolean;
	src: string;
	width?: string | number;
}