Skip to main content

Image

Image, with a standard or a custom aspect ratio.

Props​

  • src (string): src HTML attribute to set to the element.
  • alt (string): alt HTML attribute to set to the element.
  • ratio (string): Aspect ratio to apply to the image.
  • [OPTIONAL] id (string): id HTML attribute to set to the element.
  • [OPTIONAL] lazy (boolean): lazy HTML attribute to set to the element.
  • [OPTIONAL] modifiers (string): List of modifiers to apply to the element. Defaults to "".
  • [OPTIONAL] itemProp (string): itemprop HTML attribute to set to the element.

Syntax - square ratio​

<UIImage
  id="my-id"
  alt="illustration"
  src="/src/image.jpg"
  ratio="square"
  modifiers="large"
  itemProp="illustration"
/>

Syntax - portrait ratio​

<UIImage
  alt="illustration"
  src="/src/image.jpg"
  ratio="portrait"
/>

Syntax - landscape ratio​

<UIImage
  alt="illustration"
  src="/src/image.jpg"
  ratio="landscape"
/>

Syntax - panoramic ratio​

<UIImage
  alt="illustration"
  src="/src/image.jpg"
  ratio="panoramic"
/>

Syntax - no lazy​

<UIImage
  alt="illustration"
  src="/src/image.jpg"
  ratio="panoramic"
  lazy={false}
/>

Syntax - custom ratio​

<UIImage
  alt="illustration"
  src="/src/image.jpg"
  ratio="256x525"
/>