Flip Card Menu
Menu cards that turn over: photo, name and price in front; the description and tag behind.
Controls
<MenuCardFlip />About
The Pro counterpart of menu-teaser.
Use it when
- A few signature items with photos.
Skip it when
- A long menu people scan: use
menu-teaser.
Install
The demo above is live today. Installing Pro items opens with VibeBox Motion Pro; join the waitlist to hear first.
Code
The source is part of VibeBox Motion Pro.
Licensed per seat; it installs with the same shadcn command once Pro opens.
See Pro and join the waitlistContent
Typed slots from schema.ts. Facts (hours, prices, quotes, names) come only from the business; until then they render as fill-ins.
| Slot | Label | Type | Limit | Fact |
|---|---|---|---|---|
| eyebrow | Kicker | text | 32 chars | — |
| heading | Heading | text | 60 chars | — |
| lead | Intro | text | 160 chars | — |
| items | Items | list | up to 12 | — |
| items[].name | Name | text | 48 chars | — |
| items[].description | Description | text | 120 chars | — |
| items[].price | Price | price | 32 chars | Yes, a fill-in until given |
| items[].tag | Tag | text | 16 chars | — |
| items[].media | Image | image | — | — |
| action | Button | action | 24 chars | — |
Variants
Griddefault
grid
Three across on desktop, 4:5 cards.
Compact
compact
Four across, 3:4 cards.
Accessibility and motion
- Keyboard
- Each card is a button; Enter or Space turns it (aria-pressed).
- Screen readers
- Each button is named by the item and its price; the description is read from the front.
- Touch
- Tap turns a card.
- Reduced motion
- The back fades in over the front.
Edge cases and limits
- Prices are facts, fill-ins until given.
Related
Menu Teaser
FreeDishes, products or packages with a line each and prices the business sets, as a menu list or cards.
Menus block · Server
Contact Cards
FreeOne card per way to reach the business (call, visit, message), or a list of rows; facts until given.
Contact block · Server
Glass Bar Header
FreeA sticky glass header with the brand, up to five links, one action and a phone menu that needs no JavaScript.
Headers block · Server