Form-Wide Action Button

Used for login dialogue.

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Line-height: 1.4rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 1px solid kh-border--dark-plum
  • Padding: 0.5rem 1.5rem 0.6rem 1.5rem
  • Width: 100%


Hover, onClick state

  • Background: kh-bg--dark-plum
 
  • Background: kh-bg--light-plum
  • Border: 1px solid kh-bg--light-plum
 

 

Form-Wide Action Button (mobile, tablet)

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 2px solid kh-border--dark-plum
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem
  • Width: 100%


onTap state

  • Background: kh-bg--dark-plum
 
  • Background: kh-bg--light-plum
  • Border: 1px solid kh-bg--light-plum
 

 

Main Action Button
(large)

Used for main confirmation actions for form submissions and primary actions.

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Line-height: 1.4rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 1px solid kh-border--dark-plum
  • Padding: 0.5rem 1.5rem 0.6rem 1.5rem
  • Background: kh-bg--light-plum
  • Border: 1px solid kh-bg--light-plum
 
 

Hover, onClick state

  • Background: kh-bg--dark-plum
 
 

 

Main Action Button
(small)

Used for main confirmation actions inside tables.

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.8rem
  • Line-height: 1.2rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 1px solid kh-border--dark-plum
  • Padding: 0.2rem 1.2rem 0.3rem 1.2rem
  • Background: kh-bg--light-plum
  • Border: 2px solid kh-bg--light-plum
 
 

Hover, onClick state

  • Background: kh-bg--dark-plum
 

 

Main Action Button
(mobile)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 2px solid kh-border--dark-plum
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem
  • Width: 100%
  • Background: kh-bg--light-plum
  • Border: 2px solid kh-bg--light-plum
 
 

onTap state

  • Background: kh-bg--dark-plum
 

 

Main Action Button
(tablet)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 2px solid kh-border--dark-plum
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem
 

onTap state

  • Background: kh-bg--dark-plum
 
  • Background: kh-bg--light-plum
  • Border: 2px solid kh-bg--light-plum
 

 

Main Forward Button

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Line-height: 1.4rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 1px solid kh-border--dark-plum
  • Padding: 0.5rem 1.5rem 0.6rem 1.5rem


Hover, onClick state

  • Background: kh-bg--dark-plum
 
  • Background: kh-bg--light-plum
  • Border: 2px solid kh-bg--light-plum
 

 

Main Forward Button (mobile)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 2px solid kh-border--dark-plum
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem
  • Width: 100%
 

onTap state

  • Background: kh-bg--dark-plum
 
  • Background: kh-bg--light-plum
  • Border: 2px solid kh-bg--light-plum
 

 

Main Forward Button (tablet)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--white
  • Background: linear-gradient(kh-bg--plum; kh-bg--dark-plum)
  • Border: 2px solid kh-border--dark-plum
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem


onTap state

  • Background: kh-bg--dark-plum
 
  • Background: kh-bg--light-plum
  • Border: 2px solid kh-bg--light-plum
 

 

Secondary Action Button (large)

Used for secondary confirmation for form cancellations and secondary actions.

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Line-height: 1.4rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border--inactive-gray
  • Padding: 0.5rem 1.5rem 0.6rem 1.5rem
  • Color: kh--mid-gray
  • Background: kh-bg--white
 
 

Hover, onClick state

  • Background: kh-bg--light-blue-gray
 
 

 

Secondary Action Button (small)

Used for secondary confirmation inside table elements.

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.8rem
  • Line-height: 1.2rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.3rem 1.2rem 0.5rem 1.2rem


Hover, onClick state

  • Background: kh-bg--light-blue-gray
 
  • Color: kh--mid-gray
  • Background: kh-bg--white
 

 

Secondary Action Button (mobile)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem
  • Width: 100%


onTap state

  • Background: kh-bg--light-blue-gray
 
  • Color: kh--mid-gray
  • Background: kh-bg--white
 

 

Secondary Action Button (tablet)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem
 

onTap state

  • Background: kh-bg--light-blue-gray
 
  • Color: kh--mid-gray
  • Background: kh-bg--white
 

 

Secondary Back Button

Used for navigation to the previous view in the Koneksa Compare creation flow.

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Line-height: 1.4rem
  • Color: koneksa--dark-gray
  • Background: linear-gradient(koneksa-bg--white; koneksa-bg--light-blue-gray)
  • Border: koneksa-border-inactive--gray
  • Padding: 0.5rem 1.5rem 0.6rem 1.5rem


Icon: fa-angle-left

  • Font-size: 0.8rem
  • Padding-right: 1rem
 

Hover, onClick state

  • Background: koneksa-bg--light-blue-gray
  • Color: kh--mid-gray
  • Background: kh-bg--white
 
 

Secondary Back Button (mobile)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem
  • Width: 100%


Icon: fa-angle-left

  • Font-size: 1.2rem
  • Padding-right: 1rem


onTap state

  • Background: koneksa-bg--light-blue-gray
 
  • Color: kh--mid-gray
  • Background: kh-bg--white
 

 

Secondary Back Button (tablet)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 1.6rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.6rem 1.5rem 0.8rem 1.5rem
  • Height: 3rem


Icon: fa-angle-left

  • Font-size: 1.2rem
  • Padding-right: 1rem


onTap state

  • Background: koneksa-bg--light-blue-gray
 
  • Color: kh--mid-gray
  • Background: kh-bg--white
 

 

Tab Buttons

Used for navigation of sub-contents across the Koneksa Compare application.

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.8rem
  • Line-height: 1.4rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.3rem 1rem 0.4rem 1rem
 

Hover, onClick, active state

  • Background: kh-bg--mid-blue-gray
 
 

 

Tab Buttons
(mobile, tablet)

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1.2rem
  • Line-height: 2rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border--inactive-gray
  • Padding: 0.5rem 1rem 0.6rem 1rem
  • Height: 2.4rem
  • Width: 100%

onTap, active state

  • Background: kh-bg--mid-blue-gray
 

 

Progress Tabs

Used for displaying progress between different sub-pages in step-by-step flows across Koneksa Compare application.

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Line-height: 1.4rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding-top: 0.7rem
  • Padding-bottom: 0.8rem
  • Width: 100%

Active state

  • Background: kh-bg--light-blue-gray
 

Inactive state

  • Color: kh--mid-gray


Icon: fa-check

  • Font-size: 1rem
  • Color: kh--blue
  • Padding-right: 1rem
 

 

Pagination Tabs

Used for navigating pages of content across Koneksa Compare application.

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.8rem
  • Line-height: 1.4rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.3rem 1rem 0.4rem 1rem


Icon: fa-angle-left

  • Font-size: 0.8rem
  • Padding-right: 0.2rem


Icon: fa-angle-right

  • Font-size: 0.8rem
  • Padding-left: 0.2rem
 

Hover, onClick state

  • Background: kh-bg--light-blue-gray

Disabled state

Color: kh--mid-gray

 

 

Date Navigation Tabs

Used for navigating pages of content based on date ranges across Koneksa Compare application.

 
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.8rem
  • Line-height: 1.4rem
  • Color: kh--dark-gray
  • Background: linear-gradient(kh-bg--white; kh-bg--light-blue-gray)
  • Border: kh-border-inactive--gray
  • Padding: 0.3rem 1rem 0.4rem 1rem


Icon: fa-angle-left

  • Font-size: 0.8rem
  • Padding-right: 0.2rem


Icon: fa-angle-right

  • Font-size: 0.8rem
  • Padding-left: 0.2rem
 

Hover, onClick state

  • Background: kh-bg--light-blue-gray

Disabled state

  • Color: kh--mid-gray
 

 

Vertical Tabs

Used for navigating between different subpages for one main content page.

Hover, onClick, active state

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Color: kh--dark-gray
  • Background: kh-bg--white
  • Padding: 1rem 1.5rem 1rem 1.5rem
  • Border-radius: 5px
  • Box-shadow: 0px 1px 2px kh-bg--inactive-gray
 

 

Table Links

Used to indicate actions in table rows across Koneksa Compare Application.

  • Font-family: Open Sans, Arial, sans-serif
  • Line-height: 1.2rem
  • Color: kh--plum
 

Hover, onClick state

  • Text-decoration: underline
  • Font-family: Open Sans, Arial, sans-serif
  • Line-height: 1.2rem
  • Color: kh--dark-gray
  • Text-decoration: underline
 
 

 

Action Links

Used to indicate secondary action (compared to action buttons) across Koneksa Compare Application.

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9rem
  • Line-height: 1.2rem
  • Color: kh--plum
 

Hover, onClick state

  • Text-decoration: underline
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 0.9 rem
  • Line-height: 1.2rem
  • Color: kh--dark-gray
 
 

 

Action Links
(mobile, tablet)

  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1rem
  • Line-height: 1.6rem
  • Color: kh--plum
 

onTap state

  • Text-decoration: underline
  • Font-family: Open Sans, Arial, sans-serif
  • Font-size: 1rem
  • Line-height: 1.6rem
  • Color: kh--dark-gray