`: a paragraph cannot legally hold it. ::component-preview{name="PreviewCardPreview"} ```vue ``` :: ## Usage guidelines ::usage-guidelines ## Anatomy Assemble the parts. `PreviewCard.Content` is one part over three boxes: the teleport, the floating box and the popup. Everything you put inside it renders in the popup. ::component-anatomy --- parts: - name: PreviewCard.Root required: true description: 'Renders nothing of its own. It is the provider.' children: - name: PreviewCard.Trigger required: true description: 'Renders an . The card hangs off it and is positioned against it.' - name: PreviewCard.Backdrop description: 'Optional. Renders a

behind the card.' - name: PreviewCard.Content required: true description: 'Renders the teleport, the floating box and the popup.' children: - name: PreviewCard.Arrow description: 'Optional. Renders a

pointing at the trigger.' --- :: ```vue ``` ## Examples ### Timing `delay.mouseenter` is how long the pointer has to rest on the link before the card opens, `delay.mouseleave` how long it has to be away before it closes again. The leave delay is what lets the pointer travel from the link to the card without the card disappearing under it, so shortening it much below the default makes the card hard to reach. ```vue ``` The trigger takes a `delay` of the same shape, for a single link that wants to behave differently from the rest. A timing it leaves out keeps the value from the options. ```vue ``` ### Positioning `PreviewCard.Content` reads `options.floating` and writes the resolved side and alignment back as `data-side` and `data-align`; read those rather than the options you passed, since flipping can change either one. ```vue ``` Pass `anchor` to position against something else, and pass any of the eight floating keys straight to the content to override the options for one instance. ```vue ``` The content writes `--rack-floating-anchor-width`, `--rack-floating-anchor-height`, `--rack-floating-available-width`, `--rack-floating-available-height` and `--rack-floating-transform-origin` onto the floating box, so an unstyled popup is never taller than the space around the link. Add a `PreviewCard.Arrow` inside the content and it is placed by the same middleware run, against the same anchor. It writes `--rack-arrow-x` and `--rack-arrow-y`, so its own stylesheet can point it the right way per side. ```css .arrow[data-side='bottom'] { top: -6px; rotate: 180deg; } ``` ### Where the card renders The content teleports to the end of ``, which is what keeps a card out of an ancestor’s `overflow: hidden` and above the rest of the page. Turn it off to render in place, or name a target of your own. ```vue ``` Mount a `PreviewCard.Backdrop` for a fixed `

` behind the card. You mount it yourself, anywhere under the root; it teleports into the same container as the popup, appears and disappears with the open state, and runs the transition named by `transition.backdrop` on the way in and out. Out of the box it is fixed, covers the viewport and takes no pointer events, so the pointer can still travel from the link to the popup. `--mirror-preview-card-backdrop-position`, `--mirror-preview-card-backdrop-z-index` and `--mirror-preview-card-backdrop-pointer-events` adjust that. It takes `as` and `asChild`. #### Props ::docs-table --- columns: - label: Prop - label: Type - label: Default rows: - items: - label: forceMount description: Escape hatch over `options.forceMount`. - label: 'boolean | undefined' - label: options.forceMount --- :: #### Slot props ::docs-table --- columns: - label: Prop - label: Type rows: - items: - label: open description: Mirrors `data-state`. - label: boolean --- :: ### `PreviewCard.Arrow` Renders a `