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
Dec 15, 2024
v-0.0.2
This component is added to the website. This component is now individually versioned.
Design Checklist
All interactive states - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Accessible use of colours - Colour is not used as the only visual means of conveying information (WCAG 2.1 1.4.1)
Accessible contrast for text - Text has a contrast ratio of at least 4.5:1 for small text and at least 3:1 for large text (WCAG 2.0 1.4.3).
Accessible contrast for UI components - Visual information required to identify components and states (except inactive components) has a contrast ratio of at least 3:1 (WCAG 2.1 1.4.11).
Keyboard interactions - Includes all interactive states that are applicable (hover, down, focus, keyboard focus, disabled).
Screen reader accessible - All content, including headings, labels, and descriptions, is meaningful, concise, contextual and accessible by screen readers.
Responsive for all breakpoints - Responsiveness for 3 breakpoints - Mobile, Tablet and Desktop
Usage guidelines - Includes a list of dos and don'ts that highlight best practices and common mistakes.
Content guidelines - Content standards and usage guidelines for writing and formatting in-product content for the component.
Defined variants and properties - Includes relevant variants and properties (style, size, orientation, optional iconography, decorative elements, selection states, error states, etc.)
Defined behaviours - Guidelines for keyboard navigation and focus, layout management (including wrapping, truncation, and overflow), animations, and user interactions.
Design Kit - Access to the design file for the component in Figma, multiple options, states, colour themes, and platform scales.
Last updated
Was this helpful?