taste-skill / Components / Mintlify Cards

Mintlify Card Component Styles

4 Mintlify card containers extracted from mintlify.com: backgrounds, 23.4654px 23.4654px 0px 0px/12px/6px radii, borders and shadows, rendered live with CSS and Tailwind code.

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

Rendered on the Mintlify canvas

Card 1

radius 23.4654px 23.4654px 0px 0px · padding 0px 0px

Card 2

radius 12px · padding 32px 32px

Card 3

radius 6px · padding 16px 16px

Card 4

radius 12px · padding 0px 0px

Card specs

#	Background	Border	Radius	Padding	Shadow
1	`transparent`	`1px solid rgba(26, 166, 128, 0.08)`	`23.4654px 23.4654px 0px 0px`	`0px 0px`	`none`
2	`#F9F6F3`	`1px solid rgba(14, 14, 14, 0.07)`	`12px`	`32px 32px`	`none`
3	`#FAF8F5`	`1px solid rgba(0, 0, 0, 0.04)`	`6px`	`16px 16px`	`none`
4	`transparent`	`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, oklab(0 0 0 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px`

Copy-paste code

Card 1

.card-mintlify-1 {
  background:transparent;
  border:1px solid rgba(26, 166, 128, 0.08);
  border-radius:23.4654px 23.4654px 0px 0px;
  padding:20px;
}

Card 2

.card-mintlify-2 {
  background:#F9F6F3;
  border:1px solid rgba(14, 14, 14, 0.07);
  border-radius:12px;
  padding:32px 32px;
}

Card 3

.card-mintlify-3 {
  background:#FAF8F5;
  border:1px solid rgba(0, 0, 0, 0.04);
  border-radius:6px;
  padding:16px 16px;
}

Card 4

.card-mintlify-4 {
  background:transparent;
  border:1px solid #F1F0EE;
  border-radius:12px;
  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, oklab(0 0 0 / 0.02) 0px 0px 0px 1px inset, rgba(0, 0, 0, 0) 0px 0px 0px 0px;
}

More Mintlify

Mintlify full token spec Mintlify style guide Mintlify Buttons Mintlify Pricing Table Resend vs Mintlify Mintlify vs Loops Mintlify vs PostHog

Same component, other brands

Linear Cards Stripe Cards Resend Cards Vercel Cards Supabase Cards Raycast Cards Cursor Cards Clerk Cards Cal.com 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 →