taste-skill / Components / WorkOS Cards

WorkOS Card Component Styles

3 WorkOS card containers extracted from workos.com: backgrounds, 46px 46px 0px 0px/8px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the WorkOS canvas

Card 1

radius 46px 46px 0px 0px · padding 0px 0px

Card 2

radius 8px · padding 0px 0px

Card 3

radius 8px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`transparent`	`7px solid #F0F0F5`	`46px 46px 0px 0px`	`0px 0px`	`none`
2	`transparent`	`none`	`8px`	`0px 0px`	`rgba(38, 33, 84, 0.02) 0px 91px 183px 0px, rgba(38, 33, 84, 0.027) 0px 38.0176px 76.453px 0px, rgba(38, 33, 84, 0.035) 0px 20.326px 40.8754px 0px, rgba(38, 33, 84, 0.043) 0px 11.3946px 22.9144px 0px, rgba(38, 33, 84, 0.05) 0px 6.05159px 12.1697px 0px, rgba(38, 33, 84, 0.07) 0px 2.5182px 5.06408px 0px`
3	`#FFFFFF`	`none`	`8px`	`0px 0px`	`rgba(17, 7, 53, 0.05) 0px 51px 78px 0px, rgba(17, 7, 53, 0.035) 0px 21.3066px 35.4944px 0px, rgba(17, 7, 53, 0.03) 0px 11.3915px 18.9418px 0px, rgba(17, 7, 53, 0.024) 0px 6.38599px 9.8801px 0px, rgba(17, 7, 53, 0.02) 0px 3.39155px 4.58665px 0px, rgba(17, 7, 53, 0.016) 0px 1.4113px 1.55262px 0px, rgba(41, 56, 78, 0.05) 0px 1px 0px 0px inset`

Copy-paste code

Card 1

.card-workos-1 {
  background:transparent;
  border:7px solid #F0F0F5;
  border-radius:46px 46px 0px 0px;
  padding:20px;
}

Card 2

.card-workos-2 {
  background:transparent;
  border:1px solid #E8EAED;
  border-radius:8px;
  padding:20px;
  box-shadow:rgba(38, 33, 84, 0.02) 0px 91px 183px 0px, rgba(38, 33, 84, 0.027) 0px 38.0176px 76.453px 0px, rgba(38, 33, 84, 0.035) 0px 20.326px 40.8754px 0px, rgba(38, 33, 84, 0.043) 0px 11.3946px 22.9144px 0px, rgba(38, 33, 84, 0.05) 0px 6.05159px 12.1697px 0px, rgba(38, 33, 84, 0.07) 0px 2.5182px 5.06408px 0px;
}

Card 3

.card-workos-3 {
  background:#FFFFFF;
  border:1px solid #E8EAED;
  border-radius:8px;
  padding:20px;
  box-shadow:rgba(17, 7, 53, 0.05) 0px 51px 78px 0px, rgba(17, 7, 53, 0.035) 0px 21.3066px 35.4944px 0px, rgba(17, 7, 53, 0.03) 0px 11.3915px 18.9418px 0px, rgba(17, 7, 53, 0.024) 0px 6.38599px 9.8801px 0px, rgba(17, 7, 53, 0.02) 0px 3.39155px 4.58665px 0px, rgba(17, 7, 53, 0.016) 0px 1.4113px 1.55262px 0px, rgba(41, 56, 78, 0.05) 0px 1px 0px 0px inset;
}

More WorkOS

WorkOS full token spec WorkOS style guide WorkOS Buttons WorkOS Pricing Table Clerk vs WorkOS Stripe vs WorkOS

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 →