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. ๐ŸŽ
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. ๐ŸŽ
by Nate Sanders

Compact

The โ€œCompactโ€ 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.

2 minutes ago

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.

Come in today and find last minute gifts for every coffee lover on your list. ๐ŸŽ
by Nate Sanders

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. ๐ŸŽ
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. ๐ŸŽ
by Nate Sanders

Selected

Come in today and find last minute gifts for every coffee lover on your list. ๐ŸŽ
+3