Card Notch
Card with a true transparent notched cutout where a circular element meets the card body. Uses an SVG clip-path for crisp corners. Falls back to a plain card when no notch slot is present.
Default
Notch at the bottom-right (default). Reserve clearance with body-class (e.g. pb-20).
Usage
Import the parts you need from the component's folder.
import { CardNotch } from "@/components/ui/card-notch";Plain card (no notch)
Without a #notch slot and without the notched prop, CardNotch renders a plain rounded card.
Positions
Six positions: top-left/center/right and bottom-left/center/right.
Auto padding
auto-pad reserves notch clearance automatically, so you only set base padding. notch-padding tunes the breathing room.
Custom sizes
Adjust size, gap, and radius for different looks.
Without border
Set :bordered="false" to drop the stroke. The gap is genuinely transparent, so any background shows through.
Border width & color
Customise the stroke via border-width and border-color.
As link or button
Pass to/href to render as a NuxtLink, or as="button" for a clickable card. External URLs open in a new tab.
Brand card
Realistic usage: logo notch, name, category, and metadata with auto-pad.