Return to Sky UI homepage

Image Placeholder - Overview

View on FigmaView on GitHub
This is a Figma-only component and not relevant for Development.

Purpose

The Image-Placeholder is used to reserve space for media content within a layout or component.

Anatomy

The Image-Placeholder component can be broken down into the following elements -

  1. Image Placeholder
    Placeholders with a fixed aspect ratio.

  2. Ratio lines
    Hidden when Placeholder Info is set to OFF.

  3. Placeholder ratio details
    Hidden when Placeholder Info is set to OFF.

Variants & States

Placeholder Image is available in twelve different ratio sizes -
  • 1:1
  • 4:3
  • 3:2
  • 16:9
  • 21:9
  • 32:9
  • Plus all the above in portrait

For each size ratio, the placeholder information can be turned ON. This allows the user to easily see what aspect ratio the Image-Placeholder is set to.

Placeholder info OFF (Default)
Placeholder info ON