Image Guidelines

The Image Component displays an image from the Emarsys Design System Image Library. These images are reusable across the product, similarly to icons.

These images are not product-specific, and 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 our library can have versions for different themes.

Usage

You can display an image by defining its name and type. Different images are available for different types. Each image has a small, medium, and large size, which depends on the type.

The Image Component can display an image by name and type. Different images are available for different types (e.g. logos, illustrations). Each image has a small, medium, and large size. The exact sizes depend on the type.

Available types:

• Logo: small colored images that depict company logos, e.g. Emarsys, Facebook.
• Illustration: Large colored images that depict common situations to be used in Illustrated Message and similar contexts, e.g. empty state illustration.

Use-Cases

• Colored logos, e.g. Emarsys, Facebook.
• Illustrated Message graphics, e.g. empty state, error feedback. success state.
• Generic content types which can be used across the platform in Dialog Actions, e.g. email illustration, workflow illustration.

Image:

• One-off images which can only be used by a single article or piece of content, like a thumbnail or cover image used in a Release Announcement.
• Product-specific assets which couldn't be used elsewhere, because it's not generic enough for other products to use.

Contributing Images

We encourage product teams to contribute image assets which could be used across the product to our Image Library! Please get in touch with the Design System Team for details.