Components

Message

Messages are how we display user generated content provided by our network partners in app.

Anatomy

Message sizes

Our message is available in three sizes. Our users have different preferences for how they want their content to appear in different areas of the app and for different tasks they are trying to accomplish.

Large

The “Large” option provides users with a message bubble very similar to what they are used to on the respective platform.

2 minutes ago

Come in today and find last minute gifts for every coffee lover on your list. 🎁

Nathan Sanders

by Nate Sanders

Small

The “Small” message size reduces the size of the message media significantly providing a smaller message than the large option. This option is great for quick scanning while still allowing for many messages on screen at once.

2 minutes ago

Come in today and find last minute gifts for every coffee lover on your list. 🎁

Nathan Sanders

by Nate Sanders

Condensed

The “Condensed” message size hides all media behind a small thumbnail to reduce the vertical size of message bubbles. This is great for users that want to see as many messages on screen as possible.

2 minutes ago

Come in today and find last minute gifts for every coffee lover on your list. 🎁

+3

Structure

Messages are modular to accommodate different platforms, message types, and use cases. All messages require at least:

Header

The message header contains information about the message like platform, profile, and timestamp. The right side of the message header is reserved for the bulk select checkbox where bulk selection is available.

Body

The message body contains the content of the message. This includes but is not limited to: attachments, images, videos, text, emoji, links and more.

Footer

The message footer is reserved for message actions and, in some cases, stats when available.

Composition

Messages are modular, flexible and able to accommodate your future needs.

Message Header

Inserting new sections for your specific needs is easy!

Message Body

Always communicate your additions and updates with other squads.

Message Footer

States

Focus

2 minutes ago

Come in today and find last minute gifts for every coffee lover on your list. 🎁

Nathan Sanders

by Nate Sanders

Hover

Hover the different parts of the message to see the it's hover states.

Come in today and find last minute gifts for every coffee lover on your list. 🎁

Nathan Sanders

by Nate Sanders

Selected

Come in today and find last minute gifts for every coffee lover on your list. 🎁

+3