Elevation Cards

Compare border-only, soft-shadow, and hairline-plus-shadow cards.

Three elevation systems

Pick one system for a product UI. Mixing all three on one screen usually looks inconsistent.

Border only

Hairline edge, no shadow. Common in TailAdmin and Phoenix.

Soft shadow

No border, light lift. Closer to Spark admin cards.

Hairline + shadow

Thin border plus whisper shadow. Close to Shadcn cards.

Radius scale

Controls stay tighter than cards. Keep one ladder across the UI.

6px
8px
16px
24px

Important pattern

Elevation is presentation. Prefer shared classes over one-off shadows.

.card-border { border: 1px solid var(--line); }
.card-soft { box-shadow: var(--shadow-soft); }
.card-hairline { border: 1px solid var(--line); box-shadow: var(--shadow-sm); }