Notification Bell

12
12 unread
About this piece

Notification Bell

Bell icon with a rose count badge and an optional label. Counts over 99 clamp to 99+.

Playground

Turn the props on the right; the snippet under them is what you would write to get what you see.

12
12 unread
Usage
import { Card6 } from "@/components/beste/component/card6";

<Card6
  count={12}
  label="unread"
/>

Keyboard and gestures

Every one of these is in the component already. They are listed because a props table cannot mention a gesture, so nothing else on this page can tell you they exist.

HoverThe card lifts and the image scales inside its frame; `motion-reduce` turns the movement off.

Usage

The import and the props worth knowing about, in one place.

import { Card6 } from "@/components/beste/piece/card6";

<Card6
  count={12}
  label="unread"
/>

More Card pieces

View all Card
Monthly revenue
$12,459+24%

Metric Card

KPI label, a bold value, and a signed percentage trend badge.

#BES-20481· 3 items
Shipped· Arrives Fri

Order Status

Package icon paired with an order ID, item count, a colored status dot, and an optional ETA.

Growth
$48/ mo
For teams growing past launch.
Unlimited editors
250 GB storage
Realtime analytics

Featured Tier

Highlighted plan with a gradient border, Most popular badge on top, and a filled gradient CTA button.

50% offEnds in 2d 14h
Lifetime license
$149$299

Deal Card

Limited-offer card with a rose discount tag, ticking countdown, strikethrough original, and bold sale price.

64%
Capacityof target

Donut Chart

Thick donut ring with a centered percent, paired with an uppercase caption on the side.

$49$89
45%

Pricing Tag

Sale price next to a struck-through original, with a rose discount badge.