Activity Feed
A timeline-based activity feed with status icons and timestamps.
Card
Timeline
Button
Preview
Activity Feed
Recent events and updates
Sarah deployed v2.4.1 to production
Deployment completed successfully
New user registered: [email protected]
Signed up via Google OAuth
Payment of $299.00 received
Invoice #1234 paid by Acme Corp
Database backup completed
Full backup stored in us-east-1
CI/CD pipeline running
Building and testing feature branch
Scheduled maintenance
Planned database migration
Code
<BbCard class="w-full max-w-md">
<BbCardHeader>
<div class="flex items-center justify-between">
<BbCardTitle>Activity Feed</BbCardTitle>
<BbButton Variant="ButtonVariant.Ghost" Size="ButtonSize.Small">View All</BbButton>
</div>
<BbCardDescription>Recent events and updates</BbCardDescription>
</BbCardHeader>
<BbCardContent>
<BbTimeline Align="TimelineAlign.Left" Size="TimelineSize.Small">
<BbTimelineItem Title="Sarah deployed v2.4.1 to production"
Time="2 minutes ago"
Description="Deployment completed successfully"
Status="TimelineStatus.Completed"
IconColor="TimelineColor.Primary">
<IconContent>
<!-- rocket icon SVG -->
</IconContent>
</BbTimelineItem>
<BbTimelineItem Title="New user registered: [email protected]"
Time="15 minutes ago"
Description="Signed up via Google OAuth"
Status="TimelineStatus.Completed"
IconColor="TimelineColor.Secondary">
<IconContent>
<!-- user-plus icon SVG -->
</IconContent>
</BbTimelineItem>
<BbTimelineItem Title="Payment of $299.00 received"
Time="1 hour ago"
Description="Invoice #1234 paid by Acme Corp"
Status="TimelineStatus.Completed"
IconColor="TimelineColor.Primary">
<IconContent>
<!-- credit-card icon SVG -->
</IconContent>
</BbTimelineItem>
<BbTimelineItem Title="Database backup completed"
Time="3 hours ago"
Description="Full backup stored in us-east-1"
Status="TimelineStatus.Completed"
IconColor="TimelineColor.Accent">
<IconContent>
<!-- database icon SVG -->
</IconContent>
</BbTimelineItem>
<BbTimelineItem Title="CI/CD pipeline running"
Time="In progress"
Description="Building and testing feature branch"
Status="TimelineStatus.InProgress"
Loading="true"
IconColor="TimelineColor.Primary">
<IconContent>
<!-- refresh-cw icon SVG -->
</IconContent>
</BbTimelineItem>
<BbTimelineItem Title="Scheduled maintenance"
Time="Tomorrow, 2:00 AM"
Description="Planned database migration"
Status="TimelineStatus.Pending"
ShowConnector="false">
<IconContent>
<!-- wrench icon SVG -->
</IconContent>
</BbTimelineItem>
</BbTimeline>
</BbCardContent>
</BbCard>