Components

Filter

Last updated: September 2019

Used to change specific content in a view.


Component styling

    The filter type label text at the top is Proxima Nova Condensed, 10 Grey Darken 2

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

    Filter is our Tertiary Button style, 32 tall. For Android, the text is not All Caps, but still bold

    Each selection item is 40 tall with a 1 Grey Lighten 2 border

    Selection text is Proxima Nova regular, 14link color with link color tick to the right of the selected item

    Dropdown background should be white with card shadow properties

    Spacing

      The filter component has 4 between the label and text selection and 4 between the selection text and the dropdown arrow

      The filter dropdown has 16 between the left edge and start of the border line as well as the tick and right edge

      The filter component should have 8 all around. The dropdown is the same spacing as Web.