FZUI!
Colour Pallete
Colors
red
yellow
blue
green
brown
purple
Grayscales
Buttons
Colours
Default
Red
Yellow
Blue
Green
Brown
Purple
Outlines
Default
Red
Yellow
Blue
Green
Brown
Purple
Sizes
Mini
Small
Default
Large
Mega
Outlines Sizes
Mini
Small
Default
Large
Mega
Dropdown
Dropdown
Hello!
Red
Some Item
Another Item
Purple
Some Item
Another Item
Item should align to right"
Clickable DIV
This is supposed to be a padded dropdown.
Dropdown
Hello!
Red
Some Item
Another Item
Purple
Some Item
Another Item
Item should align to right"
Clickable DIV
This is supposed to be a padded dropup.
Button Groups
First
Second
Third
Nested
Test
Another Test
Let's go!
First Link
Second Link
Third Link
Nested
Test
Another Test
Let's go!
Another right aligned
Sizes
Mini
First
Second
Third
Fourth
Small
First
Second
Third
Fourth
Normal
First
Second
Third
Fourth
Large
First
Second
Third
Fourth
Mega
First
Second
Third
Fourth
Tabs and Pills
One
Two
Three
Contents of tab #1
Contents of tab #2
Contents of tab #3
One
Two
Three
Modals
Show Modal
This is expected to contain some modal content.
Show Another Modal
Show Modal
This is expected to contain some modal content with a title.
Forms
Inline Layout
Text
A sample text field. Trying to make this description field so long it might try to wrap.
Password
Passwords must contain numbers and letters
Choose a strong password
Do not use your phone number or date of birth
Selection
Option 1
Option 2
Option 3
Error
Password fails all the password rules.
Can you try a different password.
An errored field
Warning
A warning.
What do you have to say?
Success
Seems everything worked well
Residential Area
Some content please?
Personal Information
Firstname
A sample text field
Lastname
A sample text field
Food?
Burgers and Chips
Pizza and Coke
Tacos
Take Out?
Custom Input Wrapper
Some generic html inputs can be put inside this wrapper
Multiple Elements
Bank
Bank 1
Bank 2
Bank 3
Branch
Branch 1
Branch 2
Branch 3
Number
Bank
Bank 1
Bank 2
Bank 3
Branch
Branch 1
Branch 2
Branch 3
Number
Ooops! something went wrong
Grid Layout
Text
A sample text field. Trying to make this description field so long it might try to wrap.
Password
Passwords must contain numbers and letters
Choose a strong password
Do not use your phone number or date of birth
Selection
Option 1
Option 2
Option 3
Error
Password fails all the password rules.
Can you try a different password.
An errored field
Warning
A warning.
What do you have to say?
Success
Seems everything worked well
Residential Area
Some content please?
Personal Information
Firstname
A sample text field
Lastname
A sample text field
Food?
Burgers and Chips
Pizza and Coke
Tacos
Take Out?
Custom Input Wrapper
Some generic html inputs can be put inside this wrapper
Multiple Elements
Bank
Bank 1
Bank 2
Bank 3
Branch
Branch 1
Branch 2
Branch 3
Number
Bank
Bank 1
Bank 2
Bank 3
Branch
Branch 1
Branch 2
Branch 3
Number
Ooops! something went wrong