Card Notch
Card with a true transparent notched cutout where a circular element meets the card body. Uses SVG clip-path for crisp, pixel-perfect corners - no images, no hacks.
Basic
Default position: notch element at bottom-right with a cutout at the junction.
Air Minum Biru
Retail & Wholesales
Burger Bangor
Food & Beverage
Cheezy Coin
Entertainment
Positions
Notch element supports six positions: top-left, top-center, top-right, bottom-left, bottom-center, and bottom-right.
top-left
Notch position
top-center
Notch position
top-right
Notch position
bottom-left
Notch position
bottom-center
Notch position
bottom-right
Notch position
Without Border
Use :bordered="false" to remove the border. Best on colored backgrounds.
No Border
Card on colored background
No Border
Card on colored background
No Border
Card on colored background
Custom Sizes
Adjust size, gap, and radius for different looks.
Large Logo
5rem notch, 4px gap
Small Logo
2.5rem notch, 2px gap
Wide Gap
12px gap, 1rem radius
Muted Card (No Border)
Use :bordered="false" with card-bg for subtle muted cards.
Air Minum Biru
Retail & Wholesales
Burger Bangor
Food & Beverage
Cheezy Coin
Entertainment
Border Width & Color
Customize border appearance via border-width and border-color.
Thicker Border
border-width="2px"
Destructive
border-color="var(--color-destructive)"
Combined
3px info color
Transparency Test
Cards on different backgrounds to prove the gap between card and notch is truly transparent - not faked with box-shadow or pseudo-elements.
True Transparency
Red shows through
True Transparency
Blue shows through
True Transparency
Green shows through
Gradient Test
Gradient visible in gap
Gradient Test
Gradient visible in gap
Gradient Test
Gradient visible in gap
Brand Card Simulation
Simulating the BrandCard use case with logo, name, category, and metadata.
Air Minum Biru
Retail & Wholesales
Burger Bangor
Food & Beverage
Cheezy Coin
Entertainment
DJ Juice
Food & Beverage
Farmakita
Health & Wellness
Cafe Bombom
Food & Beverage
Brand List Skeleton
Skeleton loading state. Gradient background shows true transparency between card and notch. Plain divs (no animation) for performance with many items.