Double Border Card
A card wrapped in two stacked outlines for a framed, formal look. Use it for certificates, awards, or quotes that deserve emphasis on the page.
A card wrapped in two stacked outlines for a framed, formal look. Use it for certificates, awards, or quotes that deserve emphasis on the page.
Search blocks by description or jump to a page.
Double Border Card wraps a standard card in two concentric outlines. An outer ring sits at the full container edge, a second ring insets a few pixels inside it, and the card body lives at the center. The card carries a title, a short description, a paragraph of body text, and a footer row with Cancel and Deploy buttons.
All of the copy inside is independent: the title, description, body text, and button labels can each be changed without affecting the double border frame. The footer layout can be flipped to a single action or a different button pairing. The frame itself scales with the card, so you can widen or narrow the container to fit your column width.
Reach for this card when you need a single focused prompt to stand out on a page without resorting to color or shadow. In a project management workspace it suits a creation or confirmation step where the framed look signals that the user is about to commit to something. It works better than a plain card when the action deserves a moment of ceremony, and better than an animated border when you want that weight without motion.
A natural flow around it on a Components page:
Before
After
The frame reads as deliberate and formal, so it suits content that benefits from that register:
Tip: keep the body text to two or three short sentences so the card stays compact and the border frame remains the visual focus.