Props
| Prop | Type | Default | Notes |
|---|---|---|---|
flipped | boolean | false | |
orientation | horizontal | vertical | horizontal |
StellarUI
<stellar-flip-card>
Two-sided surface that flips between front and back content, following the component's slot-based card contract with page-level Datastar state.
Properties
Preview
Meowy McGee
Freedom is just another word for nothing left to lose.
Editable details
Flip cards work well when the front summarizes and the back reveals actions or supdocs detail.
Markup
<stellar-flip-card>
<div slot="front">Front content</div>
<div slot="back">Back content</div>
</stellar-flip-card>API
Complete props, events, slots, and implementation notes for the shipped flip-card surface.
Events
| Event | Source | Notes |
|---|---|---|
change | host | Emitted after flipped changes so data-bind:flipped__prop.flipped__event.change can re-read the live prop. |
Slots
| Slot | Notes |
|---|---|
front | Content shown on the front face. |
back | Content shown on the reverse face. |
Notes
- The public tag is `stellar-flip-card`, mirroring the component's two-slot front/back contract instead of introducing nested helper elements.
- `flipped` and `orientation` are the full prop surface.
- Drive `flipped` from page state with Datastar bindings such as `data-bind:flipped__prop.flipped__event.change` and update that state from surrounding controls.
- The host emits a normal `change` event after `flipped` changes so Datastar can re-read the live prop with standard custom-element bind semantics.
- If the newly visible side contains an `autofocus` element, the component moves focus there after the flip begins.