Components

Message

HealthyView on GitHub

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.

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.

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.

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.

States

Focus

Hover

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

Selected