Thumbnails

Short intro to component

Known issues
Show details
Known issues
Published: February 21, 2024
Updated: February 21, 2024

Overview

Thumbnails provide users with a preview of the underlying content and medium of a particular item. Their placement helps dictate the size that should be used, for example, within a Takeover, would use a large thumbnail, whereas in a Table List, a smaller thumbnail is used and in a Table Grid, a medium thumbnail is used.

Design

Variants and sizes

Sizes

  • Large: used on cards
  • Medium: used in tables
  • Small: within drag items/compact UI

 

Empty state

Empty state thumbnails are used as a fallback when a campaign doesn’t have a template design applied.

Large

Large

Medium

Medium

Thumbnail / Small / Channel=Empty

Thumbnail / Small / Channel=Empty

 

Email

Email template thumbnails are displayed in table and grid views. They are cropped to display the top portion of the email design.

Large

Large

Medium

Medium

Small

Small

 

In-app

In-app template thumbnails are displayed in table and grid views. They are cropped to display the top portion of the in-app design on tables, and centered on card previews.

Large

Large

Medium

Medium

Small

Small

 

SMS

SMS template thumbnails are displayed in table and grid views. They are cropped to display a preview of the push message, and replaced with an icon at small and medium sizes.

Large

Large

Medium

Medium

Small

Small

 

Push

Push template thumbnails are displayed in table and grid views. They are cropped to display a preview of the push message, and replaced with an icon at small and medium sizes.

Large

Large

Medium

Medium

Small

Small

 

Web push

Web Push template thumbnails are displayed in table and grid views. They are cropped to display a preview of the push message, and replaced with an icon at small and medium sizes.

Large

Large

Medium

Medium

Small

Small

 

Embedded message placements

🔴 Flex Message Placement Preview / Placement=Default

🔴 Flex Message Placement Preview / Placement=Default

🔴 Flex Message Placement Preview / Placement=Left

🔴 Flex Message Placement Preview / Placement=Left

🔴 Flex Message Placement Preview / Placement=Right

🔴 Flex Message Placement Preview / Placement=Right

🔴 Flex Message Placement Preview / Placement=Cropped Left

🔴 Flex Message Placement Preview / Placement=Cropped Left

🔴 Flex Message Placement Preview / Placement=Cropped Right

🔴 Flex Message Placement Preview / Placement=Cropped Right

🔴 Flex Message Placement Preview / Placement=Background

🔴 Flex Message Placement Preview / Placement=Background

 

Embedded message icons

Top

Top

No Thumbnail

No Thumbnail

Thumbnail background

Thumbnail background

Cropped left

Cropped left

Cropped right

Cropped right

Left

Left

Right

Right

Top

Top

No thumbnail

No thumbnail

Thumbnail background

Thumbnail background

Cropped left

Cropped left

Cropped right

Cropped right

Left

Left

Right

Right

Guidelines

Guidelines coming soon.

 

 

Health

Is documented

The component is fully documented

Accessibile

Tested against WCAG 2.1 AAA accessibility guidelines

Tokens

This component uses tokens in both Figma and code

Figma component

Includes a link to a Figma component that has been imported to Supernova

Storybook

Includes a link to an external code repository

-

Status

The component has a health status indicated

Known issues