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).
Quick action
Launch the workflow with a single tap.
Plain card (no notch)
Without a #notch slot and without the notched prop, CardNotch renders a plain rounded card.
Acme Inc
Plain rounded card, no notch.
Acme Inc
Plain rounded card, no notch.
Acme Inc
Plain rounded card, no notch.
Positions
Six positions: top-left/center/right and bottom-left/center/right.
top-left
top-center
top-right
bottom-left
bottom-center
bottom-right
Auto padding
auto-pad reserves notch clearance automatically, so you only set base padding. notch-padding tunes the breathing room.
notch-padding 0px
Card reserves notch space.
notch-padding 0.75rem
Card reserves notch space.
notch-padding 1.5rem
Card reserves notch space.
Custom sizes
Adjust size, gap, and radius for different looks.
Large
5rem notch, 4px gap
Small
2.5rem notch, 2px gap
Wide gap
12px gap, 1rem radius
Without border
Set :bordered="false" to drop the stroke. The gap is genuinely transparent, so any background shows through.
No border
The gap stays transparent.
No border
The gap stays transparent.
No border
The gap stays transparent.
Border width & color
Customise the stroke via border-width and border-color.
Thicker
border-width 2px
Destructive
border-color destructive
Combined
3px info colour
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.
Acme Inc
Marketing
Globex Corp
Engineering
Initech
Finance
Umbrella Co
Operations