taste-skill / Components / Vercel Cards

Vercel Card Component Styles

2 Vercel card containers extracted from vercel.com: backgrounds, 6px/4px radii, borders and shadows, rendered live with CSS and Tailwind code.

Source: computed styles extracted from https://vercel.com on 2026-10-26 by the taste-skill extractor. Brand fonts may be proprietary; previews fall back to Inter / system fonts. Vercel is a trademark of its owner; this page documents publicly visible styling for reference and is not affiliated with Vercel.

Rendered on the Vercel canvas

Card 1

radius 6px · padding 20px 20px

Card 2

radius 4px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`#FAFAFA`	`none`	`6px`	`20px 20px`	`rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px`
2	`transparent`	`1px solid #F2F2F2`	`4px`	`0px 0px`	`none`

Copy-paste code

Card 1

.card-vercel-1 {
  background:#FAFAFA;
  border:1px solid #EBEBEB;
  border-radius:6px;
  padding:20px 20px;
  box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px, rgb(250, 250, 250) 0px 0px 0px 1px;
}

Card 2

.card-vercel-2 {
  background:transparent;
  border:1px solid #F2F2F2;
  border-radius:4px;
  padding:20px;
}

Get all 30 full SKILL.md specs (Cursor / Claude Code / Codex ready) plus the Pro growth skills.

See taste-skill Pro →

Vercel Card Component Styles

Rendered on the Vercel canvas

Card specs

Copy-paste code

More Vercel

Same component, other brands