Infa.ai
Wise Design SystemComponents
Components
Date input
A date input lets people enter a date within a form.
Date picker
Use date picker to let users pick a date from a calendar.
Divider
Dividers are used to create stronger hierarchy between contents, sub-section, and sections.
Dropdown
A dropdown (sometimes called a select) lets users choose a single item from a dropdown list.
Instruction
Instructions are a list of bullet points marked as positive and negative.
Instructions Modal
A modal is an overlay that interrupts the user’s task to show an important message, disabling the rest of the screen.
Account Modal Money input
Money input lets users enter an amount in a currency of their choice or validate a prefilled currency.
Currency Amount Input Navigation option
A navigation option gives users a rich way to choose between options and navigate to another screen or step in a flow. Navigation options are presented in a list or as tiles (tiles are web only).
Account Navigation Tiles 
Account Navigation Options 
Topic Tiles 
Rate Updates Navigation Option 
Add currency Tile 
Navigation Tiles 
Cash Insight 
USD Balance Nudge
A nudge directs users to take an action on something that might be relevant at the time they see it.
Nudge Cards Password input
Lets users enter their password as part of a login or authentication process.
Change Password Popover
A popover is a short, floating message that gives the user some non-critical, extra context.
Wisetag Popover Progress bar
The Progress bar informs the user that the system needs time to load content. If you are on web please refer to screen loader guidance page.
Progress Spinner
Progress spinner provides reassurance to users that the app hasn’t crashed when they are executing lengthy and/or stressful tasks.
Promo card
A promo card is used to promote products and features.
Promo Card Radio
A radio lets users select a single item from a mutually exclusive list.
Screen loader
A screen loader is a temporary indicator to tell the user that a screen is loading. Once it’s finished, the loader is replaced by the screen. If on mobile please refer to the progress bar guidance page.
Search input
A search input allows users to look for information from a wide set of possible results.
Transactions Search 
Help Search 
Search Recipient Section header
A section header divides sections of a screen.
Group Section Headers 
Transactions Section Header 
Page Header to discuss 
Account Details Section Header Segmented control
A segmented control allows users to update views of content and select between 2-3 alike options.
Select
A select lets a user pick an option from a long list of options — typically 6 or more.
Statement Input Groups Snackbar
A snackbar is a brief, temporary notification that confirms the outcome of an action or process that’s just happened.
Summary
A summary summarises instructions, tasks, or benefits in a list.
Switch
A switch lets the user toggle an individual setting on or off.
Switches Table
Tables allow users to review large amounts of sequential information at a glance.
Tabs
Tabs organise content into sections that users can alternate between.
Text area
A text area is a field that lets users enter several lines of text.
Text input
A text input lets users enter a single line of text.
Share your link Upload
Upload lets users upload a single file when uploading is the primary purpose of the screen.
Upload input
An upload input lets users upload a single file, or multiple files, within a form.
Empty state pattern
Empty state patterns are used inside of pages to denote when there is "nothing" to display.
No Referrals 
No transactions placeholder to discuss 
No transactions Copy Block
The copy block is used to explain our features, benefits or service offering to our users.
No Debit Card Icon Button
An icon button lets the user perform an action with a tap or a click.
Secondary Icon Button Chip
Chips allow users to filter content or make a choice from a set of options within a compact area.
Date Chips Circular button
A circular button lets the user perform an action with a tap or a click.
Account Icon Buttons Alert
An alert gives users an important message about their current task within the context of a screen.
Tip Alerts to Discuss 
Change Password Alert 
Full width alert Avatar
An avatar is a representation of a unique entity — like a person, a business, or an object. It can contain initials, images, icons, or flags.
Balance Details Avatar Bottom sheet
A bottom sheet is a container you can use to display supporting content or a short, supplementary task on mobile experiences.
Button
A button lets the user perform an action with a tap or a click.
Copy Secondary Button 
Share Button 
How to button 
NP Buttons 
NP Buttons 
NP Send Button 
Log Out Button 
Add recipient 
Add recipient button 
Card
Card is a container that groups related content.
Balance Details Card 
Account Widget Card Checkbox
Checkboxes let users select zero, one, or multiple items from a list.
Statement Checkbox Compact Date Input
A compact date input lets people enter a short date within a form.
Critical Banner
A critical banner tells the user that they need to either unblock their account, or stop it from being blocked or closed.
