Placeholders

Placeholders can be used to replace missing content or denote areas left intentionally blank.

Examples of possible use cases for placeholders:

  • In place of a missing image for example in a search listing blog posts, news items, or events.
  • As a default image preview for a user uploaded image.

Usage

Default HDS placeholders include image placeholders and user image placeholders for different sizes.

  • Always use the image size closest to your needs. The size of the placeholder icon has been optimised to the image size.
  • Do not scale images larger. If you need a size between available sizes, choose the next largest image file.
  • You can crop the images to suit your aspect ratio.

Image placeholders

Different sizes of image placeholders are available.

You can download the image placeholder package (a .zip file), or just specific image files by clicking images in the table below and saving them.

Table 1: Image placeholders
ImageSizeDimensionsScalePixel sizeUsage
Open placeholder image Small
Small200 x 150 dp200 x 150 pxImage thumbnail
Open placeholder image Small @2x scale
Small200 x 150 dp@2x400 x 400 pxImage thumbnail
Open placeholder image Small @3x scale
Small200 x 150 dp@3x600 x 450 pxImage thumbnail
Open placeholder image Medium
Medium300 x 200 dp300 x 200 px
Open placeholder image Medium @2x scale
Medium300 x 200 dp@2x600 x 400 px
Open placeholder image Medium @3x scale
Medium300 x 200 dp@3x900 x 600 px
Open placeholder image Large
Large600 x 400 dp600 x 400 px
Open placeholder image Large @2x scale
Large600 x 400 dp@2x1200 x 800 px
Open placeholder image Large @3x scale
Large600 x 400 dp@3x1800 x 1200 px
Open placeholder image Extra large
Extra large1200 x 800 dp1200 x 800 px
Open placeholder image Extra large @2x scale
Extra large1200 x 800 dp@2x2400 x 1600 px
Open placeholder image Extra large @3x scale
Extra large1200 x 800 dp@3x3600 x 2400 px

User image placeholders

User image placeholders are used only for replacing missing user profile images.

You can download the user image placeholder package (a .zip file), or just specific image files by clicking images in the table below and saving them.

Table 2: User image placeholders
ImageSizeDimensionsScalePixel size
Open placeholder user image Small
Small42 x 42 dp42 x 42 px
Open placeholder user image Small @2x scale
Small42 x 42 dp@2x84 x 84 px
Open placeholder user image Small @3x scale
Small42 x 42 dp@3x126 x 126 px
Open placeholder user image Medium
Medium96 x 96 dp96 x 96 px
Open placeholder user image Medium @2x scale
Medium96 x 96 dp@2x192 x 192 px
Open placeholder user image Medium @3x scale
Medium96 x 96 dp@3x288 x 288 px
Open placeholder user image Large
Large128 x 128 dp128 x 128 px
Open placeholder user image Large @2x scale
Large128 x 128 dp@2x256 x 256 px
Open placeholder user image Large @3x scale
Large128 x 128 dp@3x384 x 384 px