Default Card
Background: sand-50, border: sand-200. Hover effect enabled by default.
UI Component Library
Buttons
Cards
Elevated Card
White background with shadow-soft-lg. Perfect for prominently featured content.
Flat Card
sand-100 background, no hover effect. Great for static information blocks.
Small padding (p-4)
Large padding (p-8)
Badges
Variants
Research Tutorial Dev Log
Sizes
Small Badge Medium Badge
In Context
Featured
Blog Post Title
Badges work great as category indicators or status labels in card components.
Container
The Container component provides consistent max-width and horizontal padding. Current max-width: 7xl (default).
Available widths:
7xl 8xl 9xl full Complete Example: Blog Card
Research
Building Type-Safe APIs with FastAPI
A comprehensive guide to leveraging Python's type hints for automatic validation, serialization, and OpenAPI documentation generation.
ยท 12 min read