taste-skill / Components / ElevenLabs Cards

ElevenLabs Card Component Styles

4 ElevenLabs card containers extracted from elevenlabs.io: backgrounds, 16px/9999px/12px 12px 0px 0px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the ElevenLabs canvas

Card 1

radius 16px · padding 0px 0px

Card 2

radius 9999px · padding 0px 0px

Card 3

radius 12px 12px 0px 0px · padding 0px 0px

Card 4

radius 16px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`transparent`	`none`	`16px`	`0px 0px`	`rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
2	`transparent`	`none`	`9999px`	`0px 0px`	`rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`
3	`transparent`	`1px solid rgba(0, 0, 0, 0.07)`	`12px 12px 0px 0px`	`0px 0px`	`none`
4	`#FFFFFF`	`none`	`16px`	`0px 0px`	`rgb(255, 255, 255) 0px 0px 0px 0px inset, rgb(235, 232, 228) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`

Copy-paste code

Card 1

.card-elevenlabs-1 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.07);
  border-radius:16px;
  padding:20px;
  box-shadow:rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.075) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

Card 2

.card-elevenlabs-2 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.07);
  border-radius:9999px;
  padding:20px;
  box-shadow:rgb(255, 255, 255) 0px 0px 0px 0px inset, rgba(0, 0, 0, 0.1) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

Card 3

.card-elevenlabs-3 {
  background:transparent;
  border:1px solid rgba(0, 0, 0, 0.07);
  border-radius:12px 12px 0px 0px;
  padding:20px;
}

Card 4

.card-elevenlabs-4 {
  background:#FFFFFF;
  border:1px solid rgba(0, 0, 0, 0.07);
  border-radius:16px;
  padding:20px;
  box-shadow:rgb(255, 255, 255) 0px 0px 0px 0px inset, rgb(235, 232, 228) 0px 0px 0px 0.5px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

More ElevenLabs

ElevenLabs full token spec ElevenLabs style guide ElevenLabs Buttons ElevenLabs Pricing Table Anthropic vs ElevenLabs

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 →