Skip to content

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.

preview
SizeDefaultPills
largedefaultfull
normaldefaultfull
smallsmfull
xsmallxsfull

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.

default
sm
xs
tn
preview
SizeNoneDefaultPills
largenonedefaultfull
mediumnonesmfull
smallnonexsfull
tinynonetnfull

Badge Radius Rules

Badge use full radius.

fullpreview
SizePills
normalfull

Card Radius Rules

Card use md radius.

md
preview
SizeDefault
normalmd

Other Radius Rules

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

SizeNoneDefault
normalnonedefault

Component Sizing

Avatar

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

Avatar Image
Avatar Image
Avatar Image
Avatar Image
Avatar Image
preview
SizeDefault State
Xlarge
Large
MediumDefault
Small
Xsmall

Button

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

preview
SizeDefault State
Large
MediumDefault
Small
Xsmall

Label

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

lg
md
sm
xs
preview
SizeDefault State
Large
MediumDefault
Small
Xsmall

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

SizeDefault State
Large
MediumDefault
Small
Xsmall

Input

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

preview
SizeDefault State
Large
MediumDefault
Small
Xsmall

Box Shadow

Typesmmdlgxl2xl
Buttonv
Cardvv
Dropdownv
Modalv
Toastv
Tooltipv
Tourv

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 is using shadow xl

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.

NameValueComponent
z-dropdown1020Dropdown
z-sticky1030Navbar & Sidebar
z-fixed1040Navbar & Sidebar
z-modal1050Modal & Sheet
z-dialog1050Dialog
z-overlay1060Overlay
z-tooltip1070Tooltip
z-tour-backdrop1080Tour backdrop
z-tour1085Tour
z-toast1090Toast

Released under the MIT License.