Filter Card
Design System - Filter Card component
The Filter Card component is a layout container designed to offer users an intuitive and accessible way to narrow down data or results based on specified parameters.
// Sample code
<CheckBox
label="Label"
onChange={(e)=>{console.log(e.target.checked}}
/>Anatomy
Variants
Horizontal
Ideal for wider layouts or desktop/tablet views where filters are applied inline at the top of a table or section. Promotes quick scanning and efficient space usage.
Vertical This layout presents filters in a stacked format, enabling a more comfortable interaction on narrow viewports or where field variety is high.
Properties
Header Icon A visual cue precedes the heading for easy recognition and visual alignment with DIGIT’s iconography standards..
Close Button Offers the ability to optionally include a close/dismiss icon for the card, especially useful when it’s implemented as an overlay or drawer.
Property Configuration Table
Each design component offers a range of configurable options. These options are intentionally platform-agnostic, allowing implementations to adapt and tailor them to align with the specific requirements of the chosen framework.
wrapperClassName
text
-
headerContentClassName
text
-
caption
yes/no
no
captionClassName
yes/no
no
header
number
-
headerClasName
yes/no
no
subHeader
yes/no
no
subHeaderClasName
yes/no
no
body
yes/no
no
bodyClasName
number
no
style
yes/no
-no
Usage Guide
Match layout to context
Use the horizontal variant for desktop/table views and vertical for mobile or sidebar layouts. Avoid forcing a vertical layout into a constrained width or a horizontal one in mobile viewports.
Change log
Design Checklist
All interactive states
Accessible use of colours
Accessible contrast for text
Accessible contrast for UI components
Keyboard interactions
Last updated
Was this helpful?