Used to view information in a specific order.
Sorting can either be a One Way sort (user is only allowed to choose an option which has a set default of Ascending or Descending) or Two Way sort (user can switch between Ascending or Descending).
The label text at the top will always say ‘SORT BY’ and is Proxima Nova Condensed,
10 Grey Darken 2
The sort component has
4 between the label and text selection and
4 between the selection text and the dropdown arrow
The sort dropdown has
16 between the left edge and start of the border line as well as the tick or arrow and right edge
8 all around and
4 between the arrow indicator and the text. Dropdown is the same spacing as Web.
The sort selection will be prefaced by copy indicating whether it’s ascending or descending (Ex: Most vs Least, Highest vs Lowest, Best vs Worst)