GitHub

Image card

Half-Day Trip from the city
Learn about Impressionism with your guide, explore the village and the artist’s tomb, and enjoy free time to wander his iconic house and colorful gardens.

Installation

npx shadcn-animated add image-card

Usage

1
import {
2
  BackImage,
3
  ImageCard,
4
  CardContent,
5
  CardDescription,
6
  CardHeader,
7
  CardTitle,
8
  FrontImage,
9
  ImageArea,
10
} from "@/components/ui/image-card";
1
<ImageCard className="max-w-md">
2
    <ImageArea>
3
        <BackImage>
4
            <img
5
              className="rounded-2xl shadow-xl"
6
              src="https://plus.unsplash.com/premium_photo-1786868126588-39f864726bd9?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHwyfHx8ZW58MHx8fHx8"
7
            />
8
        </BackImage>
9
        <FrontImage>
10
            <img
11
              className="rounded-2xl shadow-xl"
12
              src="https://plus.unsplash.com/premium_photo-1789990372226-2b073696f52b?w=800&auto=format&fit=crop&q=60&ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxmZWF0dXJlZC1waG90b3MtZmVlZHw2fHx8ZW58MHx8fHx8"
13
            />
14
        </FrontImage>
15
    </ImageArea>
16
    <CardContent>
17
        <CardHeader className="text-center">
18
            <CardTitle className="text-2xl">
19
              Half-Day Trip from the city
20
            </CardTitle>
21
            <CardDescription className="text-xl">
22
              Learn about Impressionism with your guide, explore the village and
23
              the artist’s tomb, and enjoy free time to wander his iconic house
24
              and colorful gardens.
25
            </CardDescription>
26
        </CardHeader>
27
    </CardContent>
28
</ImageCard>
29
/>

Next