Blazor Blueprint Blazor Blueprint
Previous Activity Feed Next Charts Overview

Notifications Panel

A notification list with read/unread states and avatars.

Card
Avatar
Badge
Button
Separator

Preview

Notifications

3

You have 3 unread notifications

AC

New comment on your post

5m ago

Alex mentioned you in Project Alpha discussion

DS

Deployment successful

15m ago

v2.4.1 deployed to production

SJ

New team member

1h ago

Sarah joined the Engineering team

IP

Invoice paid

3h ago

Invoice #1234 for $299.00 was paid

SA

Security alert

1d ago

New login detected from Chrome on Windows

Code

<BbCard class="w-full max-w-md">
    <BbCardHeader>
        <div class="flex items-center justify-between">
            <div class="flex items-center gap-2">
                <BbCardTitle>Notifications</BbCardTitle>
                <BbBadge Variant="BadgeVariant.Default" class="text-xs">3</BbBadge>
            </div>
            <BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Small">Mark all read</BbButton>
        </div>
        <BbCardDescription>You have 3 unread notifications</BbCardDescription>
    </BbCardHeader>
    <BbCardContent class="p-0">
        @* Notification 1 - Unread *@
        <div class="flex gap-3 p-3 mx-3 rounded-md hover:bg-muted/50 cursor-pointer transition-colors">
            <BbAvatar Class="h-9 w-9 shrink-0">
                <BbAvatarFallback>AC</BbAvatarFallback>
            </BbAvatar>
            <div class="flex-1 min-w-0 space-y-1">
                <div class="flex items-center justify-between gap-2">
                    <p class="text-sm font-medium leading-none">New comment on your post</p>
                    <span class="text-xs text-muted-foreground shrink-0">5m ago</span>
                </div>
                <p class="text-xs text-muted-foreground line-clamp-1">Alex mentioned you in Project Alpha discussion</p>
            </div>
            <div class="h-2 w-2 rounded-full bg-primary shrink-0 mt-2"></div>
        </div>

        <BbSeparator class="mx-3" />

        @* Notification 2 - Unread *@
        <div class="flex gap-3 p-3 mx-3 rounded-md hover:bg-muted/50 cursor-pointer transition-colors">
            <BbAvatar Class="h-9 w-9 shrink-0">
                <BbAvatarFallback>DS</BbAvatarFallback>
            </BbAvatar>
            <div class="flex-1 min-w-0 space-y-1">
                <div class="flex items-center justify-between gap-2">
                    <p class="text-sm font-medium leading-none">Deployment successful</p>
                    <span class="text-xs text-muted-foreground shrink-0">15m ago</span>
                </div>
                <p class="text-xs text-muted-foreground line-clamp-1">v2.4.1 deployed to production</p>
            </div>
            <div class="h-2 w-2 rounded-full bg-primary shrink-0 mt-2"></div>
        </div>

        <BbSeparator class="mx-3" />

        @* Notification 3 - Unread *@
        <div class="flex gap-3 p-3 mx-3 rounded-md hover:bg-muted/50 cursor-pointer transition-colors">
            <BbAvatar Class="h-9 w-9 shrink-0">
                <BbAvatarFallback>SJ</BbAvatarFallback>
            </BbAvatar>
            <div class="flex-1 min-w-0 space-y-1">
                <div class="flex items-center justify-between gap-2">
                    <p class="text-sm font-medium leading-none">New team member</p>
                    <span class="text-xs text-muted-foreground shrink-0">1h ago</span>
                </div>
                <p class="text-xs text-muted-foreground line-clamp-1">Sarah joined the Engineering team</p>
            </div>
            <div class="h-2 w-2 rounded-full bg-primary shrink-0 mt-2"></div>
        </div>

        <BbSeparator class="mx-3" />

        @* Notification 4 - Read *@
        <div class="flex gap-3 p-3 mx-3 rounded-md hover:bg-muted/50 cursor-pointer transition-colors">
            <BbAvatar Class="h-9 w-9 shrink-0">
                <BbAvatarFallback>IP</BbAvatarFallback>
            </BbAvatar>
            <div class="flex-1 min-w-0 space-y-1">
                <div class="flex items-center justify-between gap-2">
                    <p class="text-sm font-medium leading-none">Invoice paid</p>
                    <span class="text-xs text-muted-foreground shrink-0">3h ago</span>
                </div>
                <p class="text-xs text-muted-foreground line-clamp-1">Invoice #1234 for $299.00 was paid</p>
            </div>
        </div>

        <BbSeparator class="mx-3" />

        @* Notification 5 - Read *@
        <div class="flex gap-3 p-3 mx-3 mb-3 rounded-md hover:bg-muted/50 cursor-pointer transition-colors">
            <BbAvatar Class="h-9 w-9 shrink-0">
                <BbAvatarFallback>SA</BbAvatarFallback>
            </BbAvatar>
            <div class="flex-1 min-w-0 space-y-1">
                <div class="flex items-center justify-between gap-2">
                    <p class="text-sm font-medium leading-none">Security alert</p>
                    <span class="text-xs text-muted-foreground shrink-0">1d ago</span>
                </div>
                <p class="text-xs text-muted-foreground line-clamp-1">New login detected from Chrome on Windows</p>
            </div>
        </div>
    </BbCardContent>
</BbCard>
Previous Activity Feed Next Charts Overview