Layout — Should Pass
All patterns here are legitimate. None should be flagged.
shadcn Card Sub-Components
Card Title
Card description goes here.
This is CardContent — a sub-section, not a nested card. No shadow, no border-radius of its own.
Card with Form Inputs
Card with Dropdown
Select Plan
Choose your subscription tier.
Card with Code Block
Installation
npm install @acme/sdk
Card with Badges
Tags
React
TypeScript
Tailwind
Card with Accordion
How does billing work?
+
Can I cancel anytime?
+
Do you offer refunds?
+
Card with Styled Image
Project Preview
Image placeholder with rounded corners and shadow.
Card with Tabs
Tab content area — structured content inside a card, not a nested card.
Pricing Cards (Intentionally Similar)
Free
$0
- 5 projects
- 1 GB storage
- Community support
Pro
$29
- Unlimited projects
- 50 GB storage
- Priority support
Enterprise
Custom
- Everything in Pro
- Unlimited storage
- Dedicated support
Varied Spacing (Good Rhythm)
Heading with tight spacing
Body text with medium spacing below.
Nested content with different padding.
Another section
Different padding than above — intentional rhythm.
Centered Hero (Legitimate)
Hero Heading
A centered hero section is fine — it's the rest of the page that shouldn't all be centered too.
Features
This content is left-aligned, creating contrast with the centered hero above.
- Left-aligned list items
- Natural reading direction
- Intentional layout variety
Grid with Varied Card Structures
Featured Item
This card spans the full width — different from the others.
Compact Card
Smaller, less padding.
Highlighted
Different bg, no shadow — visual variety.