taste-skill / Components / Cal.com Cards

Cal.com Card Component Styles

2 Cal.com card containers extracted from cal.com: backgrounds, 12px/16px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Cal.com canvas

Card 1

radius 12px · padding 0px 0px

Card 2

radius 16px · padding 24px 24px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`#FFFFFF`	`none`	`12px`	`0px 0px`	`rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px`
2	`#FFFFFF`	`none`	`16px`	`24px 24px`	`rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px`

Copy-paste code

Card 1

.card-cal-1 {
  background:#FFFFFF;
  border:1px solid #E5E5E5;
  border-radius:12px;
  padding:20px;
  box-shadow:rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;
}

Card 2

.card-cal-2 {
  background:#FFFFFF;
  border:1px solid #E5E5E5;
  border-radius:16px;
  padding:24px 24px;
  box-shadow:rgba(36, 36, 36, 0.7) 0px 1px 5px -4px, rgba(36, 36, 36, 0.05) 0px 4px 8px 0px;
}

More Cal.com

Cal.com full token spec Cal.com style guide Cal.com Pricing Table Cal.com vs Notion Cal.com vs Dub Cal.com vs Loops

Same component, other brands

Linear Cards Stripe Cards Resend Cards Vercel Cards Supabase Cards Raycast Cards Cursor Cards Clerk Cards Mintlify Cards Dub Cards Turso Cards Upstash Cards

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

See taste-skill Pro →