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
API Reference
Props, events, and slots for each sub-component.
CardNotch
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| position | "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | "bottom-right" | Where the notch element sits. |
| size | string | "3.5rem" | Notch diameter (any CSS length). |
| gap | string | "8px" | Transparent gap between the notch and the card edge. |
| radius | string | "1.5rem" | Card corner radius. |
| bordered | boolean | true | Stroke the card outline. |
| borderColor | string | "var(--color-primary)" | Border colour. |
| borderWidth | string | "1px" | Border thickness. |
| cardBg | string | "var(--color-card)" | Card fill colour for the SVG mask. |
| notched | boolean | false | Force the cutout even without a #notch slot (e.g. for skeletons). |
| autoPad | boolean | false | Reserve notch clearance automatically; no manual pb-* needed. |
| notchPadding | string | "0.75rem" | Breathing room between the notch and the content when auto-pad is on. |
| bodyClass | string | — | Classes for the inner body div (padding, layout). |
| to | RouteLocationRaw | — | Render as a NuxtLink to an internal route. |
| href | string | — | Render as an anchor; https URLs open in a new tab. |
| as | "div" | "button" | "a" | "div" | Element to render when no to/href is set. |
Slots
| Slot | Description |
|---|---|
| default | Card body content. |
| notch | Content inside the notch circle (icon, avatar, logo). |