Bootstrap UI Kit

Basic Activity Feed

Marcus Johnson created a new project "Website Redesign"

2 minutes ago

David Park uploaded 3 new files to Design

15 minutes ago

Ali Khan commented on your post

1 hour ago

<div class="uk-act">
    <div class="uk-act-item">
        <img src="..." class="uk-act-avatar">
        <div class="uk-act-body">
            <div class="uk-act-text"><strong>Marcus</strong> created a project</div>
            <div class="uk-act-time">2 minutes ago</div>
        </div>
    </div>
</div>

<style>
    .uk-act { display: flex; flex-direction: column; }
    .uk-act-item {
        display: flex;
        gap: 0.75rem;
        padding: 0.85rem 1rem;
        border-bottom: 1px solid #f1f5f9;
    }
    .uk-act-item:last-child { border-bottom: 0; }
    .uk-act-avatar {
        width: 36px; height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .uk-act-body { flex: 1; min-width: 0; }
    .uk-act-text {
        font-size: 0.85rem;
        color: #0b1b2f;
        line-height: 1.5;
    }
    .uk-act-text a {
        color: #1e3a8a;
        font-weight: 600;
        text-decoration: none;
    }
    .uk-act-text a:hover { text-decoration: underline; }
    .uk-act-time {
        font-size: 0.72rem;
        color: #94a3b8;
        margin-top: 2px;
    }
</style>

Activity with Icons

New task created — Update pricing page

5 minutes ago

Task completed — API integration

23 minutes ago

Edited — Homepage hero section

1 hour ago

Deleted — Old campaign banner

3 hours ago

<div class="uk-act-item">
    <div class="uk-act-icon" style="background:#eef2f8;color:#1e3a8a;">
        <i class="fas fa-plus"></i>
    </div>
    <div class="uk-act-body">
        <div class="uk-act-text"><strong>New task created</strong></div>
        <div class="uk-act-time">5 minutes ago</div>
    </div>
</div>

<style>
    .uk-act-icon {
        width: 36px; height: 36px;
        border-radius: 0.6rem;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.85rem;
        flex-shrink: 0;
    }
</style>

Timeline Activity Feed

Today, 9:42 AM

Payment received

Invoice #INV-042 for $249.00 was paid by Northwind Labs.

Today, 8:15 AM

Project deployed

Version 2.4.1 is live on production.

Yesterday, 6:30 PM

Team member joined

Sarah Chen was added to the design team.

<div class="uk-act-timeline">
    <div class="uk-act-tl-item">
        <div class="uk-act-tl-dot primary"></div>
        <div class="uk-act-tl-time">Today, 9:42 AM</div>
        <div class="uk-act-tl-title">Payment received</div>
        <div class="uk-act-tl-desc">Invoice was paid.</div>
    </div>
</div>

<style>
    .uk-act-timeline {
        position: relative;
        padding-left: 1.5rem;
    }
    .uk-act-timeline::before {
        content: '';
        position: absolute;
        left: 5px;
        top: 8px; bottom: 8px;
        width: 2px;
        background: #e2e8f0;
    }
    .uk-act-tl-item {
        position: relative;
        padding-bottom: 1.5rem;
    }
    .uk-act-tl-item:last-child { padding-bottom: 0; }
    .uk-act-tl-dot {
        position: absolute;
        left: -1.5rem;
        top: 4px;
        width: 12px; height: 12px;
        border-radius: 50%;
        border: 3px solid #fff;
        background: #94a3b8;
        z-index: 1;
    }
    .uk-act-tl-dot.primary {
        background: #1e3a8a;
        box-shadow: 0 0 0 4px rgba(30, 58, 138, 0.15);
    }
    .uk-act-tl-dot.success { background: #059669; }
    .uk-act-tl-dot.muted   { background: #94a3b8; }
    .uk-act-tl-time {
        font-size: 0.7rem;
        color: #94a3b8;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        margin-bottom: 4px;
    }
    .uk-act-tl-title {
        font-size: 0.9rem;
        font-weight: 700;
        color: #0b1b2f;
    }
    .uk-act-tl-desc {
        font-size: 0.82rem;
        color: #64748b;
        line-height: 1.5;
        margin-top: 2px;
    }
</style>

Grouped Activity (by Date)

Today

Sarah shared a new document

9:12 AM

Ali sent you a message

8:45 AM

Yesterday

David mentioned you in a comment

4:30 PM

<div class="uk-act-group">
    <div class="uk-act-group-title">Today</div>
    <div class="uk-act-item">...</div>
    <div class="uk-act-group-title">Yesterday</div>
    <div class="uk-act-item">...</div>
</div>

<style>
    .uk-act-group-title {
        padding: 0.75rem 1rem 0.35rem;
        font-size: 0.68rem;
        font-weight: 700;
        color: #94a3b8;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        background: #f8fafc;
        border-top: 1px solid #f1f5f9;
        border-bottom: 1px solid #f1f5f9;
    }
    .uk-act-group-title:first-child { border-top: 0; }
</style>

Notifications-Style Feed

James Miller replied to your comment

3 min ago

"Great point — I'll update the copy on the hero section by EOD."

Robert Chen approved your PR

2 hours ago

<div class="uk-act-notif-item unread">
    <div class="uk-act-notif-head">
        <img src="...">
        <div>
            <div class="uk-act-text"><strong>James</strong> replied to your comment</div>
            <div class="uk-act-time">3 min ago</div>
        </div>
    </div>
    <div class="uk-act-notif-quote">"Great point — I'll update it."</div>
</div>

<style>
    .uk-act-notif {
        background: #fff;
        border: 1px solid #e2e8f0;
        border-radius: 1rem;
        overflow: hidden;
    }
    .uk-act-notif-item {
        padding: 1rem;
        border-bottom: 1px solid #f1f5f9;
        text-align: left;
    }
    .uk-act-notif-item:last-child { border-bottom: 0; }
    .uk-act-notif-item.unread { background: #f8fafc; }
    .uk-act-notif-head {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
    }
    .uk-act-notif-head img {
        width: 36px; height: 36px;
        border-radius: 50%;
        object-fit: cover;
        flex-shrink: 0;
    }
    .uk-act-notif-quote {
        margin: 0.65rem 0 0 3rem;
        padding: 0.6rem 0.85rem;
        background: #f1f5f9;
        border-left: 3px solid #1e3a8a;
        border-radius: 0 0.4rem 0.4rem 0;
        font-size: 0.82rem;
        color: #475569;
        line-height: 1.5;
        font-style: italic;
    }
</style>

Compact Activity List

Site deployed to production

Just now

Backup completed — 2.4 GB

20 min ago

SSL certificate expires in 14 days

1 hr ago

New user registered — [email protected]

3 hr ago

<div class="uk-act-compact-item">
    <i class="fas fa-circle" style="color:#22c55e;font-size:0.5rem;"></i>
    <div class="uk-act-compact-body">
        <div class="uk-act-compact-text">Site deployed</div>
        <div class="uk-act-compact-time">Just now</div>
    </div>
</div>

<style>
    .uk-act-compact {
        display: flex;
        flex-direction: column;
    }
    .uk-act-compact-item {
        display: flex;
        gap: 0.75rem;
        align-items: flex-start;
        padding: 0.6rem 0.75rem;
        border-radius: 0.5rem;
        transition: background 0.15s;
        text-align: left;
    }
    .uk-act-compact-item:hover { background: #f8fafc; }
    .uk-act-compact-item > i { margin-top: 0.45rem; }
    .uk-act-compact-body { flex: 1; }
    .uk-act-compact-text {
        font-size: 0.82rem;
        color: #0b1b2f;
        line-height: 1.5;
    }
    .uk-act-compact-time {
        font-size: 0.7rem;
        color: #94a3b8;
        margin-top: 2px;
    }
</style>

Activity Feeds