CSS block preview sample

Primary Action
Input Surface
Subtle Surface

Token and spacing effects appear here.

/* 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; }