Patterns

Item picker

The Item Picker is how a user selects the data sources for the report they’re viewing. It is most commonly used to select profiles, but is also used to select campaigns within Paid reports.

Examples

Twitter Profiles
Twitter Profiles

Paid campaigns
Paid Campaigns

Visual best practices

Panel header

  • Font size:
  • Font weight: 600
  • Font color:

List header

  • Font size:
  • Font weight: 600
  • Font color:

List items

  • Font size:
  • Font weight: 400
  • Font color:
  • Avatar size (optional): 20 x 20px

Content best practices

Picker items

  • Profile and campaign names can wrap to multiple lines

Interaction best practices

Selecting

  • Sometimes, such as with Paid reports, selecting a data source is a two-step process. First the user must select an account, which then loads the list of data sources from which they can choose.
  • Data should only be shown for data sources that have been selected. If no data sources are selected, no data should be displayed and the user should be prompted to select one or more. See Data States.

Filtering

  • When there are more than 10 items in a list, a text input is displayed above the list to act as a text filter