# Rail Card

A trip card for horizontal rails: a scene, a nights tag, a heart that saves, then title, place, rating and the total.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/rail-card
```

## Usage

```tsx
import { RailCard } from '@/components/fetaui/rail-card'

export function Example() {
  return (
    <RailCard
      trip="Weekend in Lisbon"
      location="Lisbon, Portugal"
      details="4.92 (318) · Oct 24 – 26"
      price="€340 total"
      nights="2 nights"
      href="/trips/lisbon"
    />
  )
}
```

## API

| Prop | Type | Default |
|---|---|---|
| trip | one of the 8 RAIL_TRIPS | Weekend in Lisbon |
| title | string | the trip |
| location | string | required |
| details | string | required |
| price | string | required |
| nights | string | required |
| href | string |  |
| image | string |  |
| saved | boolean |  |
| defaultSaved | boolean | false |
| onSavedChange | (saved) => void |  |
| loading | boolean | false |
| hovered | boolean | false |
| animated | boolean | true |
| RailCardScene | trip, alt, className |  |

## When to use

- For browsing a short set where the picture helps someone choose.
- In a horizontal rail, several at a time.

## When not to use

- For a dense list of results: use Item.
- When there is no picture: use Card.

## Accessibility

- The card is a link on the title stretched over it.
- The heart is a separate toggle button with aria-pressed.
- Loading is a status named Loading trip.
- Scenes are decorative unless `alt` is passed.

## Motion

- Hover deepens the tray and lifts the card 1 px.
- Save turns the heart Primary and pops it 1 to 1.2 to 1 in 300 ms.
- The skeleton shimmers, and pauses offscreen.
- With reduced motion, the heart swaps and the skeleton stays still.