Aios
01

Logo Formats

The horizontal version of our logo

Image

Download the logos in SVG and or PNG format.

Download
SVG Format PNG Format

The standalone version of our logo / icon

Image

The desktop standalone version of our logo / icon

Image

Download the logos / icons in SVG and or PNG format.

Download
SVG Format PNG Format

Logo clear space & construction

A minimum of 10px - 15px needs to be around the logo / icon for the logo to have some breathing space.

Standalone logo / icon
Image
Horizontal
Image
02

Typeface

PRIMARY FONT - NUNITO

NUNITO BOLD

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

NUNITO MEDIUM

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

NUNITO REGULAR

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

NUNITO LIGHT

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

Download
SECONDARY FONT - ROBOTO

ROBOTO BOLD

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

ROBOTO MEDIUM

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

ROBOTO REGULAR

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

ROBOTO LIGHT

A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

a b c d e f g h i j k l m n o p q r s t u v w x y z

1 2 3 4 5 6 7 8 9 0

Download
03

Typography

Desktop Headings

H1
Bold

Font size: 50px
Line height: 60px

H1
Medium

Font size: 50px
Line height: 60px

H1
Light

Font size: 50px
Line height: 60px

H2 Bold

Font size: 36px
Line height: 46px

H2 Medium

Font size: 36px
Line height: 46px

H2 Light

Font size: 36px
Line height: 46px

H3 Bold

Font size: 30px
Line height: 38px

H3 Medium

Font size: 30px
Line height: 38px

H3 Light

Font size: 30px
Line height: 38px

H4 Medium

Font size: 22px
Line height: 30px

H5 Medium

Font size: 18px
Line height: 24px

H6 Bold

Font size: 14px
Line height: 20px

Mobile Headings

H1
Bold

Font size: 30px
Line height: 36px

H1
Medium

Font size: 30px
Line height: 36px

H1
Light

Font size: 30px
Line height: 36px

H2 Bold

Font size: 26px
Line height: 32px

H2 Medium

Font size: 26px
Line height: 32px

H2 Light

Font size: 26px
Line height: 32px

H3 Bold

Font size: 24px
Line height: 30px

H3 Medium

Font size: 24px
Line height: 30px

H3 Light

Font size: 24px
Line height: 30px

H4 Medium

Font size: 20px
Line height: 34px

H5 Medium

Font size: 16px
Line height: 24px

H6 Bold

Font size: 14px
Line height: 20px

Lead Paragraph

Lorem ipsum dolor sit amet, ad modo facete invenire his, ne scripta propriae cum, novum labore ad eam. Eam id mazim sapientem, idque dicta ne eam. Ut has mazim menandri tacimates.

Font size: 16px
Line height: 24px
Weight/s: 500
Standard Paragraph

Lorem ipsum dolor sit amet, ad modo facete invenire his, ne scripta propriae cum, novum labore ad eam. Eam id mazim sapientem, idque dicta ne eam. Ut has mazim menandri tacimates. Omittam periculis repudiandae et vel.

Font size: 14px
Line height: 18px
Weight/s: 500
04

Primary Colour Palette

Digital - Green
HEX: #54C0b0
RGB: 84, 192, 176
RGBA: 84, 192, 176, 1
Digital - Dark Blue
HEX: #003E5A
RGB: 0, 62, 90
RGBA: 0, 62, 90, 1
Digital - White
HEX: #FFFFFF
RGB: 255, 255, 255
RGBA: 255, 255, 255, 1
Digital - Grey Blue
HEX: #496E88
RGB: 73, 110, 136
RGBA: 73, 110, 136, 1
Digital - Blue
HEX: #3498DB
RGB: 52, 152, 219
RGBA: 52, 152, 219, 1
Digital - Light Blue
HEX: #DEEEFE
RGB: 222, 238, 254
RGBA: 222, 238, 254, 1
                        
  .primary-color-green,
  .primary-background-color-green {
    /* HEX COLOR */
    color: #54C0b0;

    /* RGB COLOR */
    color: rgb(84, 192, 176);

    /* RGBA COLOR NO OPACITY */
    color: rgba(84, 192, 176, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(84, 192, 176, 0.5); 
  }
                        
                      
                        
  .primary-color-dark-blue,
  .primary-background-color-dark-blue {
    /* HEX COLOR */
    color: #003E5A;

    /* RGB COLOR */
    color: rgb(0, 62, 90);

    /* RGBA COLOR NO OPACITY */
    color: rgba(0, 62, 90, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(0, 62, 90, 0.5); 
  }
                        
                      
                        
  .primary-color-white,
  .primary-background-color-white {
    /* HEX COLOR */
    color: #FFFFFF;

    /* RGB COLOR */
    color: rgb(255, 255, 255);

    /* RGBA COLOR NO OPACITY */
    color: rgba(255, 255, 255, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(255, 255, 255, 0.5); 
  }
                        
                      
                        
  .primary-color-grey-blue,
  .primary-background-color-grey-blue {
    /* HEX COLOR */
    color: #496E88;

    /* RGB COLOR */
    color: rgb(73, 110, 136);

    /* RGBA COLOR NO OPACITY */
    color: rgba(73, 110, 136, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(73, 110, 136, 0.5); 
  }
                        
                      
                        
  .primary-color-blue,
  .primary-background-color-blue {
    /* HEX COLOR */
    color: #3498DB;

    /* RGB COLOR */
    color: rgb(52, 152, 219);

    /* RGBA COLOR NO OPACITY */
    color: rgba(52, 152, 219, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(52, 152, 219, 0.5); 
  }
                        
                      
                        
  .primary-color-light-blue,
  .primary-background-color-light-blue {
    /* HEX COLOR */
    color: #DEEEFE;

    /* RGB COLOR */
    color: rgb(222, 238, 254);

    /* RGBA COLOR NO OPACITY */
    color: rgba(222, 238, 254, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(222, 238, 254, 0.5); 
  }
05

Secondary Colour Palette

Digital - Blue
HEX: #00ACDF
RGB: 0, 172, 223
RGBA: 0, 172, 223, 1
Digital - Pink
HEX: #FA70AF
RGB: 250, 112, 175
RGBA: 250, 112, 175, 1
Digital - Yellow
HEX: #F9B11C
RGB: 249, 177, 28
RGBA: 249, 177, 28, 1
Digital - Medium Yellow
HEX: #FCD363
RGB: 252, 211, 99
RGBA: 252, 211, 99, 1
Digital - Purple
HEX: #A051B8
RGB: 160, 81, 184
RGBA: 160, 81, 184, 1
Digital - Green
HEX: #5EDC98
RGB: 94, 220, 152
RGBA: 94, 220, 152, 1
Digital - Blue Green
HEX: #287094
RGB: 40, 112, 148
RGBA: 40, 112, 148, 1
Digital - Red
HEX: #D80A0A
RGB: 216, 10, 10
RGBA: 216, 10, 10, 1
Digital - Light Yellow
HEX: #FFFDD1
RGB: 255, 253, 209
RGBA: 255, 253, 209, 1
Digital - Light Red
HEX: #F5C1C1
RGB: 245, 193, 193
RGBA: 245, 193, 193, 1
Digital - Light Green
HEX: #D4EFEB
RGB: 212, 239, 235
RGBA: 212, 239, 235, 1
                        
  .secondary-color-blue,
  .secondary-background-color-blue {
    /* HEX COLOR */
    color: #00ACDF;

    /* RGB COLOR */
    color: rgb(0, 172, 223);

    /* RGBA COLOR NO OPACITY */
    color: rgba(0, 172, 223, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(0, 172, 223, 0.5); 
  }
                        
                      
                        
  .secondary-color-pink,
  .secondary-background-color-pink {
    /* HEX COLOR */
    color: #FA70AF;

    /* RGB COLOR */
    color: rgb(250, 112, 175);

    /* RGBA COLOR NO OPACITY */
    color: rgba(250, 112, 175, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(250, 112, 175, 0.5);  
  }
                        
                      
                        
  .secondary-color-yellow,
  .secondary-background-color-yellow {
    /* HEX COLOR */
    color: #F9B11C;

    /* RGB COLOR */
    color: rgb(249, 177, 28);

    /* RGBA COLOR NO OPACITY */
    color: rgba(249, 177, 28, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(249, 177, 28, 0.5); 
  }
                        
                      
                        
  .secondary-color-medium-yellow,
  .secondary-background-color-medium-yellow {
    /* HEX COLOR */
    color: #FCD363;

    /* RGB COLOR */
    color: rgb(252, 211, 99);

    /* RGBA COLOR NO OPACITY */
    color: rgba(252, 211, 99, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(252, 211, 99, 0.5);  
  }
                        
                      
                        
  .secondary-color-purple,
  .secondary-background-color-purple {
    /* HEX COLOR */
    color: #A051B8;

    /* RGB COLOR */
    color: rgb(160, 81, 184);

    /* RGBA COLOR NO OPACITY */
    color: rgba(160, 81, 184, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(160, 81, 184, 0.5);  
  }
                        
                      
                        
  .secondary-color-green,
  .secondary-background-color-green {
    /* HEX COLOR */
    color: #5EDC98;

    /* RGB COLOR */
    color: rgb(94, 220, 152);

    /* RGBA COLOR NO OPACITY */
    color: rgba(94, 220, 152, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(94, 220, 152, 0.5);  
  }
                        
                      
                        
  .secondary-color-blue-green,
  .secondary-background-color-blue-green {
    /* HEX COLOR */
    color: #287094;

    /* RGB COLOR */
    color: rgb(40, 112, 148);

    /* RGBA COLOR NO OPACITY */
    color: rgba(40, 112, 148, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(40, 112, 148, 0.5);  
  }
                        
                      
                        
  .secondary-color-red,
  .secondary-background-color-red {
    /* HEX COLOR */
    color: #D80A0A;

    /* RGB COLOR */
    color: rgb(216, 10, 10);

    /* RGBA COLOR NO OPACITY */
    color: rgba(216, 10, 10, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(216, 10, 10, 0.5); 
  }
                        
                      
                        
  .secondary-color-light-yellow,
  .secondary-background-color-light-yellow {
    /* HEX COLOR */
    color: #FFFDD1;

    /* RGB COLOR */
    color: rgb(255, 253, 209);

    /* RGBA COLOR NO OPACITY */
    color: rgba(255, 253, 209, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(255, 253, 209, 0.5);  
  }
                        
                      
                        
  .secondary-color-light-red,
  .secondary-background-color-light-red {
    /* HEX COLOR */
    color: #F5C1C1;

    /* RGB COLOR */
    color: rgb(245, 193, 193);

    /* RGBA COLOR NO OPACITY */
    color: rgba(245, 193, 193, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(245, 193, 193, 0.5);  
  }
                        
                      
                        
  .secondary-color-light-green,
  .secondary-background-color-light-green {
    /* HEX COLOR */
    color: #D4EFEB;

    /* RGB COLOR */
    color: rgb(212, 239, 235);

    /* RGBA COLOR NO OPACITY */
    color: rgba(212, 239, 235, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(212, 239, 235, 0.5);  
  }
06

Grey Colour Palette

Digital - Light Grey
HEX: #E4E4E4
RGB: 228, 228, 228
RGBA: 228, 228, 228, 1
Digital - Medium Light Grey
HEX: #D2D4DA
RGB: 210, 212, 218
RGBA: 210, 212, 218, 1
Digital - Medium Grey
HEX: #B3B5BD
RGB: 179, 181, 189
RGBA: 179, 181, 189, 1
Digital - Grey
HEX: #9496A1
RGB: 148, 150, 161
RGBA: 148, 150, 161, 1
Digital - Medium Dark Grey
HEX: #777986
RGB: 119, 121, 134
RGBA: 119, 121, 134, 1
Digital - Dark Grey
HEX: #5B5D6B
RGB: 91, 93, 107
RGBA: 91, 93, 107, 1
                        
  .grey-color-light-grey,
  .grey-background-color-light-grey {
    /* HEX COLOR */
    color: #E4E4E4;

    /* RGB COLOR */
    color: rgb(228, 228, 228);

    /* RGBA COLOR NO OPACITY */
    color: rgba(228, 228, 228, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(228, 228, 228, 0.5);  
  }
                        
                      
                        
  .grey-color-medium-light-grey,
  .grey-background-color-medium-light-grey {
    /* HEX COLOR */
    color: #D2D4DA;

    /* RGB COLOR */
    color: rgb(210, 212, 218);

    /* RGBA COLOR NO OPACITY */
    color: rgba(210, 212, 218, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(210, 212, 218, 0.5);  
  }
                        
                      
                        
  .grey-color-medium-grey,
  .grey-background-color-medium-grey {
    /* HEX COLOR */
    color: #B3B5BD;

    /* RGB COLOR */
    color: rgb(179, 181, 189);

    /* RGBA COLOR NO OPACITY */
    color: rgba(179, 181, 189, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(179, 181, 189, 0.5);  
  }
                        
                      
                        
  .grey-color-grey,
  .grey-background-color-grey {
    /* HEX COLOR */
    color: #9496A1;

    /* RGB COLOR */
    color: rgb(148, 150, 161);

    /* RGBA COLOR NO OPACITY */
    color: rgba(148, 150, 161, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(148, 150, 161, 0.5);  
  }
                        
                      
                        
  .grey-color-medium-dark-grey,
  .grey-background-color-medium-dark-grey {
    /* HEX COLOR */
    color: #777986;

    /* RGB COLOR */
    color: rgb(119, 121, 134);

    /* RGBA COLOR NO OPACITY */
    color: rgba(119, 121, 134, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(119, 121, 134, 0.5);  
  }
                        
                      
                        
  .grey-color-dark-grey,
  .grey-background-color-dark-grey {
    /* HEX COLOR */
    color: #5B5D6B;

    /* RGB COLOR */
    color: rgb(91, 93, 107);

    /* RGBA COLOR NO OPACITY */
    color: rgba(91, 93, 107, 1);

    /* RGBA COLOR 50% OPACITY */
    color: rgba(91, 93, 107, 0.5);  
  }
07

Google Icons

Steps to Embed Google Icons:

    Choose Icons:
  • Visit the Material Icons website to explore and select icons that is needed.
  • NOTE: on Aios projects the Rounded Material icons and solid icons is being used.
    Get the Embed Code:
  • After selecting your desired icons, click on the individual icon.
  • Copy the provided HTML code that represents the icon.

Example of embedding Google Icons HTML code

    Paste into HTML:
  • Paste the copied HTML code wherever you want to use the icon in your HTML file.

    Apply the needed Styles:
  • You can apply additional styles to the icons using CSS if needed. 

                            
  /* Example of applying styles to Google Icons in CSS */
  .material-icons {
    font-size: 16px; /* Adjust the size as needed */
    color: #54C0b0; /* Set the desired color */
  }
home
call_split
search
star
sync
cloud
cloud_off
person
topic
inventory
group_add
save
refresh
create_new_folder
note_add
file_upload
view_column
picture_as_pdf
info
play_circle
filter_alt
multiple_stop
handyman
file_copy
tag
local_hospital
event
fact_check
donut_large
pending_actions
08

Custom Icons

Data Grid Context Menu Icons
We've introduced a new set of icons designed exclusively for our data grid context menus.

These context menu icons are dynamically added programmatically within our TypeScript files. The original context menu has been overwritten with our custom context menus to provide a more tailored and efficient user experience.

Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image
Image

Here's a brief snippet example of a context menu entry featuring a custom icon. By utilising a span tag with a unique class, such as 'grid-context-menu-icon,' we dynamically load an icon into the context menu using CSS.

Custom Icons CSS

Custom Icons Typescript


Page Inner Left Navigation Menu Icons

We've developed a unique set of icons specifically designed for the left navigation on individual pages.

Image
Image
Image
Image
Image
Image
Image
Image
09

Data Grids

refresh Clear
edit Edit Form
person_add_alt Assign
print Print
cloud_download Download
Image Image
Title expand_more
Image Image
Priority expand_more
Image Image
Patient expand_more
Image Image
Due Date expand_more
Image Image
Status expand_more
Treatment Plan for Chronic Migraine Management
High
Smith, Emily, 1234567890
05/22/2022
New
Diagnostic Evaluation of Respiratory Function
High
Johnson, Christopher, 2345678901
08/14/2024
Modified
Annual Checkup and Wellness Assessment
Medium
Davis, Amanda, 3456789012
02/03/2023
Read
Physical Therapy Protocol for Lower Back Pain
Low
Taylor, Benjamin, 4567890123
12/07/2022
Overdue
Referral to Sleep Clinic for Insomnia Assessment
High
Martinez, Olivia, 5678901234
09/18/2025
New
Cardiovascular Risk Assessment and Prevention Plan
Medium
Wilson, Ethan, 6789012345
06/30/2023
New
Nutritional Counseling for Diabetes Management
High
Harris, Sophia, 7890123456
04/11/2024
Overdue
Orthopedic Consultation for Joint Pain
Low
Turner, Mason, 8901234567
10/25/2022
Read
Psychological Assessment for Stress Management
Medium
Baker, Isabella, 9012345678
07/09/2025
Modified
Gastrointestinal Health Monitoring and Recommendations
High
Patel, Aiden, 0123456789
03/15/2023
Overdue
10

Digital Form Inputs

Digital Form Inputs CSS

                          
  .form-inputs {
    width: 100%;
    max-width: 24%;
    margin-right: 0.3%;
    float: left;
    border: 1px;
    border-radius: 0;
    border-style: solid;
    border-color: #fff;
    transition: all 0.3s;
    color: #464646;
  }

  .form-inputs:focus,
  .form-inputs:hover {
    border: 1px;
    border-style: solid;
    transition: all 0.3s;
  }

  .default-form-input {
    background-color: #DEEEFE;
  }

  .recommended-form-input {
    background-color: rgba(84, 192, 176, 0.5);
  }

  .required-form-input {
    background-color: #F5C1C1;
  }

  .error-form-input {
    background-color: #FFFDD1;
  }

  .default-form-input:hover,
  .default-form-input:focus {
    border-color: #3498DB;
  }

  .recommended-form-input:hover,
  .recommended-form-input:focus {
    border-color: #54C0b0;
  }

  .required-form-input:hover,
  .required-form-input:focus {
    border-color: #D80A0A;
  }

  .error-form-input:hover,
  .error-form-input:focus {
    border-color: #F9B11C;
  }
11

Inputs / Textarea

Inputs HTML

Textarea HTML

Inputs CSS

                                
  textarea {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    font-size: 14px;
    padding: 5px 15px;
    float: left;
    min-height: 80px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    color: #333;
    resize: none;
    transition: all 0.2s ease-in-out;
  }

  textarea:hover {
    border-color: #54c0b0;
    outline: 0 none;
    transition: all 0.2s ease-in-out;
  }

  textarea:focus {
    border-color: #54c0b0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(84, 192, 176, 0.8);
    outline: 0 none;
    transition: all 0.2s ease-in-out;
  }

Textarea CSS

                                
  textarea {
    width: 100%;
    max-width: 100%;
    border-radius: 10px;
    font-size: 14px;
    padding: 5px 15px;
    float: left;
    min-height: 80px;
    border: 1px solid #ddd;
    margin-bottom: 12px;
    color: #333;
    resize: none;
    transition: all 0.2s ease-in-out;
  }

  textarea:hover {
    border-color: #54c0b0;
    outline: 0 none;
    transition: all 0.2s ease-in-out;
  }

  textarea:focus {
    border-color: #54c0b0;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(84, 192, 176, 0.8);
    outline: 0 none;
    transition: all 0.2s ease-in-out;
  }
12

Buttons

Large Buttons

Large Buttons HTML

Large Buttons CSS

                                  
  button {
    width: 120px;
    border-radius: 40px;
    background-color: #fff;
    color: #54c0b0;
    border: 0;
    font-weight: 500;
    margin-right: 15px;
    box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .1);
    text-align: center;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 14px;
    transition: .2s ease-in-out;
    border: 1px solid #fff;
    margin-right: 20px;
    transition: .2s ease-in-out
  }
  
  button.hover {
    border: 1px solid #54c0b0;
  }
  
  button.active {
    border: 1px solid #54c0b0;
    background-color: #54c0b0;
    color: #fff;
    font-weight: 700;
  }
  
  button.disabled {
    border: 1px solid #fff;
    background-color: #fff;
    color: #9c9ea7;
    font-weight: 500;
    cursor: no-drop;
  }
  
  button.disabled:hover {
    border: 1px solid #fff;
    cursor: no-drop;
  }
  
  button .material-icons-round {
    float: left;
    margin-top: -5px;
    font-size: 22px;
    line-height: 22px;
  }

Small Buttons

Small Buttons HTML

Small Buttons CSS

                                  
  button {
    width: 120px;
    border-radius: 40px;
    background-color: #fff;
    color: #54c0b0;
    border: 0;
    font-weight: 500;
    margin-right: 15px;
    box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .1);
    text-align: center;
    padding: 12px 10px;
    font-size: 14px;
    line-height: 14px;
    transition: .2s ease-in-out;
    border: 1px solid #fff;
    margin-right: 20px;
    transition: .2s ease-in-out
  }
13

Checkboxes

Checkboxes

Checkboxes HTML

Checkboxes CSS

                                  
  .control {
    display: block;
    position: relative;
    padding-left: 30px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 14px;
  }

  .control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
  }

  .checkbox-indicator {
    position: absolute;
    top: -2px;
    left: 0;
    height: 20px;
    width: 20px;
    background: transparent;
    border: 1px solid #003d59;
    border-radius: 5px;
    transition: all 0.3s;
  }

  .control:hover input ~ .checkbox-indicator,
  .control input:focus ~ .checkbox-indicator {
    background: transparent;
    border-color: #36c0b0;
    transition: all 0.3s;
  }

  .control input:checked ~ .checkbox-indicator {
    background: #36c0b0;
    border-color: #003d59;
  }

  .control:hover input:not([disabled]):checked ~ .checkbox-indicator,
  .control input:checked:focus ~ .checkbox-indicator {
    background: #36c0b0;
    transition: all 0.3s;
  }

  .control input:disabled ~ .checkbox-indicator {
    background: #9496a0;
    opacity: 0.6;
    border-color: #9496a0;
    cursor: no-drop;
  }

  .checkbox-indicator:after {
    content: '';
    position: absolute;
    display: none;
  }

  .control input:checked ~ .checkbox-indicator:after {
    display: block;
  }

  .control input:not([disabled]):hover ~ .checkbox-indicator:after {
    display: block;
    border-color: #bdcfd5;
  }

  .control-checkbox .checkbox-indicator:after {
    left: 6px;
    top: 1px;
    width: 5px;
    height: 11px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
  }
  
  .control-checkbox input:disabled ~ .checkbox-indicator:after {
    border-color: #fff;
  }
14

Radio Buttons

Radio buttons

Radio buttons HTML

Radio buttons CSS

                                
  .radio-button-container {
    color: rgba(0,0,0,0.75);
    display: block;
    position: relative;
    padding-left: 30px;
    line-height: 25px;
    margin-bottom: 12px;
    margin-left: 0px;
    cursor: pointer;
    font-size: 14px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  .radio-button-container.disabled {
    cursor:no-drop;
  }

  .radio-button-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
  }

  .checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 21px;
    width: 21px;
    background-color: rgba(0,0,0,0);
    border-radius: 50%;
    border: 1px solid #01405b;
    transition: all 0.3s;
  }

  .radio-button-container:hover input ~ .checkmark {
    border-color: #01405b;
  }

  .radio-button-container input:checked ~ .checkmark {
    background-color: rgba(0,0,0,0);
    border-color: #01405b;
  }
  
  .radio-button-container input:checked:disabled ~ .checkmark {
    background-color: rgba(0,0,0,0);
    border-color: #9496a0;
  }
  
  .radio-button-container input:disabled ~ .checkmark {
    background-color: rgba(0,0,0,0);
    border-color: #9496a0;
  }

  .checkmark:after {
    content: "";
    position: absolute;
    display: none;
  }

  .radio-button-container input:checked ~ .checkmark:after {
    display: block;
  }
  
  .radio-button-container input:hover ~ .checkmark:after {
    display: block;
    background: #bdcfd5;
  }
  
  .radio-button-container input:checked:disabled ~ .checkmark:after {
    display: block;
    background: #c6c6c6;
  }
  
  .radio-button-container input:disabled ~ .checkmark:after {
    display: block;
    background: transparent;
  }
  
  .radio-button-container input:checked:disabled:hover ~ .checkmark:after {
    cursor: no-drop;
  }

  .radio-button-container .checkmark:after {
    top: 4px;
    left: 4px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #54b5ac;
  }
15

Toggles

Toggles

Active

Active & disabled

Disabled

Toggle Switches HTML

Toggle Switches CSS

                                
  .switch  {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 24.5px;
    margin: 0;
  }
  
  .switch input {
    opacity: 0;
    width: 0;
    height: 0;
  }
  
  .slider {
    position: absolute;
    cursor: pointer; 
    background-color: #E0E0E0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border-radius: 1.5rem;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .slider:before {
    position: absolute;
    content: '';
    background-color: #fff;
    height: 18px;
    width: 18px;
    left: .25rem;
    bottom: 3.5px;
    border-radius: 50%;
    -webkit-transition: .4s;
    transition: .4s;
  }
  
  .switch input:checked + .slider:before {
    -webkit-transform: translateX(20px);
    -ms-transform: translateX(20px);
    transform: translateX(20px);
  }
  
  .switch input:checked + .slider-one {
    background-color: #2aa1c0;
  }
  
  .switch input:checked + .slider-two {
    background-color: #2aa1c0;
  }
  
  .switch input:checked + .slider-three {
    background-color: #2aa1c0;
  }
16

Dropdown Select

Dropdown Select

Default

  • Item 1
  • Item 2
  • Item 3

Hover

  • Item 1
  • Item 2
  • Item 3

Disabled

  • Item 1
  • Item 2
  • Item 3

Dropdown Select HTML

Dropdown Select CSS

                                
  .select-dropdown {
    position: relative;
    display: inline-block;
    max-width: 100%;
    width: 100%;
  }

  .select-dropdown-button {
    padding: 8px 35px 8px 15px;
    background-color: #fff;
    color: #616161;
    border: 1px solid #b3b5bd;
    border-radius: 10px;
    cursor: pointer;
    width: 100%;
    min-width: 100%;
    text-align: left;
    color: #b3b5bd;
  }

  .select-dropdown-button:hover {
    color: #54c0b0;
  }

  .select-dropdown-button::focus {
    outline: none;
  }

  .select-dropdown-button .select-chevron-down {
    position: absolute;
    right: 12px;
    top: 11px;
    width: 20px;
    height: 20px;
    text-align: center;
    font-size: 26px;
    line-height: 26px;
    transition: all ease-in-out 0.2s;
  }

  .select-dropdown-selected {
    color: #666;
  }

  .select-chevron-up {
    top: 18px;
    right: 6px;
    transform: rotate(180deg);
    transform-origin: center;
    transition: all ease-in-out 0.2s;
  }

  .select-dropdown-list {
    position: absolute;
    display: block;
    left: 0;
    right: 0;
    max-height: 300px;
    overflow: auto;
    margin: 0;
    padding: 0;
    list-style-type: none;
    opacity: 0;
    pointer-events: none;
    transform-origin: top left;
    transform: scale(1, 0);
    transition: all ease-in-out 0.3s;
    z-index: 2;
    top: 40px;
    border: 1px solid #ededed;
    border-radius: 10px;
    background-color: #fff;
  }

  .select-dropdown-list.active {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1, 1);
    box-shadow: 0 6px 34px 0 rgba(0, 0, 0, .15);
  }

  .select-dropdown-list-item {
    display: block;
    list-style-type: none;
    padding: 10px 15px;
    background: #fff;
    border-top: 0px solid #e6e6e6;
    font-size: 14px;
    line-height: 1.4;
    cursor: pointer;
    color: #616161;
    transition: all ease-in-out 0.3s;
  }
  
  .select-dropdown-list-item:hover {
    color: #fff;
    background-color: rgba(84, 192, 176, 0.5);
  }
  
  .select-dropdown-button.disabled {
    cursor: no-drop;
    box-shadow: none ;
    outline: none;
    border: 1px solid #d2d4da;
    color: #d2d4da;
  }
  
  .select-dropdown-button.disabled:hover {
    cursor: no-drop;
    box-shadow: none ;
    outline: none;
    border: 1px solid #d2d4da;
    border-color: #d2d4da ;
  }

Dropdown Select JS

                                
  $('.select-dropdown-button').on('click', function(){
    var dropdown = $(this).closest('.select-dropdown');

    $('.select-dropdown').not(dropdown).find('.select-dropdown-list').removeClass('active');
    $('.select-dropdown').not(dropdown).find('.select-chevron-down').removeClass('select-chevron-up');

    dropdown.find('.select-dropdown-list').toggleClass('active');
    dropdown.find('.select-chevron-down').toggleClass('select-chevron-up');
  });
  
  $('.select-dropdown-list-item').on('click', function(){
    var itemValue = $(this).data('value');
    var dropdown = $(this).closest('.select-dropdown');
    
    dropdown.find('.select-dropdown-button div').text($(this).text()).parent().attr('data-value', itemValue);
    dropdown.find('.select-dropdown-list').removeClass('active');
    dropdown.find('.select-dropdown-button').addClass('select-dropdown-selected')
    dropdown.find('.select-chevron-down').removeClass('select-chevron-up');
  });
17

Tags

Tags

2WW
Cancer
Anaemia
COVID-19
e-RS
Kidney
NICE
PAN
Penicillamine
Poland
Axitinib
Renal

Tags HTML

Tags CSS

                                
  .popular-keywords-filter-btns-db, 
  .popular-keywords-filter-btns-mb, 
  .popular-keywords-filter-btns-lb, 
  .popular-keywords-filter-btns-gb {
    width: auto;
    height: 20px;
    border-radius: 30px;
    padding: 0px 6px;
    color: #fff;
    float: left;
    text-align: center;
    font-size: 14px;
    margin-right: 6px;
    font-weight: 500;
    margin-bottom: 5px;
    cursor: pointer;
  }
  
  .popular-keywords-filter-btns-db:hover, 
  .popular-keywords-filter-btns-mb:hover, 
  .popular-keywords-filter-btns-lb:hover, 
  .popular-keywords-filter-btns-gb:hover {
    box-shadow: 0 .1rem .4rem rgba(0, 0, 0, .1);
  }
  
  .popular-keywords-filter-btns-db {
    background-color: #3498DB;
  }
  
  .popular-keywords-filter-btns-mb {
    background-color: #84E8EF;
  }
  
  .popular-keywords-filter-btns-lb {
    background-color: #2488AF;
  }
  
  .popular-keywords-filter-btns-gb {
    background-color: #54c0b0;
  }
18

Tabs

  • Form
  • Criteria
  • History

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices massa lorem, at sagittis urna egestas a. Suspendisse potenti. Sed ornare dui eget orci vulputate, eu ultricies mauris fermentum. Nullam varius tortor nec ante dictum, sit amet pharetra urna commodo. Aliquam ullamcorper tellus ac urna congue, quis pretium quam semper.

Vestibulum mauris ex, malesuada nec viverra et, accumsan vel neque. Vestibulum molestie orci lorem, ac tristique sapien eleifend vitae. Nullam cursus auctor imperdiet. Aenean lobortis, odio in pretium faucibus, felis dolor congue nisl, at porta nisl lorem non nisl. Nullam accumsan bibendum metus nec dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices massa lorem, at sagittis urna egestas a. Suspendisse potenti. Sed ornare dui eget orci vulputate, eu ultricies mauris fermentum. Nullam varius tortor nec ante dictum, sit amet pharetra urna commodo. Aliquam ullamcorper tellus ac urna congue, quis pretium quam semper.

Vestibulum mauris ex, malesuada nec viverra et, accumsan vel neque. Vestibulum molestie orci lorem, ac tristique sapien eleifend vitae. Nullam cursus auctor imperdiet. Aenean lobortis, odio in pretium faucibus, felis dolor congue nisl, at porta nisl lorem non nisl. Nullam accumsan bibendum metus nec dignissim.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultrices massa lorem, at sagittis urna egestas a. Suspendisse potenti. Sed ornare dui eget orci vulputate, eu ultricies mauris fermentum. Nullam varius tortor nec ante dictum, sit amet pharetra urna commodo. Aliquam ullamcorper tellus ac urna congue, quis pretium quam semper.

Vestibulum mauris ex, malesuada nec viverra et, accumsan vel neque. Vestibulum molestie orci lorem, ac tristique sapien eleifend vitae. Nullam cursus auctor imperdiet. Aenean lobortis, odio in pretium faucibus, felis dolor congue nisl, at porta nisl lorem non nisl. Nullam accumsan bibendum metus nec dignissim.

Tabs HTML

Tabs CSS

Tabs Typescript
19

Toastrs

I have integrated the toastr library for displaying visually appealing notifications in the application. Unlike typical implementations where toastrs are triggered by buttons, in this context, they are implemented purely for visual demonstration and don't require button interactions. For more details and documentation on the toastr library, please visit its official npm page: https://www.npmjs.com/package/toastr

Toastr samples

Toastr HTML

Toastr CSS

Toastr Typescript
20

Tooltips

To implement tooltips, consider utilizing the lightweight library known as tippy.js. Below are examples demonstrating tooltips and instructions on their usage. You can access the npm package through the following link: https://atomiks.github.io/tippyjs/v6/getting-started/

Tooltips HTML

Tooltips CSS

Tooltips Typescript
21

Accordians

description Documents

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi ratione dolor tenetur recusandae doloremque molestias itaque aspernatur fugiat quidem! Dolorum incidunt amet voluptatibus quas illo facilis nobis nulla dolorem iure!

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Totam at velit quia recusandae eius iste minus blanditiis, atque, laboriosam hic iusto magnam ducimus necessitatibus et inventore. Animi, qui, voluptatibus. Eligendi?

settings Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos, eos.

spa Information

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident aspernatur cum minima nesciunt modi sunt unde eaque atque, ipsam, officia fugiat incidunt dolor molestiae ullam laudantium tempora, enim odio ratione?

pie_chart Dashboard

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.

Lorem ipsum dolor sit amet.

leaderboard Charts

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed odio, quia blanditiis. Optio iusto iure modi deserunt ipsa blanditiis doloremque sint ex, repellat, ullam quaerat veniam ducimus libero sapiente? Neque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam nisi ratione totam placeat delectus, omnis illo sit aliquid error est fugit repellat expedita assumenda quam quaerat quas vel sapiente ullam possimus, repudiandae molestias. Deserunt ducimus illum iure iusto reprehenderit nam, neque, quia porro? Ea officia accusamus molestiae, odit assumenda non laboriosam quibusdam hic iusto, debitis distinctio ipsa ducimus neque nam magnam mollitia labore, unde commodi repellendus repellat! Quis, quaerat impedit.

Accordions HTML

Accordions CSS

Accordions Typescript
22

Dialogs

For the web application dialogs, you can employ the default Bootstrap dialog, making adjustments with custom CSS to align with the Aios styles.

Dialog HTML

Dialog CSS
23

Scrollbars

Here are examples of custom scrollbars along with the corresponding CSS snippet. The provided CSS code will override the default scrollbar throughout the project. Additionally, be aware that each browser handles scrolling uniquely, leading to slight variations across different browsers.

Vertical Scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue massa at justo condimentum finibus. Maecenas porta, felis ac elementum euismod, diam purus maximus ex, eu venenatis urna tellus ac quam. Mauris ac sapien orci. Integer consequat tristique vestibulum. Donec iaculis vulputate augue, et suscipit magna lacinia nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ultricies, augue at lobortis vulputate, orci purus convallis odio, eu maximus nibh magna eu dui. Phasellus tempor magna quis nibh sagittis gravida. Sed posuere eget ante at tristique. Praesent at tortor et erat lobortis aliquam. Phasellus urna est, pulvinar eget lobortis in, lacinia nec lacus. Aenean tincidunt odio consequat lectus tristique tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue massa at justo condimentum finibus. Maecenas porta, felis ac elementum euismod, diam purus maximus ex, eu venenatis urna tellus ac quam. Mauris ac sapien orci. Integer consequat tristique vestibulum. Donec iaculis vulputate augue, et suscipit magna lacinia nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ultricies, augue at lobortis vulputate, orci purus convallis odio, eu maximus nibh magna eu dui. Phasellus tempor magna quis nibh sagittis gravida. Sed posuere eget ante at tristique. Praesent at tortor et erat lobortis aliquam. Phasellus urna est, pulvinar eget lobortis in, lacinia nec lacus. Aenean tincidunt odio consequat lectus tristique tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue massa at justo condimentum finibus. Maecenas porta, felis ac elementum euismod, diam purus maximus ex, eu venenatis urna tellus ac quam. Mauris ac sapien orci. Integer consequat tristique vestibulum. Donec iaculis vulputate augue, et suscipit magna lacinia nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ultricies, augue at lobortis vulputate, orci purus convallis odio, eu maximus nibh magna eu dui. Phasellus tempor magna quis nibh sagittis gravida. Sed posuere eget ante at tristique. Praesent at tortor et erat lobortis aliquam. Phasellus urna est, pulvinar eget lobortis in, lacinia nec lacus. Aenean tincidunt odio consequat lectus tristique tincidunt.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue massa at justo condimentum finibus. Maecenas porta, felis ac elementum euismod, diam purus maximus ex, eu venenatis urna tellus ac quam. Mauris ac sapien orci. Integer consequat tristique vestibulum. Donec iaculis vulputate augue, et suscipit magna lacinia nec. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras ultricies, augue at lobortis vulputate, orci purus convallis odio, eu maximus nibh magna eu dui. Phasellus tempor magna quis nibh sagittis gravida. Sed posuere eget ante at tristique. Praesent at tortor et erat lobortis aliquam. Phasellus urna est, pulvinar eget lobortis in, lacinia nec lacus. Aenean tincidunt odio consequat lectus tristique tincidunt.

Horizontal Scroll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue massa at justo condimentum finibus.
Maecenas porta, felis ac elementum euismod, diam purus maximus ex, eu venenatis urna tellus ac quam. Mauris ac sapien orci. Integer
consequat tristique vestibulum. Donec iaculis vulputate augue, et suscipit magna lacinia nec. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Cras

ultricies, augue at lobortis vulputate, orci purus convallis odio, eu maximus nibh magna eu dui. Phasellus tempor magna quis nibh sagittis
gravida. Sed posuere eget ante at tristique. Praesent at tortor et erat lobortis aliquam. Phasellus urna est, pulvinar eget lobortis in,
lacinia nec lacus. Aenean tincidunt odio consequat lectus tristique tincidunt. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas congue massa at justo condimentum finibus.
Maecenas porta, felis ac elementum euismod, diam purus maximus ex, eu venenatis urna tellus ac quam. Mauris ac sapien orci. Integer
consequat tristique vestibulum. Donec iaculis vulputate augue, et suscipit magna lacinia nec. Class aptent taciti sociosqu ad
litora torquent per conubia nostra, per inceptos himenaeos. Cras
ultricies, augue at lobortis vulputate, orci purus convallis odio, eu maximus nibh magna eu dui. Phasellus tempor magna quis nibh sagittis
gravida. Sed posuere eget ante at tristique. Praesent at tortor et erat lobortis aliquam. Phasellus urna est, pulvinar eget lobortis in,
lacinia nec lacus. Aenean tincidunt odio consequat lectus tristique tincidunt.

Scrollbars CSS