Finbers EPR UI Library

Introduction

Finbers EPR UI Component Library is a framework agnostic UI library that was built specifically for the EPR mobile app (PWA).

UI Components

• epr-textbox

• epr-textarea

• epr-data-card

• epr-checkbox

• epr-radiobtn

• epr-radiobtn-group

• epr-tabs

• epr-multi-selection

• epr-wizard

CSS Custom Properties

epr-textbox

• --textbox-font-family

• --textbox-font-size

• --textbox-placeholder-font-family

• --textbox-placeholder-font-size

• --input-label-font-family

• --input-label-font-size

• --month-picker-font-family

• --font-family

• --current-date-font-family

• --selected-date-font-family

epr-textarea

• --textarea-font-family

• --textarea-font-size

• --textarea-placeholder-font-family

• --textarea-placeholder-font-size

• --input-label-font-family

• --input-label-font-size

epr-data-card

• --datacard-padding

• --datacard-background-colour

• --datacard-border

• --icon-container-background-colour

• --card-title-font-family

• --card-title-font-size

• --card-title-colour

• --card-text-font-family

• --card-text-font-size

• --card-text-colour

epr-checkbox

• --padding

• --border-radius

• --font-family

• --font-size

epr-radiobtn

• --padding

• --border-radius

• --font-family

• --font-size

epr-radiobtn-group

• --label-text-font-family

• --label-text-font-size

• --input-label-font-family

• --input-label-font-size

• --padding

• --border-radius

epr-tabs

• --tab-font-family

• --tab-font-size

• --tab-padding

epr-multi-selection

• --options-container-padding

• --options-container-border

• --options-container-border-radius

• --label-padding

• --label-border-radius

epr-wizard

• --title-font-family

• --title-font-size

• --title-color

• --title-margin-buttom

• --description-font-family

• --description-font-size

• --description-color

• --step-number-font-family

• --step-number-font-size

• --step-number-color

• --step-number-margin-buttom