Skip to content

Components / List

List

Your app wouldn’t be complete if you didn’t have a couple of lists thrown in there. Use lists for displaying small menus or contextual information about a subject contained in a card.

Structure

Elements

  1. List
  2. List item
  3. List item content
Do
Lists should include spacing in between the bottom of the list and other elements.

Variations

Borderless

Borderless lists remove the list item dividers for a cleaner look. This is useful in sidebars where you have a fairly limited number of items to parse through.

Behavior

Active state

When a list item is triggered, it should include an active state.

Don't
Don't set multiple list items active at the same time.

Style

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

Inspect component

Breakpoints

Wide

Narrow

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
bodyTextThemeColor

Themed text that matches the institution's branding; matches the link button text colors, but lacks the button's various interactive state properties

#2A73A8FF
dividerDefaultColor

Default fill for dividers in the app

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