Information Control

Last edit: 2023.08.07

Information Control is a control composed of different elements (e.g., text, icons, etc.) to present various types of information in a view.

The control is primarily used as a list item and appears in different places across the system, like lists, contacts, etc.

Anatomy

anatomy
  1. Container: The background of the Information Control. It includes a background color property.
  2. Head section: This section is used to provide more context with a visual cue and creates a more delightful experience. It features the main graphic element (image or icon) of the Information Control.
  3. Main section: This section is used to display data. It features multiple text fields and a rating bar.
  4. Tail section: This section is used for additional elements (icon or label) to provide more context or emphasize the action.

Head section

The head section can be configured to one of the four predefined graphics styles:

  • Artwork: Squarish image used primarily for media artworks.
  • Avatar: Circular image mainly used for avatars (for example, contacts).
  • Icon: Icon that is always tinted with the color of the primary text line.
  • Default: Icon that is shown as the original given asset.
anatomy head section

Main section

The main section can display up to three text lines and a rating bar as the last row. Each text line can be a multiline and optionally feature an icon which, for example, can be used to emphasize the source of data shown. The rating bar features five icons by default (which can be configured), and a dedicated label to indicate the rating provider.

anatomy main section

Tail section

The tail section supports different configurations of the label and icon. They can be used to display extra information (for example, distance, unit), emphasize an action (for example, "next →") or indicate the source of the shown data (for example, brand logo).

Usage

usage example1 thumbnail

Playlist view in Entertainment

"Napping Entertainment" currently playing media item and a list of playlist songs.

usage example2 thumbnail

Incoming message notification

Notification header and "Driving. Talk to you later!" quick reply.

Customization

TypeCustomizable
ThemingThe graphics, text, margins, and padding sizing can be adjusted. Additionally, changing the styling of the container, text, tintable icons, and rating bar is possible.
ConfigurationsDifferent combinations of available sections (head, main, and tail) are supported.
ContentThe labels can be changed and assets can be replaced (unless coming from a third-party service).