Variables ​

Table-list regarding the use of foundation

Radius ​

Button Radius Rules ​

Button has 3 radius variant. default radius is used for button size lg and md. sm radius is used for button size sm and xs radius is for button size xs.

Label Radius Rules ​

Label has 4 radius variant. default radius is used form label size lg, sm radius is used for label size md, xs radius is used for label size sm and tn radius is for label size tn.

Badge Radius Rules ​

Badge use full radius.

Card Radius Rules ​

Card use md radius.

Other Radius Rules ​

Normal size of some component are use none (no-radius) or default radius.

Component Sizing ​

Avatar ​

Avatar has 5 size variant, there are xl, lg, md, sm and xs. Default size is md

preview

Button ​

Button has 4 size variant, there are lg, md, sm and xs. Default button size is md

Label ​

Label has 4 size variant, there are lg, md, sm and xs. The default size of label is md

Modal Dialog ​

Modal has 4 different size, namely lg, md, sm and xs. Default modal size is md

Input ​

Input has 4 size variant, there are lg, md, sm and xs. The default size of input is md

Box Shadow ​

Button ​

Button is using shadow lg for hover state.

Card ​

Default Card is no-shadow, then in callout variant is using shadow sm. Card in Calendar is using shadow xl.

Dropdown ​

Dropdown is using shadow xl

Modal ​

Modal use shadow 2xl

Toast ​

Toast is using shadow xl

Tooltip ​

Tooltip use shadow sm

Tour ​

Tour is using shadow sm

Z-Index ​

Some components that have fixed and absolute positions are given z-index values to sort their layer hierarchies.