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.
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.
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.
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.