Space
.custom-grid {
gap: var(--amplify-space-xxl);
}
.custom-view {
padding: var(--amplify-space-medium);
}
zero
--amplify-space-zero
0
xxxs
--amplify-space-xxxs
0.25rem
xxs
--amplify-space-xxs
0.375rem
xs
--amplify-space-xs
0.5rem
small
--amplify-space-small
0.75rem
medium
--amplify-space-medium
1rem
large
--amplify-space-large
1.5rem
xl
--amplify-space-xl
2.0rem
xxl
--amplify-space-xxl
3.0rem
xxxl
--amplify-space-xxxl
4.5rem
relative.xxxs
--amplify-space-relative-xxxs
0.25em
relative.xxs
--amplify-space-relative-xxs
0.375em
relative.xs
--amplify-space-relative-xs
0.5em
relative.small
--amplify-space-relative-small
0.75em
relative.medium
--amplify-space-relative-medium
1em
relative.large
--amplify-space-relative-large
1.5em
relative.xl
--amplify-space-relative-xl
2.0em
relative.xxl
--amplify-space-relative-xxl
3.0em
relative.xxxl
--amplify-space-relative-xxxl
4.5em
relative.full
--amplify-space-relative-full
100%
Border Widths
.custom-button {
border-width: var(--amplify-border-widths-large);
}
small
--amplify-border-widths-small
1px
medium
--amplify-border-widths-medium
2px
large
--amplify-border-widths-large
3px
Radii
.custom-card {
border-radius: var(--amplify-radii-xxxl);
}
xs
--amplify-radii-xs
0.125rem
small
--amplify-radii-small
0.25rem
medium
--amplify-radii-medium
0.5rem
large
--amplify-radii-large
1rem
xl
--amplify-radii-xl
2rem
xxl
--amplify-radii-xxl
4rem
xxxl
--amplify-radii-xxxl
8rem