Slide In Card
Beautifully designed Slide In Card with Tailwind CSS and Framer Motion. Copy, paste, and customize to enhance your web projects effortlessly.
Card Profile
Installation
Run the following command:
npx gopx-webui add slide-in-cardProps
| Prop | Type | Required | Description |
|---|---|---|---|
| item | SlideInItem | Yes | An object containing the details of the item to be displayed in the card. |
| isActive | boolean | Yes | A boolean indicating whether the card is currently active (expanded). |
| onClick | () => void | Yes | A function to be called when the card is clicked. |
SlideInItem Interface
| Property | Type | Required | Description |
|---|---|---|---|
| name | string | Yes | The name or title of the item. |
| desc | string | Yes | A brief description of the item. |
| imgUrl | string | Yes | The URL of the image to be displayed. |
| date | string | Yes | The date associated with the item. |
| loc | string | Yes | The location associated with the item. |
| shotOn | string | Yes | Information about the camera or device used for shot. |