Introduction
Ready to use
Components are rady to use, drag and drop each component to your artboard and boom!
Editable
You can simply edit the component content. first ungroup it, then group it again and start editing
All the sizes
All of the components come with each size introduced in the guidelines and you don't need to resize them.
Libraries
With libraries, all of the colours and typography guidelines are built-in with this file, no need to create them.
States? Yes, please!
Components contain different states such as default state, hover, selected and disabled state.
Interactive
Thanks to the states, components react when you hover on them or click them and show the related state.
How to
How to
Edit the components
1.
Copy the component from this file and paste on your artboard.
2.
Ungroup the component, using "Ctrl+Shift+G" or right-click and select "ungroup".
3.
Group it by clicking on "group" or "Ctrl+G" shortcut.
4.
Start editing by double clicking on each element of the component
How to
See the component states
1.
Select the component
2.
On the right hand side of the screen, click on each state to see the style
Button
Sizes |
Small | Standard | Large |
|---|---|---|---|
| Primary Button | |||
| Secondary Button | |||
| Text_Button | |||
| Icon Button | - |
Buttons with icon |
Leading Icon | Ending icon | |||
|---|---|---|---|---|---|
| Primary Button | |||||
| Secondary Button | |||||
| Text_Button |
Select
Chechbox |
Standard | Large | |||
|---|---|---|---|---|---|
| Unchecked | |||||
| Checked |
Radio |
Standard | Large | |||
|---|---|---|---|---|---|
| Unchecked | |||||
| Checked |
Dropdown |
|||||
|---|---|---|---|---|---|
| Standard |
Choose the country of your passport
|
Sizes |
Small | Standard | Large |
|---|---|---|---|
| Default | Tag label | Tag label | Tag label |
| Selected | Tag label | Tag label | Tag label |
Tags |
Thumbs rating | ||
|---|---|---|---|
| Default |
|
||
| Large |
|
Input
Text field |
Outline | Filled |
|---|---|---|
| Compact |
|
|
| Standard |
|
|
| Large |
|
|
Text field with helper text |
Outline | Filled |
|---|---|---|
| Compact |
Helper text
|
Helper text
|
| Standard |
Helper text
|
Helper text
|
| Large |
Helper text
|
Helper text
|
Text field with helper text |
Leading Icon | Ending icon |
|---|---|---|
| Standard |
|
|
Text area |
Outline | Filled |
|---|---|---|
|
|
|
Validation |
Success | Error |
|---|---|---|
| Standard |
Looks great
|
Cards
Federal Network
FedNet mission is to provide a mean for provision of smart government services to the government entities
Read More
Card title
Description goes here
Card title here
News
Additional 500 MHz of 6 GHz band for the Wi-Fi
28 December 2020
Additional 500 MHz of 6GHz band for the Wi-Fi radio frequency
28 December 2020
In line with the vision of TRA to enhance the regional and global leadership of the United Arab Emirates in the field of ...
Read MoreTitle one
216
Title two
2016
Title three
26
Title four
99.3%
Card title here
Description about the information
Internet &
E-commerce
The e-Commerce promote adherence to regulatory
Internet &
E-commerce
The e-Commerce promote adherence to regulatory
Card title goes here
Card description which can be up to three lines and gives information about the title
Card title
Description goes here
Satisfaction
78.3%
Services
12
/82
Dark mode
Description goes here
Confirm card title
Card description which describes the importance of the validation..
Report card
Name
Ali Alhouli
Job
Retailer
Date of birth
24/05/1994
Nationality
Emirati
Address
Marina tower, Abu Dhabi 001586,
United Arab Emirates
Choose an option
Edit
Share
Delete All
Information
Name
Mohammad Ali Alhouli
Address
Marina tower, Abu Dhabi 001586,
United Arab Emirates
Service
The service name
Step 3/3
Request review
Your service application will go through review process by the entity
Time remaining
12 Hours
Card title
Description goes here
Welcome Ali
For a better user experience, we use cookies across this website. No personal data or tracking.
Gender
Short description like select one of the options
Poll result
Data from 2-12 May 2020 Total 145 votes
Having trouble?
Online support
48
more items
Stats
Heard about the Mobile Number Portability service between service provider?
Step 2/3
Personal Info
Navigation
Pagination
Standard
Use for up to 7 pages
Compact
Use when there are more than 7 pages
Breadcrumb
Section search
Progress bar
Colour
Core colours |
Palette |
|---|---|
|
UAE Gold #B68A35 |
90 #413213 80 #5F481C 70 #7C5E24 60 #99742D 50 #B68A35 40 #C5A25D 30 #D6BE8E 20 #E4D5B6 10 #F2EADB |
|
UAE Red #D83731 |
90 #4E1412 80 #711D1A 70 #932521 60 #B52E29 50 #D83731 40 #E05F5A 30 #EA8F8C 20 #F1B7B5 10 #F8DBDA |
|
UAE Green #3F8E50 |
90 #17331D 80 #214A2A 70 #2B6136 60 #357743 50 #3F8E50 40 #65A573 30 #93C09D 20 #BAD6C0 10 #DCEBDF |
|
UAE Black #1B1D21 |
90 #323438 80 #494A4D 70 #606164 60 #76777A 50 #8D8E90 40 #A4A5A6 30 #BBBCBD 20 #D1D2D3 10 #ECECEC |
Icons
Universal Icons
UAE Pass
UAE Customer Pulse
