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.

Structure

Elements

  1. Container
  2. Avatar
  3. Content
  4. Name
  5. Timestamp
Do
Provide consistent spacing when including multiple messages.

Style

Style specifications are available to inspect via Abstract. The following link will take you to their web-based interface.

Inspect component

Theming

The following table lists the theme properties used to style this component and any variations as well as a sample value.

A full list of properties used within the design system—as well as general usage guidelines—is available on the Theme properties page.

Examples of each theme property may be referenced by clicking a property name in the “property” column.

Sample Property Sample value
bodyTextPrimaryColor

Dark text color used for primary content in layouts

#071523FF
bodyTextSecondaryColor

Medium dark text color used for secondary or muted content in layouts

#64707DFF
primaryThemeBackgroundColor

The primary theme pairing; was more commonly used, but now has a limited use for first tally chips and login icons

#2A73A8FF
primaryThemeTextColor

Text guaranteed to contrast on the primary theme background

#FFFFFFFF
secondaryContentBackgroundColor

#DEE4ECFF
© 2021 Jack Henry & Associates, Inc. Trademark notice
Version 0.7.0. Last updated March 23, 2021.