collections
Expandable Content Row
An editorial row expands in document flow to expose media, metadata and secondary content without a modal detour.
- collections
- row
- disclosure
- content
- inline
Editorial/content disclosure with richer inline context than a generic list row.
Live preview
- Media
Expanded context
The row makes room in the document flow.
One active surface, no hidden second page.
- Context
Secondary content
No overlay hides the next item.
One active surface, no hidden second page.
Quick usage
import { ExpandableContentRow } from "@pinky-ui/systems";
<ExpandableContentRow items={items} />Presets
Default
Restrained production behaviour.
Default behaviour
Quiet
Reduced intensity for dense product screens.
disabled={true}
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.
npm install @pinky-ui/systemspnpm add @pinky-ui/systemsyarn add @pinky-ui/systemsnpx pinky-ui add expandable-content-rowPrefer to run the whole repository locally instead?
git clone https://github.com/florash/Pinky-UI.git
cd Pinky-UI
npm install
npm run devProps
| Prop | Type | Default | Description |
|---|---|---|---|
| items | ExpandableContentRowItem[] | — | Content rows with summaries, optional media and inline detail. |
| className | string | — | Styles the outer interaction surface. |
Accessibility
- Keyboard and touch paths match the pointer interaction.
- Stable labels and values remain available without motion.
Performance
- Only open row content mounts; surrounding row order remains stable.
- No document listener or overlay is required.
Reduced motion
Motion resolves immediately while semantics, focus and state remain unchanged.
When to use
- Articles, case studies and feed items with useful secondary context
When not to use
- Structured tables, which should use ExpandableDataRow
Skill
Purpose
Use an inline content row when an editorial or feed item has useful secondary media, metadata and actions that belong to the same row identity. It is richer than a generic disclosure and not a table row.
Interaction anatomy
- A full-width labelled button owns the row state.
- The open region is in normal document flow, so following rows reflow.
- Optional media and content mount inside the row rather than in an overlay.
Good for
Case-study indexes, articles, release notes, messages and content feeds.
Avoid
Structured tables (ExpandableDataRow), long editors or unrelated modal content.
Usage
<ExpandableContentRow items={stories.map((story) => ({
id: story.id,
label: story.title,
summary: story.excerpt,
media: <StoryCover story={story} />,
content: <StoryDetails story={story} />,
}))} />Tune
Choose one-open for a focused reading list or multiple when comparing short entries. Keep the summary useful while closed.
Accessibility and reduced motion
Use aria-expanded and aria-controls on the row button, preserve reading order and keep actions reachable after expansion. Reduced motion removes height travel; the content still opens and closes.