Card Concave
Card with true transparent concave rounding where a protruding element (like a logo) meets the card body. Uses SVG filters for smooth concave corners - no images, no box-shadow hacks.
Basic - Top Left
Default position: protruding element at top-left with concave rounding at the junction.
Air Minum Biru
Retail & Wholesales
Burger Bangor
Food & Beverage
Cheezy Coin
Entertainment
Positions
Protruding element can be positioned at top-left, top-center, or top-right.
Top Left
Default protrusion position
Top Center
Centered protrusion
Top Right
Right-aligned protrusion
Without Border
Use :bordered="false" to remove the border and shadow. Best on colored backgrounds.
No Border
Card on colored background
No Border
Center position
No Border
Right position
Custom Sizes
Adjust size, gap, radius, and blur-radius for different looks.
Large Logo
5rem protrusion with blur-radius 7
Small Logo
2.5rem protrusion with blur-radius 4
Wide Gap
8px gap, 1rem radius, blur-radius 8
Transparency Test
Cards on different backgrounds to prove the gap between card and protrusion is truly transparent - not faked with box-shadow or pseudo-elements.
True Transparency
Red shows through the gap
True Transparency
Blue shows through the gap
True Transparency
Green shows through the gap
Gradient Test
Gradient visible in gap
Gradient Test
Center position
Gradient Test
Right position
Checkerboard
Pattern visible in gap
Checkerboard
Center position
Checkerboard
Right position
Brand Card Simulation
Simulating the BrandCard use case with logo, name, category, booth info, and actions.
Air Minum Biru
Burger Bangor
Food & Beverage
Cheezy Coin
DJ Juice
Food & Beverage
Farmakita
Cafe Bombom
Food & Beverage