Botanical Travel Content Grid
A nature-inspired content grid block for travel and tourism landing pages.
Features
- Botanical aesthetic — Sage green palette with decorative leaf SVG patterns
- Google Fonts: Cormorant Garamond + Nunito — Elegant serif headings, friendly body
- 6 destination cards — 3-column responsive grid with location pins
- Color-coded tags — Adventure (emerald), Cultural (amber), Relaxation (sky)
- Light/dark mode — Pale sage #f5f7f2 light, deep forest #141e14 dark
- Accessible contrast — All text meets WCAG AA 4.5:1 minimum
Dependencies
@/components/vue-ui/badge — Shadcn-Vue Badge@/components/vue-ui/card — Shadcn-Vue Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter@/components/vue-ui/button — Shadcn-Vue Buttonlucide-vue-next — MapPin, ArrowRight icons
Customization
- Destinations: Replace the 6 cards with your own travel content
- Tags: Add new tag types with custom color classes
- Font: Swap Cormorant Garamond for another serif like Lora or Merriweather
