Rail 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.

Responsive behavior

• 264 by 410 px on Web, with a 256 by 320 px scene.
• 240 by 380 px on Mobile, with a 232 by 290 px scene, and larger title and price.
• Scenes keep their paper tones in Light and Dark.

Performance

• Scenes are inline SVG, so a rail loads no image files by default.
• The save pop runs on the heart with a transform, and only when the state changes.
• Loading renders only a skeleton of the same height, not the card.

• Import RailCard, RailCardScene and RAIL_TRIPS from @/components/fetaui/rail-card.
• location, details, price and nights are required strings. href makes it a link, through the title.
• image swaps the scene for a photo, and renders with empty alt because the title names it.
• Connect saved and onSavedChange to your data, since the heart only keeps local state. The rail itself is yours to build. Composes Card, Badge, Icon Button and Skeleton.