Layered Editorial
Typography, media and caption planes overlap with shallow depth while reading in a sensible order.
- editorial
- editorial
- layers
- typography
- 2.5d
A room for ideas
A layered editorial composition keeps the headline readable while the image, annotation and quiet background occupy their own planes.
Field note / 06
The image stays legible at rest. Depth is an invitation, not a requirement.
Usage
usage
import { LayeredEditorial } from "@pinky-ui/layouts";
<LayeredEditorial title="A softer archive" media={<Cover />} foreground={<Badge />} />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| media | ReactNode | — | The main visual plane that can move slightly toward the viewer. |
| className | string | — | Styles the outer layout surface. |
| disabled | boolean | false | Keeps the content and interaction while removing spatial choreography. |
Accessibility
- The title and description render before decorative overlap layers.
- Text remains selectable and is never communicated only through z-depth.
- Focus and pointer activate the same restrained depth response.
Performance
- A fixed number of CSS layers; no canvas or filter stack.
- Motion is transform-only and disabled cleanly for reduced motion.
Reduced motion
Renders the same collection in a readable flat arrangement with no spatial transition.
When to use
- Feature openings, editorial covers and one-off campaign compositions.
When not to use
- Repeated card collections or text-dense documentation.
Skill
Purpose
Use for one feature composition where typography, media and a caption occupy shallow visual depth planes.
Use when
- A hero or editorial cover needs one memorable relationship between type and image.
- The title and description can remain the primary reading path.
Avoid when
- Repeating it across a dense collection.
- Making text selectable or legible only through z-index.
Interaction
Pointer and focus may move the active media plane a few pixels forward and nudge the type plane. Keep the perspective shallow and the copy stationary enough to read.
Accessibility and performance
Render semantic text before decorative overlap layers. Flatten on mobile and reduced motion. Use a fixed number of CSS layers, not canvas or filters.