SALES & SERVICING COMPONENTS
Sorting Panel
Overview
Sorting Panels contain a list of items, which when selected, display further information, instruction and options in the righthand space. The list at left can be sorted through the filter dropdown at the top of the pane.
Specifications
On load
In the default state, the sorting panel shows a list of unselected items, with a summary/instruction in the righthand space.
Selected
A selected list item displays additional information about it that is hidden on load. The right-hand panel can display a CTA or link to another page.
Row
Row with Card Flip
Title Text: Noto Sans Bold 16px
Title Text Color: #333333
Subheadline Text: Noto Sans Regular 14px
Subheadline Text Color: #333333
Icon Color: #007ABC
Border Color: #D9D9D9
Border Size: 1px
Row with Email, Icon, Link
Headline Text: Noto Sans Bold 16px
Headline Text Color: #333333
Link Text: Noto Sans Regular 14px
Text Color: #007ABC
Icon Color: #007ABC
Avatar Color: #333333
Border Color: #D9D9D9
Border Size: 1px
Row (3 Row)
Row with Email, Icon, Link, Number
Usage Guidelines
Scenario: Long lists
List items within the Panel scroll vertically underneath the pinned dropdown sorting bar.
Scenario: Notes
In this example, the complete selected message displays at the right. Unselected Messages in the list truncate with an ellipsis when character count for the space is exceeded.
