Folder Pocket is a semantic button with three visual layers: a back shell, a document stack, and a front pocket. Interaction is driven entirely by hover, focus, and active selectors.
01 / Setup
Installation
Copy the component stylesheet into your project and load it on the page.
<link rel="stylesheet" href="/folder.css" />
02 / Anatomy
Usage
The class structure is deliberate. Preserve these layers, then customize the labels and theme variables.
- Use a button so keyboard users receive the same focused opening state.
- Keep the papers inside
.folder__papersto preserve the 3D stacking order. - Choose a material class, or override the color variables on your own modifier.
03 / Contract
CSS API
The public surface is small enough to copy and remix without a build-time abstraction.
| Token / selector | Default | Purpose |
|---|---|---|
--folder-width | clamp(14rem, 25vw, 22rem) | Controls the component scale; height follows automatically. |
.folder--amber | Amber | Warm orange material and matching focus ring. |
.folder--graphite | Graphite | Near-black material with light labels. |
.folder--pearl | Pearl | Soft white material with dark labels. |
:hover / :focus / :active | Enabled | Shares the same opening motion across pointer and keyboard input. |
04 / Behavior
Accessibility
The preview uses a native button, exposes the selected material with
aria-pressed, includes a visible focus ring, and short-circuits transitions
when the user requests reduced motion.