Cutout Border Card
A card with a notched border that carves out shape along its edge. Use it for tickets, coupons, or passes where a distinct outline reads as a stub.
A card with a notched border that carves out shape along its edge. Use it for tickets, coupons, or passes where a distinct outline reads as a stub.
Search blocks by description or jump to a page.
Cutout Border Card is a single card inside a layered decorative frame. The outer wrapper carries a diagonal stripe pattern at low opacity, a thin tinted ring blends it into the background, and an inner fill punches back to the page color so the stripe sits only along the visible edge. The card itself holds a title, a short description paragraph, a body blurb, and a footer row with two buttons side by side.
Every layer of the frame is independent of the card content, so you can swap the title, description, and body copy freely. The footer row accepts any two actions. The stripe pattern and ring color follow your primary theme token, so a brand palette change carries through without touching the block.
Reach for this block when a card needs to read as a distinct object, not just a box on a page. The hatched border signals a coupon, pass, ticket, or stub shape without adding imagery. On an online education platform it suits a course enrollment prompt, a certificate reveal, or a free trial offer where the physical feel of a ticket adds intent to the call to action.
A natural flow around it on a Components page:
Before
After
The frame works wherever a tactile, clipped outline adds meaning to the content inside it:
Tip: keep the body paragraph to two or three short sentences so the card stays compact and the decorative border stays visible around all four sides.