Driftwood Travel Content Grid
A magazine-style content grid designed for travel and editorial platforms.
Features
- Asymmetric grid — Large featured card alongside smaller cards in a masonry-like layout
- CSS gradient destinations — Rich color gradients simulate travel photography
- Category badges — Visual tags for Culture, Adventure, Coastal, etc.
- Read time indicators — Clock icon with estimated reading duration
- Location pins — MapPin icon with destination names
- Hover zoom — Gradient backgrounds scale up smoothly on hover
- Editorial quote — Bottom quotation for storytelling tone
- Cormorant Garamond + Outfit — Elegant serif headings with clean sans body
- Light/dark mode — Full WCAG AA contrast support
Dependencies
lucide-vue-next — MapPin, Clock, Compass, Plane, Sun, Mountain icons@/components/vue-ui/card — Shadcn-Vue Card@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/button — Shadcn-Vue Button@/components/vue-ui/separator — Shadcn-Vue Separator
Customization
- Destinations: Modify the
destinations array with your own content
- Gradients: Change CSS gradient values to match your travel imagery style
- Layout: Adjust grid column spans for different aspect ratios
- Quote: Swap the bottom editorial quote for your brand tagline
