Skip to content

Components / Message

Message

A group of messages is meant to form a conversation. The way that conversations are represented inside of apps, regardless of platform, should be consistent.

4 hr ago
Bobby Erickson

This is the content of a message.

4 hr ago
Allison Roberts

This is the content of a message that happens to be a note.

Structure

Elements

Inner

The inner part of the message contains the guts of your message: the heading, date, and content.

Heading

The header should include an avatar and the sender’s name as part of a title.

Do
If you use an avatar in the heading, be sure to push the message body to align it to the start of the message title.

Title

The title inherits the heading-4 style along with the modified color if the message is a note.

Date

The date is floated to the right edge of the message in a muted color.

Do
Use a human-friendly date, like the time since something occurred, if it was within minutes or hours.

Variations

Note

Note messages modify the appearance of the message to differentiate it from others. A typical conversation has two-way messages but can also have internal or private notes.

The title and date in the content inherit alternative text colors to match the note in appearance.

Spacing

Do
Provide consistent spacing when including multiple messages.
© 2020 Jack Henry & Associates, Inc. Trademark notice
Version 2.0.0-beta.5.1. Last updated December 16, 2020.