Dashed Border Card
A card outlined with a dashed border for a light, sketch feel. Use it for empty states, upload zones, or placeholders that invite the user to add content.
A card outlined with a dashed border for a light, sketch feel. Use it for empty states, upload zones, or placeholders that invite the user to add content.
Search blocks by description or jump to a page.
Dashed Border Card wraps a standard card in a dashed outline that sits just outside the card surface. The card itself holds a header with a title and short description, a body paragraph, and a footer with two buttons: a cancel action on the left and a primary action on the right. The dashed frame gives the whole unit a hand-drawn, provisional feel without altering the card's interior layout.
Each section is independent. You can rewrite the title, description, and body copy, swap the button labels, or remove the cancel button entirely if the action has no escape path. The dashed outline is the only distinguishing decoration, so the block stays uncluttered no matter what copy you drop in.
Reach for this card on pages where something is being created, uploaded, or confirmed for the first time. The sketched outline signals "not yet real," which makes it a natural fit for empty states, new project prompts, or file drop zones on a creative agency or studio site. It reads as an invitation rather than a finished object, so it works better here than a solid-border card when you want the user to feel they are filling in a blank.
A natural flow around it on a Components page:
Before
After
The frame suits any moment where a card represents something the user is about to create or upload rather than something that already exists:
Tip: keep the body copy to two or three short lines so the dashed frame stays visible and the card reads as a lightweight prompt, not a form.