# <motion-flip-card>

Two-sided card that flips between a `front` and `back` slot with spring
physics. Trigger on hover or click; choose the rotation axis.

**Use it for:** a short teaser on the front with a few lines of detail on
the back, such as a team member card or a flash card.

**Avoid it for:** information that people must not miss, because the back
stays hidden until the card flips. For a simple lift on hover, use
`motion-hover`.

**Accessibility:** with `trigger="click"` the card gets `role="button"` and
`tabindex="0"`, and Enter or Space flips it. With the default
`trigger="hover"` it reacts only to the pointer, so keyboard users cannot
flip it. Both faces stay in the page, so screen readers read the front and
the back at any time. A click card reports its face with `aria-pressed`.

**Reduced motion:** the card shows the other face at once, with no
rotation.

**Common mistakes:** leaving the card without a size; both faces are
positioned on top of each other, so the card has no height of its own. Set
a CSS width and height on `motion-flip-card`. Putting links or buttons
inside a `trigger="click"` card; they sit inside a button, and a click on
them also flips the card.

Docs: https://www.motion-components.dev/docs/components/motion-flip-card/

## Install

```js
import 'motion-components/motion-flip-card'
```

Or without a build step:

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/motion-components@1/dist/motion-flip-card.js/+esm"></script>
```

## Example

```html
<motion-flip-card trigger="click" axis="y">
  <div slot="front" class="card">Tap me</div>
  <div slot="back"  class="card">Hello, back side.</div>
</motion-flip-card>
```

## Attributes

| Attribute | Type | Default | Description |
| --- | --- | --- | --- |
| `trigger` | `'hover' \| 'click'` | `'hover'` | What flips the card: `'hover'` or `'click'`. |
| `axis` | `'x' \| 'y'` | `'y'` | Rotation axis: `'y'` (around vertical) or `'x'` (around horizontal). |
| `duration` | `number` | `0.7` | Spring duration of the flip, in seconds. |
| `bounce` | `number` | `0.2` | Spring bounciness (0 = critically damped, higher = more elastic). |
| `perspective` | `number` | `1000` | CSS perspective applied to the host, in pixels. |
| `flipped` | `boolean` | `false` | Whether the back is showing. Setting it turns the card without firing `motion-change`. |

## Methods

| Method | Description |
| --- | --- |
| `flip()` | Turns the card to its other face and fires `motion-change`. |

## Events

The `motion-*` events bubble and are composed.

| Event | Description |
| --- | --- |
| `motion-change` | When a hover, click, key or `flip()` turns the card. `detail: { flipped }`. |

## Slots

| Slot | Description |
| --- | --- |
| `front` | The face shown at rest. |
| `back` | The face revealed after flipping. |