---
name: building-tour-cards
description: Guidelines for the Tour Card UI, the primary item in the tour grid. Use when building the tour browsing interface.
---

# Tour Card UI Component

## When to use this skill
- Building the travel catalog.
- Implementing "Featured Tours" on the homepage.

## Design Specs
- **Image**: Aspect ratio 4:3, rounded corners.
- **Content**:
    - Right: Rating (Star icon + number).
    - Top: Title (Bold, 1.1rem).
    - Subtitle: Location (Muted text + pin icon).
    - Bottom: Price (Prominent, e.g., "$299/person").
- **Hover**: Subtle lift/shadow effect.

## Instructions
- **Accessibility**: Use semantic tags (`article`, `h3`).
- **Performance**: Use `next/image` for optimized tour images.