HomeSpacing & Sizing
Preview
css
Primary
Secondary
Ghost
Delete
Code
css
/* Button padding */
.btn-xs  { padding: 0.25rem 0.625rem; }
.btn-sm  { padding: 0.375rem 0.875rem; }
.btn-md  { padding: 0.5rem 1.25rem; }   /* default */
.btn-lg  { padding: 0.75rem 1.75rem; }

/* Kart padding */
.card-sm { padding: 1rem; }
.card-md { padding: 1.5rem; }
.card-lg { padding: 2rem; }

/* Input padding */
.input-sm { padding: 0.375rem 0.625rem; }
.input-md { padding: 0.5rem 0.875rem; }
.input-lg { padding: 0.75rem 1.125rem; }
Related Blocks
css
4px Base Grid
Spacing system based on multiples of 4px.
css
Responsive Spacing
Spacing values that adapt to screen size.
css
T-Shirt Sizes
xs/sm/md/lg/xl/2xl size scale.