Skip to main content

Image Guidelines

The Image component displays images from the SAP Engagement Cloud Design System Image Library. These images are reusable across the product, similarly to icons.

Images are not product-specific — they are meant to be used across the platform in multiple use cases (e.g. empty state illustration in the Illustrated Message component). Product-specific images should be handled and hosted by the product itself.

Compared to icons provided by the Icon component, images are fully-colored SVGs, while icons are in a single-color icon font format. Images in the library can have versions for different themes.

Usage​

Display an image by setting its name and optionally its type. Different images are available for different types. Each image has a small, medium, and large size; the exact sizes depend on the type.

Available types:

  • Logo — small colored images depicting company logos, e.g. SAP Engagement Cloud, Facebook.
  • Illustration — large colored images for use in Illustrated Message and similar contexts, e.g. empty state illustrations.

Use Cases​

  • Colored logos, e.g. SAP Engagement Cloud, Facebook.
  • Illustrated Message graphics, e.g. empty state, error feedback, success state.
  • Generic content type images usable across the platform in Dialog Actions, e.g. email illustration, workflow illustration.

Not suitable for:

  • One-off images used by a single article or piece of content (e.g. a thumbnail in a Release Announcement).
  • Product-specific assets that aren't generic enough for other products to reuse.

Contributing Images​

Product teams are encouraged to contribute reusable image assets to the Image Library. Please get in touch with the Design System Team for details.