Trail Card

Cards 376

About

Trail Card A visually polished card component to display trail or location information, featuring a prominent image, key stats, and an interactive call-to-action. It includes a subtle hover animation for a modern feel.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Trail Card to your project and fits it to your theme.

Code

How Trail Card is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

// demo.tsx
import { TrailCard } from "@/components/ui/trail-card";

export default function TrailCardDemo() {
  return (
    <div className="flex min-h-screen items-center justify-center bg-background p-4">
      <TrailCard
        title="Embercrest Ridge"
        location="Silverpine Mountains"
        difficulty="Hard"
        creators="1886 by Helen Rowe & Elias Mendez"
        distance="12.4km"
        elevation="870m"
        duration="4h 45m"
        // Using a placeholder image service for demonstration
        imageUrl="https://cdn.21st.dev/assets/mirror/5c/5c94637fd7e76954b66898cf5f8ec3f5a7aec24e1fe09940e5edd56234032a32.jpg"
        // A placeholder for the map SVG/image
        mapImageUrl="https://www.thiings.co/_next/image?url=https%3A%2F%2Flftz25oez4aqbxpq.public.blob.vercel-storage.com%2Fimage-3JYNLpogg5zknunPABpdOpEjJmZN5R.png&w=320&q=75"
        onDirectionsClick={() => alert("Directions clicked!")}
      />
    </div>
  );
}