Interaction design · Portfolio experiment
A component in context
A component spec is easier to read when you can see the behavior for yourself. I built this small demo to explore what happens when the spec and the example live in the same place.
Component specimen
Preview state
Start with the layout
Try the Wide and Compact controls. Both layouts share the same title, description and action. On narrow surfaces, the action moves below the copy so the text has room to wrap.
Make the state visible
Switch between Default, Hover and Focus. The example isolates each state so you can see it without keeping a pointer over the control.