Sort

Components

Last updated: September 2019

Used to view information in a specific order.

Options

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).

    Arrow direction points upwards and sorts Low to High
    Arrow direction points downwards and sorts High to Low

    Component Styling

      The label text at the top will always say ‘SORT BY’ and is Proxima Nova Condensed, 10 Grey Darken 2

      The selection text is Proxima Nova regular, 14 link color with link color arrow to the right of the selection text.

      Sort is our Tertiary Button style, 32 tall with link color ascending or descending arrow in front of the text. For Android, the text is not All Caps, but still bold.
        Uses link color tick for selection
        Uses ascending or descending arrow for selection

        Spacing

          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

          The sort component should have 8 all around and 4 between the arrow indicator and the text. Dropdown is the same spacing as Web.

          Language

          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)

          Do

          Use copy preface in component

          Don't

          Use copy preface in dropdown