Skip to content
Pinky UI

mobile

Expand-in-Place Card

A compact card expands inside the same document flow so content below reflows around the selected source.

  • mobile
  • cards
  • expand
  • reflow
Related pattern

The selected object remains the reading anchor; this is not a modal or a hidden detail route.

Live preview

The detail belongs directly below the source, so the reader never loses the item they opened.

This card owns its own extra reading room without becoming a modal or route detour.

Quick usage

usage
import { ExpandInPlaceCard } from "@pinky-ui/systems";

<ExpandInPlaceCard items={items} />

Install

Add @pinky-ui/systems as a dependency, or use the CLI to copy this component's source directly into your project — no dependency to manage, fully editable.

shell
npm install @pinky-ui/systems

Prefer to run the whole repository locally instead?

repository
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run dev

Accessibility

  • Every gesture has a labelled button or keyboard path, and primary controls meet a 44px touch target.
  • State remains readable without relying on colour or motion.

Performance

  • Interaction state is local and bounded; gesture updates do not require a page-wide render loop.
  • Timers and listeners are cleaned up on unmount.

Reduced motion

The same state change resolves immediately; travel, scale and spring motion are removed without removing the interaction.

When to use

  • Touch-first product surfaces where the next action should stay close to the hand.

When not to use

  • Desktop-only workflows or interactions whose gesture would hide the only available action.

Skill

Purpose

Expand-in-Place Card opens additional reading room directly below the selected card. The source remains in the document flow and later content reflows instead of disappearing behind a modal.

Use when

  • Each card has a short optional detail.
  • The selected source should remain the reading anchor.

Interaction

Tap a card to expand it, read the detail and tap again to collapse. aria-expanded describes the open state.

Accessibility

Use a real button for the disclosure and keep the expanded content immediately after it in DOM order. Do not hide the summary when open.

Reduced motion

Insert and remove the detail region immediately without height animation.

Tune

  • Keep the expanded content focused and short.
  • Use a route or lightbox when the detail is a full reading experience.
Open this skill on its own page