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.
| Size | Default | Pills |
|---|---|---|
| large | default | full |
| normal | default | full |
| small | sm | full |
| xsmall | xs | full |
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.
| Size | None | Default | Pills |
|---|---|---|---|
| large | none | default | full |
| medium | none | sm | full |
| small | none | xs | full |
| tiny | none | tn | full |
Badge Radius Rules
Badge use full radius.
| Size | Pills |
|---|---|
| normal | full |
Card Radius Rules
Card use md radius.
| Size | Default |
|---|---|
| normal | md |
Other Radius Rules
Normal size of some component are use none (no-radius) or default radius.
| Size | None | Default |
|---|---|---|
| normal | none | default |
Component Sizing
Avatar
Avatar has 5 size variant, there are xl, lg, md, sm and xs. Default size is md
![Avatar Image](data:image/svg+xml,<svg class="spinner spinner-basic" width="50" height="50" viewBox="0 0 19 19" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><g transform="translate(4.75 4.75) scale(.5)"><rect class="spinner-basic__bar" x="8.125" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="15.1202" y="1.86199" width="2.5" height="6.25" rx="1.25" transform="rotate(45 15.1202 1.86199)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.125s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="18.75" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 18.75 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.250s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="16.888" y="15.1202" width="2.5" height="6.25" rx="1.25" transform="rotate(135 16.888 15.1202)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.375s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.125" y="12.5" width="2.5" height="6.25" rx="1.25" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.500s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.2814" y="10.7008" width="2.5" height="6.25" rx="1.25" transform="rotate(45 6.2814 10.7008)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.625s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="6.25" y="8.125" width="2.5" height="6.25" rx="1.25" transform="rotate(90 6.25 8.125)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.750s" repeatCount="indefinite" /></rect><rect class="spinner-basic__bar" x="8.04917" y="6.2814" width="2.5" height="6.25" rx="1.25" transform="rotate(135 8.04917 6.2814)" fill="currentColor" fill-opacity="60%"><animate attributeName="opacity" values="1;0" keyTimes="0;1" dur="1s" begin="0.875s" repeatCount="indefinite" /></rect></g></svg>)
| Size | Default State |
|---|---|
| Xlarge | |
| Large | |
| Medium | Default |
| Small | |
| Xsmall |
Button
Button has 4 size variant, there are lg, md, sm and xs. Default button size is md
| Size | Default State |
|---|---|
| Large | |
| Medium | Default |
| Small | |
| Xsmall |
Label
Label has 4 size variant, there are lg, md, sm and xs. The default size of label is md
| Size | Default State |
|---|---|
| Large | |
| Medium | Default |
| Small | |
| Xsmall |
Modal Dialog
Modal has 4 different size, namely lg, md, sm and xs. Default modal size is md
| Size | Default State |
|---|---|
| Large | |
| Medium | Default |
| Small | |
| Xsmall |
Input
Input has 4 size variant, there are lg, md, sm and xs. The default size of input is md
| Size | Default State |
|---|---|
| Large | |
| Medium | Default |
| Small | |
| Xsmall |
Box Shadow
| Type | sm | md | lg | xl | 2xl |
|---|---|---|---|---|---|
| Button | v | ||||
| Card | v | v | |||
| Dropdown | v | ||||
| Modal | v | ||||
| Toast | v | ||||
| Tooltip | v | ||||
| Tour | v |
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.
| Name | Value | Component |
|---|---|---|
| z-dropdown | 1020 | Dropdown |
| z-sticky | 1030 | Navbar & Sidebar |
| z-fixed | 1040 | Navbar & Sidebar |
| z-modal | 1050 | Modal & Sheet |
| z-dialog | 1050 | Dialog |
| z-overlay | 1060 | Overlay |
| z-tooltip | 1070 | Tooltip |
| z-tour-backdrop | 1080 | Tour backdrop |
| z-tour | 1085 | Tour |
| z-toast | 1090 | Toast & Popup |