taste-skill / Components / Attio Cards

Attio Card Component Styles

8 Attio card containers extracted from attio.com: backgrounds, 16px/12px/14px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Attio canvas

Card 1

radius 16px · padding 0px 6px

Card 2

radius 12px · padding 0px 0px

Card 3

radius 14px · padding 0px 0px

Card 4

radius 14px · padding 2px 2px

Card 5

radius 16px · padding 0px 6px

Card 6

radius 12px · padding 0px 0px

Card 7

radius 12px · padding 0px 0px

Card 8

radius 14px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`#F3F4F6`	`none`	`16px`	`0px 6px`	`rgba(11, 13, 24, 0.06) 0px 0px 0px 1px, rgba(11, 13, 24, 0.024) 0px 1px 2px 0px, rgba(11, 13, 24, 0.03) 0px 3px 6px 0px, rgba(11, 13, 24, 0.035) 0px 8px 14px 0px, rgba(11, 13, 24, 0.04) 0px 16px 28px 0px`
2	`#FFFFFF`	`1px solid rgba(0, 0, 0, 0.05)`	`12px`	`0px 0px`	`none`
3	`#FFFFFF`	`1px solid #E5E7EB`	`14px`	`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) 0px 0px 0px 0px, rgba(0, 0, 0, 0.04) 0px 12px 30px 0px`
4	`#FFFFFF`	`none`	`14px`	`2px 2px`	`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.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px`
5	`#000000`	`none`	`16px`	`0px 6px`	`rgba(11, 13, 24, 0.06) 0px 0px 0px 1px, rgba(11, 13, 24, 0.024) 0px 1px 2px 0px, rgba(11, 13, 24, 0.03) 0px 3px 6px 0px, rgba(11, 13, 24, 0.035) 0px 8px 14px 0px, rgba(11, 13, 24, 0.04) 0px 16px 28px 0px`
6	`#101010`	`1px solid rgba(0, 0, 0, 0.05)`	`12px`	`0px 0px`	`none`
7	`#FFFFFF`	`none`	`12px`	`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) 0px 0px 0px 0px, rgba(0, 22, 62, 0.01) 0px 0px 1px 1px, rgba(0, 22, 62, 0.04) 0px 4px 12px -1px, rgba(0, 22, 62, 0.18) 0px 1px 3px -1px`
8	`transparent`	`1px solid #EEEFF1`	`14px`	`0px 0px`	`none`

Copy-paste code

Card 1

.card-attio-1 {
  background:#F3F4F6;
  border:1px solid #E4E7EC;
  border-radius:16px;
  padding:0px 6px;
  box-shadow:rgba(11, 13, 24, 0.06) 0px 0px 0px 1px, rgba(11, 13, 24, 0.024) 0px 1px 2px 0px, rgba(11, 13, 24, 0.03) 0px 3px 6px 0px, rgba(11, 13, 24, 0.035) 0px 8px 14px 0px, rgba(11, 13, 24, 0.04) 0px 16px 28px 0px;
}

Card 2

.card-attio-2 {
  background:#FFFFFF;
  border:1px solid rgba(0, 0, 0, 0.05);
  border-radius:12px;
  padding:20px;
}

Card 3

.card-attio-3 {
  background:#FFFFFF;
  border:1px solid #E5E7EB;
  border-radius:14px;
  padding: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.04) 0px 12px 30px 0px;
}

Card 4

.card-attio-4 {
  background:#FFFFFF;
  border:1px solid #E4E7EC;
  border-radius:14px;
  padding:2px 2px;
  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.06) 0px 1px 2px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px;
}

More Attio

Attio full token spec Attio style guide Attio Buttons Attio Pricing Table Attio vs Notion

Same component, other brands

Linear Cards Stripe Cards Resend Cards Vercel Cards Supabase Cards Raycast Cards Cursor Cards Clerk Cards Mintlify Cards Cal.com Cards Dub Cards Turso Cards

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

See taste-skill Pro →