|$ curl https://forge-ai.dev/api/markdown?path=docs/components/timeline
$cat docs/timeline.md
updated Recently·18 min read·published
Timeline
Introduction
Timelines visualize chronological sequences of events. They work for project histories, user activity feeds, changelogs, onboarding steps, and process flows. This guide covers production-ready timeline patterns in plain HTML/CSS, Tailwind CSS, and Bootstrap — including vertical, horizontal, alternating, status-aware, nested, and rich-content layouts.
ℹ
info
Use an ordered list (<ol>) for sequential events so screen readers announce position. Add aria-label to the timeline container to give screen readers extra context.
Vertical Timeline
A standard vertical timeline with a connecting line, dot indicators, and timestamps. Each item contains a title, description, and date. The connecting line uses a ::before pseudo-element on the container.
vertical-timeline
Live
untitled.html
HTML
| 1 | <div class="tl"> |
| 2 | <div class="tl-item"> |
| 3 | <div class="tl-dot"> |
| 4 | </div> |
| 5 | <div class="tl-content"> |
| 6 | <span class="tl-date"> |
| 7 | Jan 15, 2025 |
| 8 | </span> |
| 9 | <h4 class="tl-title"> |
| 10 | Project Kickoff |
| 11 | </h4> |
| 12 | <p class="tl-desc"> |
| 13 | Initial meeting with stakeholders to define scope, |
| 14 | timeline, and resource allocation for Q1 deliverables. |
| 15 | </p> |
| 16 | </div> |
| 17 | </div> |
| 18 | <div class="tl-item"> |
| 19 | <div class="tl-dot"> |
| 20 | </div> |
| 21 | <div class="tl-content"> |
| 22 | <span class="tl-date"> |
| 23 | Feb 3, 2025 |
| 24 | </span> |
| 25 | <h4 class="tl-title"> |
| 26 | Design Review |
| 27 | </h4> |
| 28 | <p class="tl-desc"> |
| 29 | Finalized UI/UX mockups and component library. |
| 30 | Received approval from the design team and product owner. |
| 31 | </p> |
| 32 | </div> |
| 33 | </div> |
| 34 | <div class="tl-item"> |
| 35 | <div class="tl-dot"> |
| 36 | </div> |
| 37 | <div class="tl-content"> |
| 38 | <span class="tl-date"> |
| 39 | Feb 20, 2025 |
| 40 | </span> |
| 41 | <h4 class="tl-title"> |
| 42 | Sprint 1 Complete |
| 43 | </h4> |
| 44 | <p class="tl-desc"> |
| 45 | Shipped authentication, dashboard layout, and |
| 46 | settings page. 14 story points delivered across 3 features. |
| 47 | </p> |
| 48 | </div> |
| 49 | </div> |
| 50 | <div class="tl-item"> |
| 51 | <div class="tl-dot active"> |
| 52 | </div> |
| 53 | <div class="tl-content"> |
| 54 | <span class="tl-date"> |
| 55 | Mar 8, 2025 |
| 56 | </span> |
| 57 | <h4 class="tl-title"> |
| 58 | Sprint 2 In Progress |
| 59 | </h4> |
| 60 | <p class="tl-desc"> |
| 61 | Currently building the notification system, real-time |
| 62 | collaboration, and data export functionality. |
| 63 | </p> |
| 64 | </div> |
| 65 | </div> |
| 66 | </div> |
untitled.css
CSS
| 1 | .tl { |
| 2 | position:relative; |
| 3 | padding:12px 24px 12px 36px; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | margin-left:12px |
| 7 | } |
| 8 | .tl::before { |
| 9 | content:''; |
| 10 | position:absolute; |
| 11 | left:30px; |
| 12 | top:0; |
| 13 | bottom:0; |
| 14 | width:2px; |
| 15 | background:linear-gradient(to bottom, |
| 16 | #2A2A2A, |
| 17 | #2A2A2A 90%, |
| 18 | transparent) |
| 19 | } |
| 20 | .tl-item { |
| 21 | position:relative; |
| 22 | display:flex; |
| 23 | gap:0; |
| 24 | padding:0 0 28px 0 |
| 25 | } |
| 26 | .tl-item:last-child { |
| 27 | padding-bottom:0 |
| 28 | } |
| 29 | .tl-dot { |
| 30 | position:absolute; |
| 31 | left:-18px; |
| 32 | top:6px; |
| 33 | width:12px; |
| 34 | height:12px; |
| 35 | border-radius:50%; |
| 36 | border:2px solid #3A3A3A; |
| 37 | background:#0D0D0D; |
| 38 | z-index:1; |
| 39 | transition:all .2s |
| 40 | } |
| 41 | .tl-dot.active { |
| 42 | border-color:#00FF41; |
| 43 | background:#00FF41; |
| 44 | box-shadow:0 0 10px rgba(0, |
| 45 | 255, |
| 46 | 65, |
| 47 | .4) |
| 48 | } |
| 49 | .tl-content { |
| 50 | flex:1; |
| 51 | padding-left:12px |
| 52 | } |
| 53 | .tl-date { |
| 54 | font-size:11px; |
| 55 | color:#666; |
| 56 | font-weight:500; |
| 57 | text-transform:uppercase; |
| 58 | letter-spacing:.3px |
| 59 | } |
| 60 | .tl-title { |
| 61 | font-size:14px; |
| 62 | font-weight:700; |
| 63 | color:#E0E0E0; |
| 64 | margin:4px 0 4px; |
| 65 | line-height:1.3 |
| 66 | } |
| 67 | .tl-desc { |
| 68 | font-size:12px; |
| 69 | color:#808080; |
| 70 | line-height:1.6; |
| 71 | margin:0 |
| 72 | } |
untitled.html
HTML
| 1 | <div class="relative py-3 pl-10 ml-3"> |
| 2 | <div class="absolute left-[30px] top-0 bottom-0 w-0.5 bg-gradient-to-b from-[#2A2A2A] to-transparent"> |
| 3 | </div> |
| 4 | <div class="relative pb-7 last:pb-0"> |
| 5 | <div class="absolute -left-[18px] top-1.5 w-3 h-3 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 6 | </div> |
| 7 | <div class="pl-3"> |
| 8 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 9 | Jan 15, 2025 |
| 10 | </span> |
| 11 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 12 | Project Kickoff |
| 13 | </h4> |
| 14 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 15 | Initial meeting with stakeholders to define scope, timeline, and resource allocation for Q1 deliverables. |
| 16 | </p> |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="relative pb-7 last:pb-0"> |
| 20 | <div class="absolute -left-[18px] top-1.5 w-3 h-3 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 21 | </div> |
| 22 | <div class="pl-3"> |
| 23 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 24 | Feb 3, 2025 |
| 25 | </span> |
| 26 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 27 | Design Review |
| 28 | </h4> |
| 29 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 30 | Finalized UI/UX mockups and component library. Received approval from the design team and product owner. |
| 31 | </p> |
| 32 | </div> |
| 33 | </div> |
| 34 | <div class="relative pb-7 last:pb-0"> |
| 35 | <div class="absolute -left-[18px] top-1.5 w-3 h-3 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 36 | </div> |
| 37 | <div class="pl-3"> |
| 38 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 39 | Feb 20, 2025 |
| 40 | </span> |
| 41 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 42 | Sprint 1 Complete |
| 43 | </h4> |
| 44 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 45 | Shipped authentication, dashboard layout, and settings page. 14 story points delivered across 3 features. |
| 46 | </p> |
| 47 | </div> |
| 48 | </div> |
| 49 | <div class="relative"> |
| 50 | <div class="absolute -left-[18px] top-1.5 w-3 h-3 rounded-full border-2 border-[#00FF41] bg-[#00FF41] shadow-[0_0_10px_rgba(0,255,65,0.4)]"> |
| 51 | </div> |
| 52 | <div class="pl-3"> |
| 53 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 54 | Mar 8, 2025 |
| 55 | </span> |
| 56 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 57 | Sprint 2 In Progress |
| 58 | </h4> |
| 59 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 60 | Currently building the notification system, real-time collaboration, and data export functionality. |
| 61 | </p> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
untitled.html
HTML
| 1 | <div class="position-relative py-2 ps-4 ms-3"> |
| 2 | <div class="position-absolute top-0 bottom-0 w-px" style="left:30px;background:#2A2A2A"> |
| 3 | </div> |
| 4 | <div class="position-relative pb-4"> |
| 5 | <div class="position-absolute rounded-circle" style="left:-18px;top:6px;width:12px;height:12px;border:2px solid #3A3A3A;background:#0D0D0D"> |
| 6 | </div> |
| 7 | <div class="ps-3"> |
| 8 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 9 | Jan 15, 2025 |
| 10 | </span> |
| 11 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 12 | Project Kickoff |
| 13 | </h4> |
| 14 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 15 | Initial meeting with stakeholders to define scope, timeline, and resource allocation for Q1 deliverables. |
| 16 | </p> |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="position-relative pb-4"> |
| 20 | <div class="position-absolute rounded-circle" style="left:-18px;top:6px;width:12px;height:12px;border:2px solid #3A3A3A;background:#0D0D0D"> |
| 21 | </div> |
| 22 | <div class="ps-3"> |
| 23 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 24 | Feb 3, 2025 |
| 25 | </span> |
| 26 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 27 | Design Review |
| 28 | </h4> |
| 29 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 30 | Finalized UI/UX mockups and component library. Received approval from the design team and product owner. |
| 31 | </p> |
| 32 | </div> |
| 33 | </div> |
| 34 | <div class="position-relative pb-4"> |
| 35 | <div class="position-absolute rounded-circle" style="left:-18px;top:6px;width:12px;height:12px;border:2px solid #3A3A3A;background:#0D0D0D"> |
| 36 | </div> |
| 37 | <div class="ps-3"> |
| 38 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 39 | Feb 20, 2025 |
| 40 | </span> |
| 41 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 42 | Sprint 1 Complete |
| 43 | </h4> |
| 44 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 45 | Shipped authentication, dashboard layout, and settings page. 14 story points delivered across 3 features. |
| 46 | </p> |
| 47 | </div> |
| 48 | </div> |
| 49 | <div class="position-relative"> |
| 50 | <div class="position-absolute rounded-circle" style="left:-18px;top:6px;width:12px;height:12px;border:2px solid #00FF41;background:#00FF41;box-shadow:0 0 10px rgba(0,255,65,.4)"> |
| 51 | </div> |
| 52 | <div class="ps-3"> |
| 53 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 54 | Mar 8, 2025 |
| 55 | </span> |
| 56 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 57 | Sprint 2 In Progress |
| 58 | </h4> |
| 59 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 60 | Currently building the notification system, real-time collaboration, and data export functionality. |
| 61 | </p> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
Status Icons
Status-aware timeline nodes with colored icons — green check for completed, blue pulse for in-progress, yellow clock for pending, and red X for blocked. Visual status reduces cognitive load and communicates project health at a glance.
status-timeline
Live
untitled.html
HTML
| 1 | <div class="tl status-tl"> |
| 2 | <div class="tl-item"> |
| 3 | <div class="tl-icon done"> |
| 4 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" |
| 5 | stroke="currentColor" stroke-width="3" stroke-linecap="round" |
| 6 | stroke-linejoin="round"> |
| 7 | <polyline points="20 6 9 17 4 12"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="tl-content"> |
| 11 | <span class="tl-date"> |
| 12 | Jan 15, 2025 |
| 13 | </span> |
| 14 | <h4 class="tl-title"> |
| 15 | Requirements Gathering |
| 16 | </h4> |
| 17 | <p class="tl-desc"> |
| 18 | Stakeholder interviews, user research, and |
| 19 | competitive analysis completed across 12 segments. |
| 20 | </p> |
| 21 | </div> |
| 22 | </div> |
| 23 | <div class="tl-item"> |
| 24 | <div class="tl-icon done"> |
| 25 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" |
| 26 | stroke="currentColor" stroke-width="3" stroke-linecap="round" |
| 27 | stroke-linejoin="round"> |
| 28 | <polyline points="20 6 9 17 4 12"/> |
| 29 | </svg> |
| 30 | </div> |
| 31 | <div class="tl-content"> |
| 32 | <span class="tl-date"> |
| 33 | Feb 1, 2025 |
| 34 | </span> |
| 35 | <h4 class="tl-title"> |
| 36 | Architecture Design |
| 37 | </h4> |
| 38 | <p class="tl-desc"> |
| 39 | System architecture, database schema, and |
| 40 | API contracts finalized and reviewed. |
| 41 | </p> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div class="tl-item"> |
| 45 | <div class="tl-icon progress"> |
| 46 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" |
| 47 | stroke="currentColor" stroke-width="3" stroke-linecap="round" |
| 48 | stroke-linejoin="round"> |
| 49 | <circle cx="12" cy="12" r="10"/> |
| 50 | </svg> |
| 51 | </div> |
| 52 | <div class="tl-content"> |
| 53 | <span class="tl-date"> |
| 54 | Mar 1, 2025 |
| 55 | </span> |
| 56 | <h4 class="tl-title"> |
| 57 | Development Sprint |
| 58 | </h4> |
| 59 | <p class="tl-desc"> |
| 60 | Core features being built. Frontend and backend |
| 61 | teams working in parallel on separate tracks. |
| 62 | </p> |
| 63 | </div> |
| 64 | </div> |
| 65 | <div class="tl-item"> |
| 66 | <div class="tl-icon pending"> |
| 67 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" |
| 68 | stroke="currentColor" stroke-width="3" stroke-linecap="round" |
| 69 | stroke-linejoin="round"> |
| 70 | <circle cx="12" cy="12" r="10"/> |
| 71 | <line x1="12" y1="8" x2="12" y2="12"/> |
| 72 | <line x1="12" y1="16" x2="12.01" y2="16"/> |
| 73 | </svg> |
| 74 | </div> |
| 75 | <div class="tl-content"> |
| 76 | <span class="tl-date"> |
| 77 | Apr 1, 2025 |
| 78 | </span> |
| 79 | <h4 class="tl-title"> |
| 80 | QA & Testing |
| 81 | </h4> |
| 82 | <p class="tl-desc"> |
| 83 | Manual and automated testing, performance |
| 84 | benchmarking, and security audit scheduled. |
| 85 | </p> |
| 86 | </div> |
| 87 | </div> |
| 88 | <div class="tl-item"> |
| 89 | <div class="tl-icon blocked"> |
| 90 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" |
| 91 | stroke="currentColor" stroke-width="3" stroke-linecap="round" |
| 92 | stroke-linejoin="round"> |
| 93 | <circle cx="12" cy="12" r="10"/> |
| 94 | <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/> |
| 95 | </svg> |
| 96 | </div> |
| 97 | <div class="tl-content"> |
| 98 | <span class="tl-date"> |
| 99 | May 1, 2025 |
| 100 | </span> |
| 101 | <h4 class="tl-title"> |
| 102 | Deployment |
| 103 | </h4> |
| 104 | <p class="tl-desc"> |
| 105 | Staging deployment, UAT sign-off, and production |
| 106 | release pending environment configuration. |
| 107 | </p> |
| 108 | </div> |
| 109 | </div> |
| 110 | </div> |
untitled.css
CSS
| 1 | .tl.status-tl { |
| 2 | position:relative; |
| 3 | padding:12px 24px 12px 44px; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | margin-left:12px |
| 7 | } |
| 8 | .tl.status-tl::before { |
| 9 | content:''; |
| 10 | position:absolute; |
| 11 | left:38px; |
| 12 | top:0; |
| 13 | bottom:0; |
| 14 | width:2px; |
| 15 | background:#2A2A2A |
| 16 | } |
| 17 | .tl-item { |
| 18 | position:relative; |
| 19 | display:flex; |
| 20 | padding:0 0 24px 0 |
| 21 | } |
| 22 | .tl-item:last-child { |
| 23 | padding-bottom:0 |
| 24 | } |
| 25 | .tl-icon { |
| 26 | position:absolute; |
| 27 | left:-26px; |
| 28 | top:4px; |
| 29 | width:24px; |
| 30 | height:24px; |
| 31 | border-radius:50%; |
| 32 | display:flex; |
| 33 | align-items:center; |
| 34 | justify-content:center; |
| 35 | z-index:1; |
| 36 | flex-shrink:0 |
| 37 | } |
| 38 | .tl-icon.done { |
| 39 | background:rgba(34, |
| 40 | 197, |
| 41 | 94, |
| 42 | .15); |
| 43 | color:#22C55E; |
| 44 | border:2px solid rgba(34, |
| 45 | 197, |
| 46 | 94, |
| 47 | .3) |
| 48 | } |
| 49 | .tl-icon.progress { |
| 50 | background:rgba(59, |
| 51 | 130, |
| 52 | 246, |
| 53 | .15); |
| 54 | color:#3B82F6; |
| 55 | border:2px solid rgba(59, |
| 56 | 130, |
| 57 | 246, |
| 58 | .3); |
| 59 | animation:pulse-ring 2s infinite |
| 60 | } |
| 61 | .tl-icon.pending { |
| 62 | background:rgba(234, |
| 63 | 179, |
| 64 | 8, |
| 65 | .15); |
| 66 | color:#EAB308; |
| 67 | border:2px solid rgba(234, |
| 68 | 179, |
| 69 | 8, |
| 70 | .3) |
| 71 | } |
| 72 | .tl-icon.blocked { |
| 73 | background:rgba(239, |
| 74 | 68, |
| 75 | 68, |
| 76 | .15); |
| 77 | color:#EF4444; |
| 78 | border:2px solid rgba(239, |
| 79 | 68, |
| 80 | 68, |
| 81 | .3) |
| 82 | } |
| 83 | @keyframes pulse-ring { |
| 84 | 0% { |
| 85 | box-shadow:0 0 0 0 rgba(59, |
| 86 | 130, |
| 87 | 246, |
| 88 | .4) |
| 89 | } |
| 90 | 70% { |
| 91 | box-shadow:0 0 0 6px rgba(59, |
| 92 | 130, |
| 93 | 246, |
| 94 | 0) |
| 95 | } |
| 96 | 100% { |
| 97 | box-shadow:0 0 0 0 rgba(59, |
| 98 | 130, |
| 99 | 246, |
| 100 | 0) |
| 101 | } |
| 102 | } |
| 103 | .tl-content { |
| 104 | flex:1; |
| 105 | padding-left:12px |
| 106 | } |
| 107 | .tl-date { |
| 108 | font-size:11px; |
| 109 | color:#666; |
| 110 | font-weight:500; |
| 111 | text-transform:uppercase; |
| 112 | letter-spacing:.3px |
| 113 | } |
| 114 | .tl-title { |
| 115 | font-size:13px; |
| 116 | font-weight:700; |
| 117 | color:#E0E0E0; |
| 118 | margin:4px 0 4px; |
| 119 | line-height:1.3 |
| 120 | } |
| 121 | .tl-desc { |
| 122 | font-size:12px; |
| 123 | color:#808080; |
| 124 | line-height:1.6; |
| 125 | margin:0 |
| 126 | } |
untitled.html
HTML
| 1 | <div class="relative py-3 pl-11 ml-3"> |
| 2 | <div class="absolute left-[38px] top-0 bottom-0 w-0.5 bg-[#2A2A2A]"> |
| 3 | </div> |
| 4 | <div class="relative pb-6 last:pb-0"> |
| 5 | <div class="absolute -left-[26px] top-1 w-6 h-6 rounded-full flex items-center justify-center bg-green-500/15 text-green-500 border-2 border-green-500/30"> |
| 6 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 7 | <polyline points="20 6 9 17 4 12"/> |
| 8 | </svg> |
| 9 | </div> |
| 10 | <div class="pl-3"> |
| 11 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 12 | Jan 15, 2025 |
| 13 | </span> |
| 14 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 15 | Requirements Gathering |
| 16 | </h4> |
| 17 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 18 | Stakeholder interviews, user research, and competitive analysis completed across 12 segments. |
| 19 | </p> |
| 20 | </div> |
| 21 | </div> |
| 22 | <div class="relative pb-6 last:pb-0"> |
| 23 | <div class="absolute -left-[26px] top-1 w-6 h-6 rounded-full flex items-center justify-center bg-green-500/15 text-green-500 border-2 border-green-500/30"> |
| 24 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 25 | <polyline points="20 6 9 17 4 12"/> |
| 26 | </svg> |
| 27 | </div> |
| 28 | <div class="pl-3"> |
| 29 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 30 | Feb 1, 2025 |
| 31 | </span> |
| 32 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 33 | Architecture Design |
| 34 | </h4> |
| 35 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 36 | System architecture, database schema, and API contracts finalized and reviewed. |
| 37 | </p> |
| 38 | </div> |
| 39 | </div> |
| 40 | <div class="relative pb-6 last:pb-0"> |
| 41 | <div class="absolute -left-[26px] top-1 w-6 h-6 rounded-full flex items-center justify-center bg-blue-500/15 text-blue-500 border-2 border-blue-500/30 animate-pulse"> |
| 42 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 43 | <circle cx="12" cy="12" r="10"/> |
| 44 | </svg> |
| 45 | </div> |
| 46 | <div class="pl-3"> |
| 47 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 48 | Mar 1, 2025 |
| 49 | </span> |
| 50 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 51 | Development Sprint |
| 52 | </h4> |
| 53 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 54 | Core features being built. Frontend and backend teams working in parallel on separate tracks. |
| 55 | </p> |
| 56 | </div> |
| 57 | </div> |
| 58 | <div class="relative pb-6 last:pb-0"> |
| 59 | <div class="absolute -left-[26px] top-1 w-6 h-6 rounded-full flex items-center justify-center bg-yellow-500/15 text-yellow-500 border-2 border-yellow-500/30"> |
| 60 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 61 | <circle cx="12" cy="12" r="10"/> |
| 62 | <line x1="12" y1="8" x2="12" y2="12"/> |
| 63 | <line x1="12" y1="16" x2="12.01" y2="16"/> |
| 64 | </svg> |
| 65 | </div> |
| 66 | <div class="pl-3"> |
| 67 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 68 | Apr 1, 2025 |
| 69 | </span> |
| 70 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 71 | QA & Testing |
| 72 | </h4> |
| 73 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 74 | Manual and automated testing, performance benchmarking, and security audit scheduled. |
| 75 | </p> |
| 76 | </div> |
| 77 | </div> |
| 78 | <div class="relative"> |
| 79 | <div class="absolute -left-[26px] top-1 w-6 h-6 rounded-full flex items-center justify-center bg-red-500/15 text-red-500 border-2 border-red-500/30"> |
| 80 | <svg class="w-3 h-3" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 81 | <circle cx="12" cy="12" r="10"/> |
| 82 | <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/> |
| 83 | </svg> |
| 84 | </div> |
| 85 | <div class="pl-3"> |
| 86 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 87 | May 1, 2025 |
| 88 | </span> |
| 89 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 90 | Deployment |
| 91 | </h4> |
| 92 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 93 | Staging deployment, UAT sign-off, and production release pending environment configuration. |
| 94 | </p> |
| 95 | </div> |
| 96 | </div> |
| 97 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | @keyframes pulse-ring-bs{0%{box-shadow:0 0 0 0 rgba(59,130,246,.4)}70%{box-shadow:0 0 0 6px rgba(59,130,246,0)}100%{box-shadow:0 0 0 0 rgba(59,130,246,0)}} |
| 3 | </style> |
| 4 | <div class="position-relative py-2 ps-4 ms-3"> |
| 5 | <div class="position-absolute top-0 bottom-0 w-px" style="left:38px;background:#2A2A2A"> |
| 6 | </div> |
| 7 | <div class="position-relative pb-4"> |
| 8 | <div class="position-absolute rounded-circle d-flex align-items-center justify-content-center" style="left:-26px;top:4px;width:24px;height:24px;background:rgba(34,197,94,.15);color:#22C55E;border:2px solid rgba(34,197,94,.3)"> |
| 9 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 10 | <polyline points="20 6 9 17 4 12"/> |
| 11 | </svg> |
| 12 | </div> |
| 13 | <div class="ps-3"> |
| 14 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 15 | Jan 15, 2025 |
| 16 | </span> |
| 17 | <h4 class="fw-bold mb-1 mt-1" style="font-size:13px;color:#E0E0E0"> |
| 18 | Requirements Gathering |
| 19 | </h4> |
| 20 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 21 | Stakeholder interviews, user research, and competitive analysis completed across 12 segments. |
| 22 | </p> |
| 23 | </div> |
| 24 | </div> |
| 25 | <div class="position-relative pb-4"> |
| 26 | <div class="position-absolute rounded-circle d-flex align-items-center justify-content-center" style="left:-26px;top:4px;width:24px;height:24px;background:rgba(34,197,94,.15);color:#22C55E;border:2px solid rgba(34,197,94,.3)"> |
| 27 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 28 | <polyline points="20 6 9 17 4 12"/> |
| 29 | </svg> |
| 30 | </div> |
| 31 | <div class="ps-3"> |
| 32 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 33 | Feb 1, 2025 |
| 34 | </span> |
| 35 | <h4 class="fw-bold mb-1 mt-1" style="font-size:13px;color:#E0E0E0"> |
| 36 | Architecture Design |
| 37 | </h4> |
| 38 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 39 | System architecture, database schema, and API contracts finalized and reviewed. |
| 40 | </p> |
| 41 | </div> |
| 42 | </div> |
| 43 | <div class="position-relative pb-4"> |
| 44 | <div class="position-absolute rounded-circle d-flex align-items-center justify-content-center" style="left:-26px;top:4px;width:24px;height:24px;background:rgba(59,130,246,.15);color:#3B82F6;border:2px solid rgba(59,130,246,.3);animation:pulse-ring-bs 2s infinite"> |
| 45 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 46 | <circle cx="12" cy="12" r="10"/> |
| 47 | </svg> |
| 48 | </div> |
| 49 | <div class="ps-3"> |
| 50 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 51 | Mar 1, 2025 |
| 52 | </span> |
| 53 | <h4 class="fw-bold mb-1 mt-1" style="font-size:13px;color:#E0E0E0"> |
| 54 | Development Sprint |
| 55 | </h4> |
| 56 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 57 | Core features being built. Frontend and backend teams working in parallel on separate tracks. |
| 58 | </p> |
| 59 | </div> |
| 60 | </div> |
| 61 | <div class="position-relative pb-4"> |
| 62 | <div class="position-absolute rounded-circle d-flex align-items-center justify-content-center" style="left:-26px;top:4px;width:24px;height:24px;background:rgba(234,179,8,.15);color:#EAB308;border:2px solid rgba(234,179,8,.3)"> |
| 63 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 64 | <circle cx="12" cy="12" r="10"/> |
| 65 | <line x1="12" y1="8" x2="12" y2="12"/> |
| 66 | <line x1="12" y1="16" x2="12.01" y2="16"/> |
| 67 | </svg> |
| 68 | </div> |
| 69 | <div class="ps-3"> |
| 70 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 71 | Apr 1, 2025 |
| 72 | </span> |
| 73 | <h4 class="fw-bold mb-1 mt-1" style="font-size:13px;color:#E0E0E0"> |
| 74 | QA & Testing |
| 75 | </h4> |
| 76 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 77 | Manual and automated testing, performance benchmarking, and security audit scheduled. |
| 78 | </p> |
| 79 | </div> |
| 80 | </div> |
| 81 | <div class="position-relative"> |
| 82 | <div class="position-absolute rounded-circle d-flex align-items-center justify-content-center" style="left:-26px;top:4px;width:24px;height:24px;background:rgba(239,68,68,.15);color:#EF4444;border:2px solid rgba(239,68,68,.3)"> |
| 83 | <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"> |
| 84 | <circle cx="12" cy="12" r="10"/> |
| 85 | <line x1="4.93" y1="4.93" x2="19.07" y2="19.07"/> |
| 86 | </svg> |
| 87 | </div> |
| 88 | <div class="ps-3"> |
| 89 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 90 | May 1, 2025 |
| 91 | </span> |
| 92 | <h4 class="fw-bold mb-1 mt-1" style="font-size:13px;color:#E0E0E0"> |
| 93 | Deployment |
| 94 | </h4> |
| 95 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 96 | Staging deployment, UAT sign-off, and production release pending environment configuration. |
| 97 | </p> |
| 98 | </div> |
| 99 | </div> |
| 100 | </div> |
Alternating Layout
Items alternate between left and right sides of a central line. This layout works well for wide screens and provides a balanced visual rhythm. Each side has a card with its own date, title, and description.
alternating-timeline
Live
untitled.html
HTML
| 1 | <div class="alt-tl"> |
| 2 | <div class="alt-item left"> |
| 3 | <div class="alt-card"> |
| 4 | <span class="tl-date"> |
| 5 | Q1 2025 |
| 6 | </span> |
| 7 | <h4 class="tl-title"> |
| 8 | Research Phase |
| 9 | </h4> |
| 10 | <p class="tl-desc"> |
| 11 | Market analysis, user interviews, and technical |
| 12 | feasibility studies across 12 customer segments. |
| 13 | </p> |
| 14 | </div> |
| 15 | </div> |
| 16 | <div class="alt-item right"> |
| 17 | <div class="alt-card"> |
| 18 | <span class="tl-date"> |
| 19 | Q2 2025 |
| 20 | </span> |
| 21 | <h4 class="tl-title"> |
| 22 | Design Phase |
| 23 | </h4> |
| 24 | <p class="tl-desc"> |
| 25 | Wireframes, prototypes, and design system creation. |
| 26 | Three design iterations with user testing. |
| 27 | </p> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="alt-item left"> |
| 31 | <div class="alt-card"> |
| 32 | <span class="tl-date"> |
| 33 | Q3 2025 |
| 34 | </span> |
| 35 | <h4 class="tl-title"> |
| 36 | Build Phase |
| 37 | </h4> |
| 38 | <p class="tl-desc"> |
| 39 | Agile development with two-week sprints. 84 story |
| 40 | points delivered across 6 features in 4 sprints. |
| 41 | </p> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div class="alt-item right"> |
| 45 | <div class="alt-card"> |
| 46 | <span class="tl-date"> |
| 47 | Q4 2025 |
| 48 | </span> |
| 49 | <h4 class="tl-title"> |
| 50 | Launch Phase |
| 51 | </h4> |
| 52 | <p class="tl-desc"> |
| 53 | Beta testing, performance optimization, documentation, |
| 54 | and zero-downtime production deployment. |
| 55 | </p> |
| 56 | </div> |
| 57 | </div> |
| 58 | </div> |
untitled.css
CSS
| 1 | .alt-tl { |
| 2 | position:relative; |
| 3 | padding:20px 24px; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | max-width:600px; |
| 7 | margin:0 auto |
| 8 | } |
| 9 | .alt-tl::before { |
| 10 | content:''; |
| 11 | position:absolute; |
| 12 | left:50%; |
| 13 | top:0; |
| 14 | bottom:0; |
| 15 | width:2px; |
| 16 | background:#2A2A2A; |
| 17 | transform:translateX(-50%) |
| 18 | } |
| 19 | .alt-item { |
| 20 | position:relative; |
| 21 | width:50%; |
| 22 | padding:0 0 32px 0 |
| 23 | } |
| 24 | .alt-item.left { |
| 25 | padding-right:36px; |
| 26 | text-align:right |
| 27 | } |
| 28 | .alt-item.right { |
| 29 | margin-left:50%; |
| 30 | padding-left:36px |
| 31 | } |
| 32 | .alt-item::before { |
| 33 | content:''; |
| 34 | position:absolute; |
| 35 | top:12px; |
| 36 | width:12px; |
| 37 | height:12px; |
| 38 | border-radius:50%; |
| 39 | background:#0D0D0D; |
| 40 | border:2px solid #00FF41; |
| 41 | z-index:1 |
| 42 | } |
| 43 | .alt-item.left::before { |
| 44 | right:-6px |
| 45 | } |
| 46 | .alt-item.right::before { |
| 47 | left:-6px |
| 48 | } |
| 49 | .alt-card { |
| 50 | padding:12px 0 |
| 51 | } |
| 52 | .tl-date { |
| 53 | font-size:11px; |
| 54 | color:#00FF41; |
| 55 | font-weight:600; |
| 56 | text-transform:uppercase; |
| 57 | letter-spacing:.5px |
| 58 | } |
| 59 | .tl-title { |
| 60 | font-size:14px; |
| 61 | font-weight:700; |
| 62 | color:#E0E0E0; |
| 63 | margin:4px 0; |
| 64 | line-height:1.3 |
| 65 | } |
| 66 | .tl-desc { |
| 67 | font-size:12px; |
| 68 | color:#808080; |
| 69 | line-height:1.6; |
| 70 | margin:0 |
| 71 | } |
untitled.html
HTML
| 1 | <div class="relative px-6 py-5 max-w-xl mx-auto"> |
| 2 | <div class="absolute left-1/2 top-0 bottom-0 w-0.5 bg-[#2A2A2A] -translate-x-1/2"> |
| 3 | </div> |
| 4 | <div class="relative w-1/2 pb-8 pr-9 text-right"> |
| 5 | <div class="absolute top-3 -right-1.5 w-3 h-3 rounded-full bg-[#0D0D0D] border-2 border-[#00FF41] z-10"> |
| 6 | </div> |
| 7 | <div class="py-3"> |
| 8 | <span class="text-[11px] text-[#00FF41] font-semibold uppercase tracking-wider"> |
| 9 | Q1 2025 |
| 10 | </span> |
| 11 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 12 | Research Phase |
| 13 | </h4> |
| 14 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 15 | Market analysis, user interviews, and technical feasibility studies across 12 customer segments. |
| 16 | </p> |
| 17 | </div> |
| 18 | </div> |
| 19 | <div class="relative w-1/2 pb-8 pl-9 ml-[50%]"> |
| 20 | <div class="absolute top-3 -left-1.5 w-3 h-3 rounded-full bg-[#0D0D0D] border-2 border-[#00FF41] z-10"> |
| 21 | </div> |
| 22 | <div class="py-3"> |
| 23 | <span class="text-[11px] text-[#00FF41] font-semibold uppercase tracking-wider"> |
| 24 | Q2 2025 |
| 25 | </span> |
| 26 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 27 | Design Phase |
| 28 | </h4> |
| 29 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 30 | Wireframes, prototypes, and design system creation. Three design iterations with user testing. |
| 31 | </p> |
| 32 | </div> |
| 33 | </div> |
| 34 | <div class="relative w-1/2 pb-8 pr-9 text-right"> |
| 35 | <div class="absolute top-3 -right-1.5 w-3 h-3 rounded-full bg-[#0D0D0D] border-2 border-[#00FF41] z-10"> |
| 36 | </div> |
| 37 | <div class="py-3"> |
| 38 | <span class="text-[11px] text-[#00FF41] font-semibold uppercase tracking-wider"> |
| 39 | Q3 2025 |
| 40 | </span> |
| 41 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 42 | Build Phase |
| 43 | </h4> |
| 44 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 45 | Agile development with two-week sprints. 84 story points delivered across 6 features in 4 sprints. |
| 46 | </p> |
| 47 | </div> |
| 48 | </div> |
| 49 | <div class="relative w-1/2 pl-9 ml-[50%]"> |
| 50 | <div class="absolute top-3 -left-1.5 w-3 h-3 rounded-full bg-[#0D0D0D] border-2 border-[#00FF41] z-10"> |
| 51 | </div> |
| 52 | <div class="py-3"> |
| 53 | <span class="text-[11px] text-[#00FF41] font-semibold uppercase tracking-wider"> |
| 54 | Q4 2025 |
| 55 | </span> |
| 56 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 57 | Launch Phase |
| 58 | </h4> |
| 59 | <p class="text-xs text-[#808080] leading-relaxed m-0"> |
| 60 | Beta testing, performance optimization, documentation, and zero-downtime production deployment. |
| 61 | </p> |
| 62 | </div> |
| 63 | </div> |
| 64 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .alt-bs{position:relative;padding:20px 24px;max-width:600px;margin:0 auto}.alt-bs::before{content:'';position:absolute;left:50%;top:0;bottom:0;width:2px;background:#2A2A2A;transform:translateX(-50%)}.alt-bs-item{position:relative;width:50%;padding:0 0 32px 0}.alt-bs-item.left{padding-right:36px;text-align:right}.alt-bs-item.right{margin-left:50%;padding-left:36px}.alt-bs-item::before{content:'';position:absolute;top:12px;width:12px;height:12px;border-radius:50%;background:#0D0D0D;border:2px solid #00FF41;z-index:1}.alt-bs-item.left::before{right:-6px}.alt-bs-item.right::before{left:-6px}.alt-bs-card{padding:12px 0} |
| 3 | </style> |
| 4 | <div class="alt-bs"> |
| 5 | <div class="alt-bs-item left"> |
| 6 | <div class="alt-bs-card"> |
| 7 | <span class="d-block text-uppercase fw-semibold" style="font-size:11px;color:#00FF41;letter-spacing:.5px"> |
| 8 | Q1 2025 |
| 9 | </span> |
| 10 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 11 | Research Phase |
| 12 | </h4> |
| 13 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 14 | Market analysis, user interviews, and technical feasibility studies across 12 customer segments. |
| 15 | </p> |
| 16 | </div> |
| 17 | </div> |
| 18 | <div class="alt-bs-item right"> |
| 19 | <div class="alt-bs-card"> |
| 20 | <span class="d-block text-uppercase fw-semibold" style="font-size:11px;color:#00FF41;letter-spacing:.5px"> |
| 21 | Q2 2025 |
| 22 | </span> |
| 23 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 24 | Design Phase |
| 25 | </h4> |
| 26 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 27 | Wireframes, prototypes, and design system creation. Three design iterations with user testing. |
| 28 | </p> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="alt-bs-item left"> |
| 32 | <div class="alt-bs-card"> |
| 33 | <span class="d-block text-uppercase fw-semibold" style="font-size:11px;color:#00FF41;letter-spacing:.5px"> |
| 34 | Q3 2025 |
| 35 | </span> |
| 36 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 37 | Build Phase |
| 38 | </h4> |
| 39 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 40 | Agile development with two-week sprints. 84 story points delivered across 6 features in 4 sprints. |
| 41 | </p> |
| 42 | </div> |
| 43 | </div> |
| 44 | <div class="alt-bs-item right"> |
| 45 | <div class="alt-bs-card"> |
| 46 | <span class="d-block text-uppercase fw-semibold" style="font-size:11px;color:#00FF41;letter-spacing:.5px"> |
| 47 | Q4 2025 |
| 48 | </span> |
| 49 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 50 | Launch Phase |
| 51 | </h4> |
| 52 | <p class="mb-0" style="font-size:12px;color:#808080;line-height:1.6"> |
| 53 | Beta testing, performance optimization, documentation, and zero-downtime production deployment. |
| 54 | </p> |
| 55 | </div> |
| 56 | </div> |
| 57 | </div> |
Horizontal Timeline
A horizontally scrolling timeline for roadmaps, project milestones, and historical events. Uses CSS overflow-x for scrolling on narrow screens. Each milestone has a date, title, and brief status description.
horizontal-timeline
Live
untitled.html
HTML
| 1 | <div class="h-tl-wrap"> |
| 2 | <div class="h-tl"> |
| 3 | <div class="h-tl-item"> |
| 4 | <div class="h-dot done"> |
| 5 | </div> |
| 6 | <div class="h-card"> |
| 7 | <span class="h-date"> |
| 8 | Jan |
| 9 | </span> |
| 10 | <h4 class="h-title"> |
| 11 | Planning |
| 12 | </h4> |
| 13 | <p class="h-desc"> |
| 14 | Scope defined |
| 15 | </p> |
| 16 | </div> |
| 17 | </div> |
| 18 | <div class="h-tl-item"> |
| 19 | <div class="h-dot done"> |
| 20 | </div> |
| 21 | <div class="h-card"> |
| 22 | <span class="h-date"> |
| 23 | Feb |
| 24 | </span> |
| 25 | <h4 class="h-title"> |
| 26 | Design |
| 27 | </h4> |
| 28 | <p class="h-desc"> |
| 29 | Mockups ready |
| 30 | </p> |
| 31 | </div> |
| 32 | </div> |
| 33 | <div class="h-tl-item"> |
| 34 | <div class="h-dot active"> |
| 35 | </div> |
| 36 | <div class="h-card"> |
| 37 | <span class="h-date"> |
| 38 | Mar |
| 39 | </span> |
| 40 | <h4 class="h-title"> |
| 41 | Development |
| 42 | </h4> |
| 43 | <p class="h-desc"> |
| 44 | In progress |
| 45 | </p> |
| 46 | </div> |
| 47 | </div> |
| 48 | <div class="h-tl-item"> |
| 49 | <div class="h-dot"> |
| 50 | </div> |
| 51 | <div class="h-card"> |
| 52 | <span class="h-date"> |
| 53 | Apr |
| 54 | </span> |
| 55 | <h4 class="h-title"> |
| 56 | Testing |
| 57 | </h4> |
| 58 | <p class="h-desc"> |
| 59 | QA phase |
| 60 | </p> |
| 61 | </div> |
| 62 | </div> |
| 63 | <div class="h-tl-item"> |
| 64 | <div class="h-dot"> |
| 65 | </div> |
| 66 | <div class="h-card"> |
| 67 | <span class="h-date"> |
| 68 | May |
| 69 | </span> |
| 70 | <h4 class="h-title"> |
| 71 | Launch |
| 72 | </h4> |
| 73 | <p class="h-desc"> |
| 74 | Go live |
| 75 | </p> |
| 76 | </div> |
| 77 | </div> |
| 78 | </div> |
| 79 | </div> |
untitled.css
CSS
| 1 | .h-tl-wrap { |
| 2 | padding:20px 24px; |
| 3 | overflow-x:auto; |
| 4 | font-family:system-ui, |
| 5 | sans-serif |
| 6 | } |
| 7 | .h-tl { |
| 8 | display:flex; |
| 9 | align-items:flex-start; |
| 10 | gap:0; |
| 11 | min-width:500px; |
| 12 | position:relative; |
| 13 | padding-top:20px |
| 14 | } |
| 15 | .h-tl::before { |
| 16 | content:''; |
| 17 | position:absolute; |
| 18 | top:26px; |
| 19 | left:0; |
| 20 | right:0; |
| 21 | height:2px; |
| 22 | background:#2A2A2A |
| 23 | } |
| 24 | .h-tl-item { |
| 25 | flex:1; |
| 26 | display:flex; |
| 27 | flex-direction:column; |
| 28 | align-items:center; |
| 29 | position:relative |
| 30 | } |
| 31 | .h-dot { |
| 32 | width:14px; |
| 33 | height:14px; |
| 34 | border-radius:50%; |
| 35 | background:#0D0D0D; |
| 36 | border:2px solid #3A3A3A; |
| 37 | z-index:1; |
| 38 | transition:all .2s; |
| 39 | margin-bottom:12px |
| 40 | } |
| 41 | .h-dot.done { |
| 42 | border-color:#22C55E; |
| 43 | background:#22C55E |
| 44 | } |
| 45 | .h-dot.active { |
| 46 | border-color:#00FF41; |
| 47 | background:#00FF41; |
| 48 | box-shadow:0 0 12px rgba(0, |
| 49 | 255, |
| 50 | 65, |
| 51 | .4) |
| 52 | } |
| 53 | .h-card { |
| 54 | text-align:center; |
| 55 | padding:0 8px |
| 56 | } |
| 57 | .h-date { |
| 58 | font-size:10px; |
| 59 | color:#666; |
| 60 | font-weight:600; |
| 61 | text-transform:uppercase; |
| 62 | letter-spacing:.5px |
| 63 | } |
| 64 | .h-title { |
| 65 | font-size:12px; |
| 66 | font-weight:700; |
| 67 | color:#E0E0E0; |
| 68 | margin:2px 0 |
| 69 | } |
| 70 | .h-desc { |
| 71 | font-size:11px; |
| 72 | color:#808080; |
| 73 | margin:0 |
| 74 | } |
untitled.html
HTML
| 1 | <div class="overflow-x-auto p-5"> |
| 2 | <div class="flex items-start min-w-[500px] relative pt-5"> |
| 3 | <div class="absolute top-[26px] left-0 right-0 h-0.5 bg-[#2A2A2A]"> |
| 4 | </div> |
| 5 | <div class="flex-1 flex flex-col items-center relative"> |
| 6 | <div class="w-3.5 h-3.5 rounded-full bg-[#0D0D0D] border-2 border-green-500 bg-green-500 z-10 mb-3"> |
| 7 | </div> |
| 8 | <div class="text-center px-2"> |
| 9 | <span class="block text-[10px] text-[#666666] font-semibold uppercase tracking-wider"> |
| 10 | Jan |
| 11 | </span> |
| 12 | <h4 class="text-xs font-bold text-[#E0E0E0] my-0.5"> |
| 13 | Planning |
| 14 | </h4> |
| 15 | <p class="text-[11px] text-[#808080] m-0"> |
| 16 | Scope defined |
| 17 | </p> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="flex-1 flex flex-col items-center relative"> |
| 21 | <div class="w-3.5 h-3.5 rounded-full bg-[#0D0D0D] border-2 border-green-500 bg-green-500 z-10 mb-3"> |
| 22 | </div> |
| 23 | <div class="text-center px-2"> |
| 24 | <span class="block text-[10px] text-[#666666] font-semibold uppercase tracking-wider"> |
| 25 | Feb |
| 26 | </span> |
| 27 | <h4 class="text-xs font-bold text-[#E0E0E0] my-0.5"> |
| 28 | Design |
| 29 | </h4> |
| 30 | <p class="text-[11px] text-[#808080] m-0"> |
| 31 | Mockups ready |
| 32 | </p> |
| 33 | </div> |
| 34 | </div> |
| 35 | <div class="flex-1 flex flex-col items-center relative"> |
| 36 | <div class="w-3.5 h-3.5 rounded-full border-2 border-[#00FF41] bg-[#00FF41] shadow-[0_0_12px_rgba(0,255,65,0.4)] z-10 mb-3"> |
| 37 | </div> |
| 38 | <div class="text-center px-2"> |
| 39 | <span class="block text-[10px] text-[#666666] font-semibold uppercase tracking-wider"> |
| 40 | Mar |
| 41 | </span> |
| 42 | <h4 class="text-xs font-bold text-[#E0E0E0] my-0.5"> |
| 43 | Development |
| 44 | </h4> |
| 45 | <p class="text-[11px] text-[#808080] m-0"> |
| 46 | In progress |
| 47 | </p> |
| 48 | </div> |
| 49 | </div> |
| 50 | <div class="flex-1 flex flex-col items-center relative"> |
| 51 | <div class="w-3.5 h-3.5 rounded-full bg-[#0D0D0D] border-2 border-[#3A3A3A] z-10 mb-3"> |
| 52 | </div> |
| 53 | <div class="text-center px-2"> |
| 54 | <span class="block text-[10px] text-[#666666] font-semibold uppercase tracking-wider"> |
| 55 | Apr |
| 56 | </span> |
| 57 | <h4 class="text-xs font-bold text-[#E0E0E0] my-0.5"> |
| 58 | Testing |
| 59 | </h4> |
| 60 | <p class="text-[11px] text-[#808080] m-0"> |
| 61 | QA phase |
| 62 | </p> |
| 63 | </div> |
| 64 | </div> |
| 65 | <div class="flex-1 flex flex-col items-center relative"> |
| 66 | <div class="w-3.5 h-3.5 rounded-full bg-[#0D0D0D] border-2 border-[#3A3A3A] z-10 mb-3"> |
| 67 | </div> |
| 68 | <div class="text-center px-2"> |
| 69 | <span class="block text-[10px] text-[#666666] font-semibold uppercase tracking-wider"> |
| 70 | May |
| 71 | </span> |
| 72 | <h4 class="text-xs font-bold text-[#E0E0E0] my-0.5"> |
| 73 | Launch |
| 74 | </h4> |
| 75 | <p class="text-[11px] text-[#808080] m-0"> |
| 76 | Go live |
| 77 | </p> |
| 78 | </div> |
| 79 | </div> |
| 80 | </div> |
| 81 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .h-bs{display:flex;align-items:flex-start;gap:0;min-width:500px;position:relative;padding-top:20px}.h-bs::before{content:'';position:absolute;top:26px;left:0;right:0;height:2px;background:#2A2A2A}.h-bs-item{flex:1;display:flex;flex-direction:column;align-items:center;position:relative}.h-bs-dot{width:14px;height:14px;border-radius:50%;background:#0D0D0D;border:2px solid #3A3A3A;z-index:1;margin-bottom:12px}.h-bs-dot.done{border-color:#22C55E;background:#22C55E}.h-bs-dot.active{border-color:#00FF41;background:#00FF41;box-shadow:0 0 12px rgba(0,255,65,.4)} |
| 3 | </style> |
| 4 | <div class="overflow-auto p-4"> |
| 5 | <div class="h-bs"> |
| 6 | <div class="h-bs-item"> |
| 7 | <div class="h-bs-dot done"> |
| 8 | </div> |
| 9 | <div class="text-center px-2"> |
| 10 | <span class="d-block fw-semibold text-uppercase" style="font-size:10px;color:#666;letter-spacing:.5px"> |
| 11 | Jan |
| 12 | </span> |
| 13 | <h4 class="fw-bold my-1" style="font-size:12px;color:#E0E0E0"> |
| 14 | Planning |
| 15 | </h4> |
| 16 | <p class="mb-0" style="font-size:11px;color:#808080"> |
| 17 | Scope defined |
| 18 | </p> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="h-bs-item"> |
| 22 | <div class="h-bs-dot done"> |
| 23 | </div> |
| 24 | <div class="text-center px-2"> |
| 25 | <span class="d-block fw-semibold text-uppercase" style="font-size:10px;color:#666;letter-spacing:.5px"> |
| 26 | Feb |
| 27 | </span> |
| 28 | <h4 class="fw-bold my-1" style="font-size:12px;color:#E0E0E0"> |
| 29 | Design |
| 30 | </h4> |
| 31 | <p class="mb-0" style="font-size:11px;color:#808080"> |
| 32 | Mockups ready |
| 33 | </p> |
| 34 | </div> |
| 35 | </div> |
| 36 | <div class="h-bs-item"> |
| 37 | <div class="h-bs-dot active"> |
| 38 | </div> |
| 39 | <div class="text-center px-2"> |
| 40 | <span class="d-block fw-semibold text-uppercase" style="font-size:10px;color:#666;letter-spacing:.5px"> |
| 41 | Mar |
| 42 | </span> |
| 43 | <h4 class="fw-bold my-1" style="font-size:12px;color:#E0E0E0"> |
| 44 | Development |
| 45 | </h4> |
| 46 | <p class="mb-0" style="font-size:11px;color:#808080"> |
| 47 | In progress |
| 48 | </p> |
| 49 | </div> |
| 50 | </div> |
| 51 | <div class="h-bs-item"> |
| 52 | <div class="h-bs-dot"> |
| 53 | </div> |
| 54 | <div class="text-center px-2"> |
| 55 | <span class="d-block fw-semibold text-uppercase" style="font-size:10px;color:#666;letter-spacing:.5px"> |
| 56 | Apr |
| 57 | </span> |
| 58 | <h4 class="fw-bold my-1" style="font-size:12px;color:#E0E0E0"> |
| 59 | Testing |
| 60 | </h4> |
| 61 | <p class="mb-0" style="font-size:11px;color:#808080"> |
| 62 | QA phase |
| 63 | </p> |
| 64 | </div> |
| 65 | </div> |
| 66 | <div class="h-bs-item"> |
| 67 | <div class="h-bs-dot"> |
| 68 | </div> |
| 69 | <div class="text-center px-2"> |
| 70 | <span class="d-block fw-semibold text-uppercase" style="font-size:10px;color:#666;letter-spacing:.5px"> |
| 71 | May |
| 72 | </span> |
| 73 | <h4 class="fw-bold my-1" style="font-size:12px;color:#E0E0E0"> |
| 74 | Launch |
| 75 | </h4> |
| 76 | <p class="mb-0" style="font-size:11px;color:#808080"> |
| 77 | Go live |
| 78 | </p> |
| 79 | </div> |
| 80 | </div> |
| 81 | </div> |
| 82 | </div> |
Compact Activity Feed
A dense, compact timeline for activity feeds, audit logs, and changelogs. Each item is a single line with timestamp, colored icon, and action description. Icons indicate action type — additions, modifications, errors, and removals.
compact-activity
Live
untitled.html
HTML
| 1 | <div class="feed"> |
| 2 | <div class="feed-item"> |
| 3 | <span class="feed-time"> |
| 4 | 2m ago |
| 5 | </span> |
| 6 | <span class="feed-icon green"> |
| 7 | + |
| 8 | </span> |
| 9 | <span class="feed-text"> |
| 10 | <strong> |
| 11 | Sarah |
| 12 | </strong> |
| 13 | deployed |
| 14 | <code> |
| 15 | v2.4.1 |
| 16 | </code> |
| 17 | to production |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="feed-item"> |
| 21 | <span class="feed-time"> |
| 22 | 14m ago |
| 23 | </span> |
| 24 | <span class="feed-icon blue"> |
| 25 | ● |
| 26 | </span> |
| 27 | <span class="feed-text"> |
| 28 | <strong> |
| 29 | Mike |
| 30 | </strong> |
| 31 | opened PR #847: Fix auth token refresh |
| 32 | </span> |
| 33 | </div> |
| 34 | <div class="feed-item"> |
| 35 | <span class="feed-time"> |
| 36 | 32m ago |
| 37 | </span> |
| 38 | <span class="feed-icon yellow"> |
| 39 | ! |
| 40 | </span> |
| 41 | <span class="feed-text"> |
| 42 | <strong> |
| 43 | CI |
| 44 | </strong> |
| 45 | build failed on |
| 46 | <code> |
| 47 | main |
| 48 | </code> |
| 49 | — lint errors |
| 50 | </span> |
| 51 | </div> |
| 52 | <div class="feed-item"> |
| 53 | <span class="feed-time"> |
| 54 | 1h ago |
| 55 | </span> |
| 56 | <span class="feed-icon green"> |
| 57 | + |
| 58 | </span> |
| 59 | <span class="feed-text"> |
| 60 | <strong> |
| 61 | Alex |
| 62 | </strong> |
| 63 | merged PR #845: Add rate limiting middleware |
| 64 | </span> |
| 65 | </div> |
| 66 | <div class="feed-item"> |
| 67 | <span class="feed-time"> |
| 68 | 2h ago |
| 69 | </span> |
| 70 | <span class="feed-icon purple"> |
| 71 | ✎ |
| 72 | </span> |
| 73 | <span class="feed-text"> |
| 74 | <strong> |
| 75 | Jordan |
| 76 | </strong> |
| 77 | updated API docs for v2 endpoints |
| 78 | </span> |
| 79 | </div> |
| 80 | <div class="feed-item"> |
| 81 | <span class="feed-time"> |
| 82 | 3h ago |
| 83 | </span> |
| 84 | <span class="feed-icon red"> |
| 85 | − |
| 86 | </span> |
| 87 | <span class="feed-text"> |
| 88 | <strong> |
| 89 | Bot |
| 90 | </strong> |
| 91 | auto-closed stale issue #623 (30d inactivity) |
| 92 | </span> |
| 93 | </div> |
| 94 | <div class="feed-item"> |
| 95 | <span class="feed-time"> |
| 96 | 5h ago |
| 97 | </span> |
| 98 | <span class="feed-icon blue"> |
| 99 | ● |
| 100 | </span> |
| 101 | <span class="feed-text"> |
| 102 | <strong> |
| 103 | Emily |
| 104 | </strong> |
| 105 | started review on PR #842: DB migration |
| 106 | </span> |
| 107 | </div> |
| 108 | </div> |
untitled.css
CSS
| 1 | .feed { |
| 2 | padding:16px 24px; |
| 3 | font-family:system-ui, |
| 4 | sans-serif; |
| 5 | display:flex; |
| 6 | flex-direction:column |
| 7 | } |
| 8 | .feed-item { |
| 9 | display:flex; |
| 10 | align-items:center; |
| 11 | gap:12px; |
| 12 | padding:10px 12px; |
| 13 | border-radius:8px; |
| 14 | transition:background .15s; |
| 15 | font-size:12px; |
| 16 | border-bottom:1px solid #1A1A1A |
| 17 | } |
| 18 | .feed-item:last-child { |
| 19 | border-bottom:none |
| 20 | } |
| 21 | .feed-item:hover { |
| 22 | background:rgba(255, |
| 23 | 255, |
| 24 | 255, |
| 25 | .02) |
| 26 | } |
| 27 | .feed-time { |
| 28 | font-size:11px; |
| 29 | color:#555; |
| 30 | min-width:52px; |
| 31 | flex-shrink:0; |
| 32 | font-weight:500 |
| 33 | } |
| 34 | .feed-icon { |
| 35 | width:22px; |
| 36 | height:22px; |
| 37 | border-radius:50%; |
| 38 | display:flex; |
| 39 | align-items:center; |
| 40 | justify-content:center; |
| 41 | font-size:11px; |
| 42 | font-weight:700; |
| 43 | flex-shrink:0 |
| 44 | } |
| 45 | .feed-icon.green { |
| 46 | background:rgba(34, |
| 47 | 197, |
| 48 | 94, |
| 49 | .12); |
| 50 | color:#22C55E |
| 51 | } |
| 52 | .feed-icon.blue { |
| 53 | background:rgba(59, |
| 54 | 130, |
| 55 | 246, |
| 56 | .12); |
| 57 | color:#3B82F6 |
| 58 | } |
| 59 | .feed-icon.yellow { |
| 60 | background:rgba(234, |
| 61 | 179, |
| 62 | 8, |
| 63 | .12); |
| 64 | color:#EAB308 |
| 65 | } |
| 66 | .feed-icon.red { |
| 67 | background:rgba(239, |
| 68 | 68, |
| 69 | 68, |
| 70 | .12); |
| 71 | color:#EF4444 |
| 72 | } |
| 73 | .feed-icon.purple { |
| 74 | background:rgba(168, |
| 75 | 85, |
| 76 | 247, |
| 77 | .12); |
| 78 | color:#A855F7 |
| 79 | } |
| 80 | .feed-text { |
| 81 | color:#A0A0A0; |
| 82 | line-height:1.4 |
| 83 | } |
| 84 | .feed-text strong { |
| 85 | color:#E0E0E0; |
| 86 | font-weight:600 |
| 87 | } |
| 88 | .feed-text code { |
| 89 | font-family:monospace; |
| 90 | font-size:11px; |
| 91 | background:rgba(255, |
| 92 | 255, |
| 93 | 255, |
| 94 | .06); |
| 95 | padding:1px 5px; |
| 96 | border-radius:3px; |
| 97 | color:#00FF41 |
| 98 | } |
untitled.html
HTML
| 1 | <div class="flex flex-col p-4"> |
| 2 | <div class="flex items-center gap-3 py-2.5 px-3 rounded-lg transition hover:bg-white/[0.02] border-b border-[#1A1A1A] last:border-b-0 text-xs"> |
| 3 | <span class="text-[11px] text-[#555555] min-w-[52px] font-medium shrink-0"> |
| 4 | 2m ago |
| 5 | </span> |
| 6 | <span class="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold bg-green-500/12 text-green-500 shrink-0"> |
| 7 | + |
| 8 | </span> |
| 9 | <span class="text-[#A0A0A0] leading-snug"> |
| 10 | <strong class="text-[#E0E0E0] font-semibold"> |
| 11 | Sarah |
| 12 | </strong> |
| 13 | deployed |
| 14 | <code class="font-mono text-[11px] bg-white/[0.06] text-[#00FF41] px-1 py-px rounded"> |
| 15 | v2.4.1 |
| 16 | </code> |
| 17 | to production |
| 18 | </span> |
| 19 | </div> |
| 20 | <div class="flex items-center gap-3 py-2.5 px-3 rounded-lg transition hover:bg-white/[0.02] border-b border-[#1A1A1A] last:border-b-0 text-xs"> |
| 21 | <span class="text-[11px] text-[#555555] min-w-[52px] font-medium shrink-0"> |
| 22 | 14m ago |
| 23 | </span> |
| 24 | <span class="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold bg-blue-500/12 text-blue-500 shrink-0"> |
| 25 | ● |
| 26 | </span> |
| 27 | <span class="text-[#A0A0A0] leading-snug"> |
| 28 | <strong class="text-[#E0E0E0] font-semibold"> |
| 29 | Mike |
| 30 | </strong> |
| 31 | opened PR #847: Fix auth token refresh |
| 32 | </span> |
| 33 | </div> |
| 34 | <div class="flex items-center gap-3 py-2.5 px-3 rounded-lg transition hover:bg-white/[0.02] border-b border-[#1A1A1A] last:border-b-0 text-xs"> |
| 35 | <span class="text-[11px] text-[#555555] min-w-[52px] font-medium shrink-0"> |
| 36 | 32m ago |
| 37 | </span> |
| 38 | <span class="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold bg-yellow-500/12 text-yellow-500 shrink-0"> |
| 39 | ! |
| 40 | </span> |
| 41 | <span class="text-[#A0A0A0] leading-snug"> |
| 42 | <strong class="text-[#E0E0E0] font-semibold"> |
| 43 | CI |
| 44 | </strong> |
| 45 | build failed on |
| 46 | <code class="font-mono text-[11px] bg-white/[0.06] text-[#00FF41] px-1 py-px rounded"> |
| 47 | main |
| 48 | </code> |
| 49 | — lint errors |
| 50 | </span> |
| 51 | </div> |
| 52 | <div class="flex items-center gap-3 py-2.5 px-3 rounded-lg transition hover:bg-white/[0.02] border-b border-[#1A1A1A] last:border-b-0 text-xs"> |
| 53 | <span class="text-[11px] text-[#555555] min-w-[52px] font-medium shrink-0"> |
| 54 | 1h ago |
| 55 | </span> |
| 56 | <span class="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold bg-green-500/12 text-green-500 shrink-0"> |
| 57 | + |
| 58 | </span> |
| 59 | <span class="text-[#A0A0A0] leading-snug"> |
| 60 | <strong class="text-[#E0E0E0] font-semibold"> |
| 61 | Alex |
| 62 | </strong> |
| 63 | merged PR #845: Add rate limiting middleware |
| 64 | </span> |
| 65 | </div> |
| 66 | <div class="flex items-center gap-3 py-2.5 px-3 rounded-lg transition hover:bg-white/[0.02] border-b border-[#1A1A1A] last:border-b-0 text-xs"> |
| 67 | <span class="text-[11px] text-[#555555] min-w-[52px] font-medium shrink-0"> |
| 68 | 2h ago |
| 69 | </span> |
| 70 | <span class="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold bg-purple-500/12 text-purple-500 shrink-0"> |
| 71 | ✎ |
| 72 | </span> |
| 73 | <span class="text-[#A0A0A0] leading-snug"> |
| 74 | <strong class="text-[#E0E0E0] font-semibold"> |
| 75 | Jordan |
| 76 | </strong> |
| 77 | updated API docs for v2 endpoints |
| 78 | </span> |
| 79 | </div> |
| 80 | <div class="flex items-center gap-3 py-2.5 px-3 rounded-lg transition hover:bg-white/[0.02] border-b border-[#1A1A1A] last:border-b-0 text-xs"> |
| 81 | <span class="text-[11px] text-[#555555] min-w-[52px] font-medium shrink-0"> |
| 82 | 3h ago |
| 83 | </span> |
| 84 | <span class="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold bg-red-500/12 text-red-500 shrink-0"> |
| 85 | − |
| 86 | </span> |
| 87 | <span class="text-[#A0A0A0] leading-snug"> |
| 88 | <strong class="text-[#E0E0E0] font-semibold"> |
| 89 | Bot |
| 90 | </strong> |
| 91 | auto-closed stale issue #623 (30d inactivity) |
| 92 | </span> |
| 93 | </div> |
| 94 | <div class="flex items-center gap-3 py-2.5 px-3 rounded-lg transition hover:bg-white/[0.02] text-xs"> |
| 95 | <span class="text-[11px] text-[#555555] min-w-[52px] font-medium shrink-0"> |
| 96 | 5h ago |
| 97 | </span> |
| 98 | <span class="w-[22px] h-[22px] rounded-full flex items-center justify-center text-[11px] font-bold bg-blue-500/12 text-blue-500 shrink-0"> |
| 99 | ● |
| 100 | </span> |
| 101 | <span class="text-[#A0A0A0] leading-snug"> |
| 102 | <strong class="text-[#E0E0E0] font-semibold"> |
| 103 | Emily |
| 104 | </strong> |
| 105 | started review on PR #842: DB migration |
| 106 | </span> |
| 107 | </div> |
| 108 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .feed-bs{display:flex;flex-direction:column;padding:16px 24px}.feed-bs-item{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:8px;transition:background .15s;font-size:12px;border-bottom:1px solid #1A1A1A}.feed-bs-item:last-child{border-bottom:none}.feed-bs-item:hover{background:rgba(255,255,255,.02)}.feed-bs-time{font-size:11px;color:#555;min-width:52px;flex-shrink:0;font-weight:500}.feed-bs-icon{width:22px;height:22px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}.feed-bs-text{color:#A0A0A0;line-height:1.4}.feed-bs-text strong{color:#E0E0E0;font-weight:600}.feed-bs-text code{font-family:monospace;font-size:11px;background:rgba(255,255,255,.06);padding:1px 5px;border-radius:3px;color:#00FF41} |
| 3 | </style> |
| 4 | <div class="feed-bs"> |
| 5 | <div class="feed-bs-item"> |
| 6 | <span class="feed-bs-time"> |
| 7 | 2m ago |
| 8 | </span> |
| 9 | <span class="feed-bs-icon" style="background:rgba(34,197,94,.12);color:#22C55E"> |
| 10 | + |
| 11 | </span> |
| 12 | <span class="feed-bs-text"> |
| 13 | <strong> |
| 14 | Sarah |
| 15 | </strong> |
| 16 | deployed |
| 17 | <code> |
| 18 | v2.4.1 |
| 19 | </code> |
| 20 | to production |
| 21 | </span> |
| 22 | </div> |
| 23 | <div class="feed-bs-item"> |
| 24 | <span class="feed-bs-time"> |
| 25 | 14m ago |
| 26 | </span> |
| 27 | <span class="feed-bs-icon" style="background:rgba(59,130,246,.12);color:#3B82F6"> |
| 28 | ● |
| 29 | </span> |
| 30 | <span class="feed-bs-text"> |
| 31 | <strong> |
| 32 | Mike |
| 33 | </strong> |
| 34 | opened PR #847: Fix auth token refresh |
| 35 | </span> |
| 36 | </div> |
| 37 | <div class="feed-bs-item"> |
| 38 | <span class="feed-bs-time"> |
| 39 | 32m ago |
| 40 | </span> |
| 41 | <span class="feed-bs-icon" style="background:rgba(234,179,8,.12);color:#EAB308"> |
| 42 | ! |
| 43 | </span> |
| 44 | <span class="feed-bs-text"> |
| 45 | <strong> |
| 46 | CI |
| 47 | </strong> |
| 48 | build failed on |
| 49 | <code> |
| 50 | main |
| 51 | </code> |
| 52 | — lint errors |
| 53 | </span> |
| 54 | </div> |
| 55 | <div class="feed-bs-item"> |
| 56 | <span class="feed-bs-time"> |
| 57 | 1h ago |
| 58 | </span> |
| 59 | <span class="feed-bs-icon" style="background:rgba(34,197,94,.12);color:#22C55E"> |
| 60 | + |
| 61 | </span> |
| 62 | <span class="feed-bs-text"> |
| 63 | <strong> |
| 64 | Alex |
| 65 | </strong> |
| 66 | merged PR #845: Add rate limiting middleware |
| 67 | </span> |
| 68 | </div> |
| 69 | <div class="feed-bs-item"> |
| 70 | <span class="feed-bs-time"> |
| 71 | 2h ago |
| 72 | </span> |
| 73 | <span class="feed-bs-icon" style="background:rgba(168,85,247,.12);color:#A855F7"> |
| 74 | ✎ |
| 75 | </span> |
| 76 | <span class="feed-bs-text"> |
| 77 | <strong> |
| 78 | Jordan |
| 79 | </strong> |
| 80 | updated API docs for v2 endpoints |
| 81 | </span> |
| 82 | </div> |
| 83 | <div class="feed-bs-item"> |
| 84 | <span class="feed-bs-time"> |
| 85 | 3h ago |
| 86 | </span> |
| 87 | <span class="feed-bs-icon" style="background:rgba(239,68,68,.12);color:#EF4444"> |
| 88 | − |
| 89 | </span> |
| 90 | <span class="feed-bs-text"> |
| 91 | <strong> |
| 92 | Bot |
| 93 | </strong> |
| 94 | auto-closed stale issue #623 (30d inactivity) |
| 95 | </span> |
| 96 | </div> |
| 97 | <div class="feed-bs-item"> |
| 98 | <span class="feed-bs-time"> |
| 99 | 5h ago |
| 100 | </span> |
| 101 | <span class="feed-bs-icon" style="background:rgba(59,130,246,.12);color:#3B82F6"> |
| 102 | ● |
| 103 | </span> |
| 104 | <span class="feed-bs-text"> |
| 105 | <strong> |
| 106 | Emily |
| 107 | </strong> |
| 108 | started review on PR #842: DB migration |
| 109 | </span> |
| 110 | </div> |
| 111 | </div> |
Nested Events
Parent events can contain nested child events for sub-steps. This is useful for sprint retrospectives, release notes, or any hierarchical process where major milestones contain smaller tasks.
nested-timeline
Live
untitled.html
HTML
| 1 | <div class="tl nested-tl"> |
| 2 | <div class="tl-item"> |
| 3 | <div class="tl-dot active"> |
| 4 | </div> |
| 5 | <div class="tl-content"> |
| 6 | <span class="tl-date"> |
| 7 | Sprint 12 — Mar 1 to Mar 14 |
| 8 | </span> |
| 9 | <h4 class="tl-title"> |
| 10 | Authentication Overhaul |
| 11 | </h4> |
| 12 | <p class="tl-desc"> |
| 13 | Complete redesign of the auth system with OAuth 2.0 and SAML support. |
| 14 | </p> |
| 15 | <div class="tl-nested"> |
| 16 | <div class="tl-nested-item"> |
| 17 | <span class="tl-nested-dot done"> |
| 18 | </span> |
| 19 | <span class="tl-nested-text"> |
| 20 | Implement OAuth 2.0 provider abstraction |
| 21 | </span> |
| 22 | </div> |
| 23 | <div class="tl-nested-item"> |
| 24 | <span class="tl-nested-dot done"> |
| 25 | </span> |
| 26 | <span class="tl-nested-text"> |
| 27 | Add SAML integration for enterprise SSO |
| 28 | </span> |
| 29 | </div> |
| 30 | <div class="tl-nested-item"> |
| 31 | <span class="tl-nested-dot active"> |
| 32 | </span> |
| 33 | <span class="tl-nested-text"> |
| 34 | Build session management dashboard |
| 35 | </span> |
| 36 | </div> |
| 37 | <div class="tl-nested-item"> |
| 38 | <span class="tl-nested-dot pending"> |
| 39 | </span> |
| 40 | <span class="tl-nested-text"> |
| 41 | Write migration script for existing users |
| 42 | </span> |
| 43 | </div> |
| 44 | </div> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
untitled.css
CSS
| 1 | .tl.nested-tl { |
| 2 | position:relative; |
| 3 | padding:12px 24px 12px 36px; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | margin-left:12px |
| 7 | } |
| 8 | .tl.nested-tl::before { |
| 9 | content:''; |
| 10 | position:absolute; |
| 11 | left:30px; |
| 12 | top:0; |
| 13 | bottom:0; |
| 14 | width:2px; |
| 15 | background:#2A2A2A |
| 16 | } |
| 17 | .tl.nested-tl .tl-item { |
| 18 | position:relative; |
| 19 | display:flex; |
| 20 | padding:0 0 20px 0 |
| 21 | } |
| 22 | .tl.nested-tl .tl-dot { |
| 23 | position:absolute; |
| 24 | left:-18px; |
| 25 | top:6px; |
| 26 | width:12px; |
| 27 | height:12px; |
| 28 | border-radius:50%; |
| 29 | border:2px solid #3A3A3A; |
| 30 | background:#0D0D0D; |
| 31 | z-index:1 |
| 32 | } |
| 33 | .tl.nested-tl .tl-dot.active { |
| 34 | border-color:#00FF41; |
| 35 | background:#00FF41; |
| 36 | box-shadow:0 0 10px rgba(0, |
| 37 | 255, |
| 38 | 65, |
| 39 | .4) |
| 40 | } |
| 41 | .tl.nested-tl .tl-content { |
| 42 | flex:1; |
| 43 | padding-left:12px |
| 44 | } |
| 45 | .tl-date { |
| 46 | font-size:11px; |
| 47 | color:#666; |
| 48 | font-weight:500; |
| 49 | text-transform:uppercase; |
| 50 | letter-spacing:.3px |
| 51 | } |
| 52 | .tl-title { |
| 53 | font-size:14px; |
| 54 | font-weight:700; |
| 55 | color:#E0E0E0; |
| 56 | margin:4px 0; |
| 57 | line-height:1.3 |
| 58 | } |
| 59 | .tl-desc { |
| 60 | font-size:12px; |
| 61 | color:#808080; |
| 62 | line-height:1.6; |
| 63 | margin:0 0 12px |
| 64 | } |
| 65 | .tl-nested { |
| 66 | display:flex; |
| 67 | flex-direction:column; |
| 68 | gap:8px; |
| 69 | padding:12px; |
| 70 | border-radius:8px; |
| 71 | background:rgba(255, |
| 72 | 255, |
| 73 | 255, |
| 74 | .02); |
| 75 | border:1px solid #222 |
| 76 | } |
| 77 | .tl-nested-item { |
| 78 | display:flex; |
| 79 | align-items:center; |
| 80 | gap:10px; |
| 81 | font-size:12px; |
| 82 | color:#A0A0A0 |
| 83 | } |
| 84 | .tl-nested-dot { |
| 85 | width:8px; |
| 86 | height:8px; |
| 87 | border-radius:50%; |
| 88 | flex-shrink:0; |
| 89 | border:1.5px solid #3A3A3A; |
| 90 | background:#0D0D0D |
| 91 | } |
| 92 | .tl-nested-dot.done { |
| 93 | border-color:#22C55E; |
| 94 | background:#22C55E |
| 95 | } |
| 96 | .tl-nested-dot.active { |
| 97 | border-color:#00FF41; |
| 98 | background:#00FF41 |
| 99 | } |
| 100 | .tl-nested-dot.pending { |
| 101 | border-color:#EAB308; |
| 102 | background:transparent |
| 103 | } |
| 104 | .tl-nested-text { |
| 105 | line-height:1.4 |
| 106 | } |
untitled.html
HTML
| 1 | <div class="relative py-3 pl-10 ml-3"> |
| 2 | <div class="absolute left-[30px] top-0 bottom-0 w-0.5 bg-[#2A2A2A]"> |
| 3 | </div> |
| 4 | <div class="relative flex pb-5"> |
| 5 | <div class="absolute -left-[18px] top-1.5 w-3 h-3 rounded-full border-2 border-[#00FF41] bg-[#00FF41] shadow-[0_0_10px_rgba(0,255,65,0.4)]"> |
| 6 | </div> |
| 7 | <div class="pl-3 flex-1"> |
| 8 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 9 | Sprint 12 — Mar 1 to Mar 14 |
| 10 | </span> |
| 11 | <h4 class="text-sm font-bold text-[#E0E0E0] mt-1 mb-1 leading-tight"> |
| 12 | Authentication Overhaul |
| 13 | </h4> |
| 14 | <p class="text-xs text-[#808080] leading-relaxed mb-3"> |
| 15 | Complete redesign of the auth system with OAuth 2.0 and SAML support. |
| 16 | </p> |
| 17 | <div class="flex flex-col gap-2 p-3 rounded-lg bg-white/[0.02] border border-[#222222]"> |
| 18 | <div class="flex items-center gap-2.5 text-xs text-[#A0A0A0]"> |
| 19 | <span class="w-2 h-2 rounded-full shrink-0 border-[1.5px] border-green-500 bg-green-500"> |
| 20 | </span> |
| 21 | <span class="leading-snug"> |
| 22 | Implement OAuth 2.0 provider abstraction |
| 23 | </span> |
| 24 | </div> |
| 25 | <div class="flex items-center gap-2.5 text-xs text-[#A0A0A0]"> |
| 26 | <span class="w-2 h-2 rounded-full shrink-0 border-[1.5px] border-green-500 bg-green-500"> |
| 27 | </span> |
| 28 | <span class="leading-snug"> |
| 29 | Add SAML integration for enterprise SSO |
| 30 | </span> |
| 31 | </div> |
| 32 | <div class="flex items-center gap-2.5 text-xs text-[#A0A0A0]"> |
| 33 | <span class="w-2 h-2 rounded-full shrink-0 border-[1.5px] border-[#00FF41] bg-[#00FF41]"> |
| 34 | </span> |
| 35 | <span class="leading-snug"> |
| 36 | Build session management dashboard |
| 37 | </span> |
| 38 | </div> |
| 39 | <div class="flex items-center gap-2.5 text-xs text-[#A0A0A0]"> |
| 40 | <span class="w-2 h-2 rounded-full shrink-0 border-[1.5px] border-yellow-500 bg-transparent"> |
| 41 | </span> |
| 42 | <span class="leading-snug"> |
| 43 | Write migration script for existing users |
| 44 | </span> |
| 45 | </div> |
| 46 | </div> |
| 47 | </div> |
| 48 | </div> |
| 49 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .nested-bs{position:relative;padding:12px 24px 12px 36px;margin-left:12px}.nested-bs::before{content:'';position:absolute;left:30px;top:0;bottom:0;width:2px;background:#2A2A2A}.nested-bs-item{position:relative;display:flex;padding:0 0 20px 0}.nested-bs-dot{position:absolute;left:-18px;top:6px;width:12px;height:12px;border-radius:50%;border:2px solid #00FF41;background:#00FF41;box-shadow:0 0 10px rgba(0,255,65,.4)}.nested-bs-content{flex:1;padding-left:12px}.nested-bs-nested{display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:8px;background:rgba(255,255,255,.02);border:1px solid #222}.nested-bs-row{display:flex;align-items:center;gap:10px;font-size:12px;color:#A0A0A0}.nested-bs-sm{width:8px;height:8px;border-radius:50%;flex-shrink:0;border:1.5px solid #3A3A3A;background:#0D0D0D}.nested-bs-sm.done{border-color:#22C55E;background:#22C55E}.nested-bs-sm.active{border-color:#00FF41;background:#00FF41}.nested-bs-sm.pending{border-color:#EAB308;background:transparent} |
| 3 | </style> |
| 4 | <div class="nested-bs"> |
| 5 | <div class="nested-bs-item"> |
| 6 | <div class="nested-bs-dot"> |
| 7 | </div> |
| 8 | <div class="nested-bs-content"> |
| 9 | <span class="d-block text-uppercase fw-medium" style="font-size:11px;color:#666"> |
| 10 | Sprint 12 — Mar 1 to Mar 14 |
| 11 | </span> |
| 12 | <h4 class="fw-bold mb-1 mt-1" style="font-size:14px;color:#E0E0E0"> |
| 13 | Authentication Overhaul |
| 14 | </h4> |
| 15 | <p class="mb-3" style="font-size:12px;color:#808080;line-height:1.6"> |
| 16 | Complete redesign of the auth system with OAuth 2.0 and SAML support. |
| 17 | </p> |
| 18 | <div class="nested-bs-nested"> |
| 19 | <div class="nested-bs-row"> |
| 20 | <span class="nested-bs-sm done"> |
| 21 | </span> |
| 22 | <span> |
| 23 | Implement OAuth 2.0 provider abstraction |
| 24 | </span> |
| 25 | </div> |
| 26 | <div class="nested-bs-row"> |
| 27 | <span class="nested-bs-sm done"> |
| 28 | </span> |
| 29 | <span> |
| 30 | Add SAML integration for enterprise SSO |
| 31 | </span> |
| 32 | </div> |
| 33 | <div class="nested-bs-row"> |
| 34 | <span class="nested-bs-sm active"> |
| 35 | </span> |
| 36 | <span> |
| 37 | Build session management dashboard |
| 38 | </span> |
| 39 | </div> |
| 40 | <div class="nested-bs-row"> |
| 41 | <span class="nested-bs-sm pending"> |
| 42 | </span> |
| 43 | <span> |
| 44 | Write migration script for existing users |
| 45 | </span> |
| 46 | </div> |
| 47 | </div> |
| 48 | </div> |
| 49 | </div> |
| 50 | </div> |
Rich Content Cards
Timeline items as structured cards with tags, metadata, and action links. Useful for release notes, portfolio histories, or product update feeds.
rich-card-timeline
Live
untitled.html
HTML
| 1 | <div class="rich-tl"> |
| 2 | <div class="rich-item"> |
| 3 | <div class="rich-dot active"> |
| 4 | </div> |
| 5 | <div class="rich-card"> |
| 6 | <div class="rich-header"> |
| 7 | <span class="rich-date"> |
| 8 | Mar 15, 2025 |
| 9 | </span> |
| 10 | <div class="rich-tags"> |
| 11 | <span class="tag feature"> |
| 12 | Feature |
| 13 | </span> |
| 14 | <span class="tag major"> |
| 15 | Major |
| 16 | </span> |
| 17 | </div> |
| 18 | </div> |
| 19 | <h4 class="rich-title"> |
| 20 | Release v2.0 |
| 21 | </h4> |
| 22 | <p class="rich-desc"> |
| 23 | Redesigned dashboard, new public API, and 40% faster page loads. |
| 24 | </p> |
| 25 | <a href="#" class="rich-link"> |
| 26 | View changelog → |
| 27 | </a> |
| 28 | </div> |
| 29 | </div> |
| 30 | <div class="rich-item"> |
| 31 | <div class="rich-dot"> |
| 32 | </div> |
| 33 | <div class="rich-card"> |
| 34 | <div class="rich-header"> |
| 35 | <span class="rich-date"> |
| 36 | Feb 20, 2025 |
| 37 | </span> |
| 38 | <div class="rich-tags"> |
| 39 | <span class="tag fix"> |
| 40 | Fix |
| 41 | </span> |
| 42 | </div> |
| 43 | </div> |
| 44 | <h4 class="rich-title"> |
| 45 | Hotfix v1.9.2 |
| 46 | </h4> |
| 47 | <p class="rich-desc"> |
| 48 | Resolved auth token refresh race condition and edge caching bug. |
| 49 | </p> |
| 50 | <a href="#" class="rich-link"> |
| 51 | View details → |
| 52 | </a> |
| 53 | </div> |
| 54 | </div> |
| 55 | <div class="rich-item"> |
| 56 | <div class="rich-dot"> |
| 57 | </div> |
| 58 | <div class="rich-card"> |
| 59 | <div class="rich-header"> |
| 60 | <span class="rich-date"> |
| 61 | Jan 10, 2025 |
| 62 | </span> |
| 63 | <div class="rich-tags"> |
| 64 | <span class="tag docs"> |
| 65 | Docs |
| 66 | </span> |
| 67 | </div> |
| 68 | </div> |
| 69 | <h4 class="rich-title"> |
| 70 | Docs Refresh |
| 71 | </h4> |
| 72 | <p class="rich-desc"> |
| 73 | Rewrote onboarding guides and added interactive code previews. |
| 74 | </p> |
| 75 | <a href="#" class="rich-link"> |
| 76 | Browse docs → |
| 77 | </a> |
| 78 | </div> |
| 79 | </div> |
| 80 | </div> |
untitled.css
CSS
| 1 | .rich-tl { |
| 2 | position:relative; |
| 3 | padding:12px 24px 12px 40px; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | margin-left:12px |
| 7 | } |
| 8 | .rich-tl::before { |
| 9 | content:''; |
| 10 | position:absolute; |
| 11 | left:34px; |
| 12 | top:0; |
| 13 | bottom:0; |
| 14 | width:2px; |
| 15 | background:#2A2A2A |
| 16 | } |
| 17 | .rich-item { |
| 18 | position:relative; |
| 19 | display:flex; |
| 20 | padding:0 0 24px 0 |
| 21 | } |
| 22 | .rich-item:last-child { |
| 23 | padding-bottom:0 |
| 24 | } |
| 25 | .rich-dot { |
| 26 | position:absolute; |
| 27 | left:-22px; |
| 28 | top:14px; |
| 29 | width:12px; |
| 30 | height:12px; |
| 31 | border-radius:50%; |
| 32 | border:2px solid #3A3A3A; |
| 33 | background:#0D0D0D; |
| 34 | z-index:1 |
| 35 | } |
| 36 | .rich-dot.active { |
| 37 | border-color:#00FF41; |
| 38 | background:#00FF41; |
| 39 | box-shadow:0 0 10px rgba(0, |
| 40 | 255, |
| 41 | 65, |
| 42 | .4) |
| 43 | } |
| 44 | .rich-card { |
| 45 | flex:1; |
| 46 | padding:14px 16px; |
| 47 | border-radius:10px; |
| 48 | background:#151515; |
| 49 | border:1px solid #222 |
| 50 | } |
| 51 | .rich-header { |
| 52 | display:flex; |
| 53 | align-items:center; |
| 54 | justify-content:space-between; |
| 55 | gap:12px; |
| 56 | flex-wrap:wrap; |
| 57 | margin-bottom:8px |
| 58 | } |
| 59 | .rich-date { |
| 60 | font-size:11px; |
| 61 | color:#666; |
| 62 | font-weight:500; |
| 63 | text-transform:uppercase; |
| 64 | letter-spacing:.3px |
| 65 | } |
| 66 | .rich-tags { |
| 67 | display:flex; |
| 68 | gap:6px |
| 69 | } |
| 70 | .tag { |
| 71 | font-size:10px; |
| 72 | font-weight:600; |
| 73 | padding:3px 8px; |
| 74 | border-radius:999px; |
| 75 | text-transform:uppercase; |
| 76 | letter-spacing:.3px |
| 77 | } |
| 78 | .tag.feature { |
| 79 | background:rgba(0, |
| 80 | 255, |
| 81 | 65, |
| 82 | .12); |
| 83 | color:#00FF41 |
| 84 | } |
| 85 | .tag.major { |
| 86 | background:rgba(59, |
| 87 | 130, |
| 88 | 246, |
| 89 | .12); |
| 90 | color:#3B82F6 |
| 91 | } |
| 92 | .tag.fix { |
| 93 | background:rgba(234, |
| 94 | 179, |
| 95 | 8, |
| 96 | .12); |
| 97 | color:#EAB308 |
| 98 | } |
| 99 | .tag.docs { |
| 100 | background:rgba(168, |
| 101 | 85, |
| 102 | 247, |
| 103 | .12); |
| 104 | color:#A855F7 |
| 105 | } |
| 106 | .rich-title { |
| 107 | font-size:15px; |
| 108 | font-weight:700; |
| 109 | color:#E0E0E0; |
| 110 | margin:0 0 6px; |
| 111 | line-height:1.3 |
| 112 | } |
| 113 | .rich-desc { |
| 114 | font-size:12px; |
| 115 | color:#808080; |
| 116 | line-height:1.6; |
| 117 | margin:0 0 10px |
| 118 | } |
| 119 | .rich-link { |
| 120 | font-size:12px; |
| 121 | color:#00FF41; |
| 122 | text-decoration:none; |
| 123 | font-weight:600 |
| 124 | } |
| 125 | .rich-link:hover { |
| 126 | text-decoration:underline |
| 127 | } |
untitled.html
HTML
| 1 | <div class="relative py-3 pl-10 ml-3"> |
| 2 | <div class="absolute left-[34px] top-0 bottom-0 w-0.5 bg-[#2A2A2A]"> |
| 3 | </div> |
| 4 | <div class="relative pb-6 last:pb-0 flex"> |
| 5 | <div class="absolute -left-[22px] top-3.5 w-3 h-3 rounded-full border-2 border-[#00FF41] bg-[#00FF41] shadow-[0_0_10px_rgba(0,255,65,0.4)]"> |
| 6 | </div> |
| 7 | <div class="flex-1 p-3.5 rounded-xl bg-[#151515] border border-[#222222]"> |
| 8 | <div class="flex items-center justify-between gap-3 flex-wrap mb-2"> |
| 9 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 10 | Mar 15, 2025 |
| 11 | </span> |
| 12 | <div class="flex gap-1.5"> |
| 13 | <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide bg-[#00FF41]/12 text-[#00FF41]"> |
| 14 | Feature |
| 15 | </span> |
| 16 | <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide bg-blue-500/12 text-blue-500"> |
| 17 | Major |
| 18 | </span> |
| 19 | </div> |
| 20 | </div> |
| 21 | <h4 class="text-[15px] font-bold text-[#E0E0E0] mb-1.5 leading-tight"> |
| 22 | Release v2.0 |
| 23 | </h4> |
| 24 | <p class="text-xs text-[#808080] leading-relaxed mb-2.5"> |
| 25 | Redesigned dashboard, new public API, and 40% faster page loads. |
| 26 | </p> |
| 27 | <a href="#" class="text-xs font-semibold text-[#00FF41] hover:underline no-underline"> |
| 28 | View changelog → |
| 29 | </a> |
| 30 | </div> |
| 31 | </div> |
| 32 | <div class="relative pb-6 last:pb-0 flex"> |
| 33 | <div class="absolute -left-[22px] top-3.5 w-3 h-3 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 34 | </div> |
| 35 | <div class="flex-1 p-3.5 rounded-xl bg-[#151515] border border-[#222222]"> |
| 36 | <div class="flex items-center justify-between gap-3 flex-wrap mb-2"> |
| 37 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 38 | Feb 20, 2025 |
| 39 | </span> |
| 40 | <div class="flex gap-1.5"> |
| 41 | <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide bg-yellow-500/12 text-yellow-500"> |
| 42 | Fix |
| 43 | </span> |
| 44 | </div> |
| 45 | </div> |
| 46 | <h4 class="text-[15px] font-bold text-[#E0E0E0] mb-1.5 leading-tight"> |
| 47 | Hotfix v1.9.2 |
| 48 | </h4> |
| 49 | <p class="text-xs text-[#808080] leading-relaxed mb-2.5"> |
| 50 | Resolved auth token refresh race condition and edge caching bug. |
| 51 | </p> |
| 52 | <a href="#" class="text-xs font-semibold text-[#00FF41] hover:underline no-underline"> |
| 53 | View details → |
| 54 | </a> |
| 55 | </div> |
| 56 | </div> |
| 57 | <div class="relative flex"> |
| 58 | <div class="absolute -left-[22px] top-3.5 w-3 h-3 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 59 | </div> |
| 60 | <div class="flex-1 p-3.5 rounded-xl bg-[#151515] border border-[#222222]"> |
| 61 | <div class="flex items-center justify-between gap-3 flex-wrap mb-2"> |
| 62 | <span class="text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 63 | Jan 10, 2025 |
| 64 | </span> |
| 65 | <div class="flex gap-1.5"> |
| 66 | <span class="text-[10px] font-semibold px-2 py-0.5 rounded-full uppercase tracking-wide bg-purple-500/12 text-purple-500"> |
| 67 | Docs |
| 68 | </span> |
| 69 | </div> |
| 70 | </div> |
| 71 | <h4 class="text-[15px] font-bold text-[#E0E0E0] mb-1.5 leading-tight"> |
| 72 | Docs Refresh |
| 73 | </h4> |
| 74 | <p class="text-xs text-[#808080] leading-relaxed mb-2.5"> |
| 75 | Rewrote onboarding guides and added interactive code previews. |
| 76 | </p> |
| 77 | <a href="#" class="text-xs font-semibold text-[#00FF41] hover:underline no-underline"> |
| 78 | Browse docs → |
| 79 | </a> |
| 80 | </div> |
| 81 | </div> |
| 82 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .rich-bs{position:relative;padding:12px 24px 12px 40px;margin-left:12px}.rich-bs::before{content:'';position:absolute;left:34px;top:0;bottom:0;width:2px;background:#2A2A2A}.rich-bs-item{position:relative;display:flex;padding:0 0 24px 0}.rich-bs-item:last-child{padding-bottom:0}.rich-bs-dot{position:absolute;left:-22px;top:14px;width:12px;height:12px;border-radius:50%;border:2px solid #3A3A3A;background:#0D0D0D;z-index:1}.rich-bs-dot.active{border-color:#00FF41;background:#00FF41;box-shadow:0 0 10px rgba(0,255,65,.4)}.rich-bs-card{flex:1;padding:14px 16px;border-radius:10px;background:#151515;border:1px solid #222}.rich-bs-header{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:8px}.rich-bs-date{font-size:11px;color:#666;font-weight:500;text-transform:uppercase;letter-spacing:.3px}.rich-bs-tag{font-size:10px;font-weight:600;padding:3px 8px;border-radius:999px;text-transform:uppercase;letter-spacing:.3px}.rich-bs-title{font-size:15px;font-weight:700;color:#E0E0E0;margin:0 0 6px;line-height:1.3}.rich-bs-desc{font-size:12px;color:#808080;line-height:1.6;margin:0 0 10px}.rich-bs-link{font-size:12px;color:#00FF41;text-decoration:none;font-weight:600} |
| 3 | </style> |
| 4 | <div class="rich-bs"> |
| 5 | <div class="rich-bs-item"> |
| 6 | <div class="rich-bs-dot active"> |
| 7 | </div> |
| 8 | <div class="rich-bs-card"> |
| 9 | <div class="rich-bs-header"> |
| 10 | <span class="rich-bs-date"> |
| 11 | Mar 15, 2025 |
| 12 | </span> |
| 13 | <div class="d-flex gap-2"> |
| 14 | <span class="rich-bs-tag" style="background:rgba(0,255,65,.12);color:#00FF41"> |
| 15 | Feature |
| 16 | </span> |
| 17 | <span class="rich-bs-tag" style="background:rgba(59,130,246,.12);color:#3B82F6"> |
| 18 | Major |
| 19 | </span> |
| 20 | </div> |
| 21 | </div> |
| 22 | <h4 class="rich-bs-title"> |
| 23 | Release v2.0 |
| 24 | </h4> |
| 25 | <p class="rich-bs-desc"> |
| 26 | Redesigned dashboard, new public API, and 40% faster page loads. |
| 27 | </p> |
| 28 | <a href="#" class="rich-bs-link"> |
| 29 | View changelog → |
| 30 | </a> |
| 31 | </div> |
| 32 | </div> |
| 33 | <div class="rich-bs-item"> |
| 34 | <div class="rich-bs-dot"> |
| 35 | </div> |
| 36 | <div class="rich-bs-card"> |
| 37 | <div class="rich-bs-header"> |
| 38 | <span class="rich-bs-date"> |
| 39 | Feb 20, 2025 |
| 40 | </span> |
| 41 | <div class="d-flex gap-2"> |
| 42 | <span class="rich-bs-tag" style="background:rgba(234,179,8,.12);color:#EAB308"> |
| 43 | Fix |
| 44 | </span> |
| 45 | </div> |
| 46 | </div> |
| 47 | <h4 class="rich-bs-title"> |
| 48 | Hotfix v1.9.2 |
| 49 | </h4> |
| 50 | <p class="rich-bs-desc"> |
| 51 | Resolved auth token refresh race condition and edge caching bug. |
| 52 | </p> |
| 53 | <a href="#" class="rich-bs-link"> |
| 54 | View details → |
| 55 | </a> |
| 56 | </div> |
| 57 | </div> |
| 58 | <div class="rich-bs-item"> |
| 59 | <div class="rich-bs-dot"> |
| 60 | </div> |
| 61 | <div class="rich-bs-card"> |
| 62 | <div class="rich-bs-header"> |
| 63 | <span class="rich-bs-date"> |
| 64 | Jan 10, 2025 |
| 65 | </span> |
| 66 | <div class="d-flex gap-2"> |
| 67 | <span class="rich-bs-tag" style="background:rgba(168,85,247,.12);color:#A855F7"> |
| 68 | Docs |
| 69 | </span> |
| 70 | </div> |
| 71 | </div> |
| 72 | <h4 class="rich-bs-title"> |
| 73 | Docs Refresh |
| 74 | </h4> |
| 75 | <p class="rich-bs-desc"> |
| 76 | Rewrote onboarding guides and added interactive code previews. |
| 77 | </p> |
| 78 | <a href="#" class="rich-bs-link"> |
| 79 | Browse docs → |
| 80 | </a> |
| 81 | </div> |
| 82 | </div> |
| 83 | </div> |
Grouped Milestones
Group related events under year or quarter headers. This pattern scales better for long histories — users can scan headers before diving into individual items.
grouped-milestones
Live
untitled.html
HTML
| 1 | <div class="group-tl"> |
| 2 | <div class="group-year"> |
| 3 | 2025 |
| 4 | </div> |
| 5 | <div class="group-list"> |
| 6 | <div class="group-item"> |
| 7 | <div class="group-dot active"> |
| 8 | </div> |
| 9 | <div> |
| 10 | <span class="group-month"> |
| 11 | Mar |
| 12 | </span> |
| 13 | <h4 class="group-title"> |
| 14 | Series A Funding |
| 15 | </h4> |
| 16 | </div> |
| 17 | </div> |
| 18 | <div class="group-item"> |
| 19 | <div class="group-dot"> |
| 20 | </div> |
| 21 | <div> |
| 22 | <span class="group-month"> |
| 23 | Jan |
| 24 | </span> |
| 25 | <h4 class="group-title"> |
| 26 | Public Beta Launch |
| 27 | </h4> |
| 28 | </div> |
| 29 | </div> |
| 30 | </div> |
| 31 | <div class="group-year"> |
| 32 | 2024 |
| 33 | </div> |
| 34 | <div class="group-list"> |
| 35 | <div class="group-item"> |
| 36 | <div class="group-dot"> |
| 37 | </div> |
| 38 | <div> |
| 39 | <span class="group-month"> |
| 40 | Oct |
| 41 | </span> |
| 42 | <h4 class="group-title"> |
| 43 | Seed Round Closed |
| 44 | </h4> |
| 45 | </div> |
| 46 | </div> |
| 47 | <div class="group-item"> |
| 48 | <div class="group-dot"> |
| 49 | </div> |
| 50 | <div> |
| 51 | <span class="group-month"> |
| 52 | Jun |
| 53 | </span> |
| 54 | <h4 class="group-title"> |
| 55 | MVP Released |
| 56 | </h4> |
| 57 | </div> |
| 58 | </div> |
| 59 | <div class="group-item"> |
| 60 | <div class="group-dot"> |
| 61 | </div> |
| 62 | <div> |
| 63 | <span class="group-month"> |
| 64 | Jan |
| 65 | </span> |
| 66 | <h4 class="group-title"> |
| 67 | Company Founded |
| 68 | </h4> |
| 69 | </div> |
| 70 | </div> |
| 71 | </div> |
| 72 | </div> |
untitled.css
CSS
| 1 | .group-tl { |
| 2 | position:relative; |
| 3 | padding:12px 24px 12px 36px; |
| 4 | font-family:system-ui, |
| 5 | sans-serif; |
| 6 | margin-left:12px |
| 7 | } |
| 8 | .group-tl::before { |
| 9 | content:''; |
| 10 | position:absolute; |
| 11 | left:30px; |
| 12 | top:0; |
| 13 | bottom:0; |
| 14 | width:2px; |
| 15 | background:#2A2A2A |
| 16 | } |
| 17 | .group-year { |
| 18 | position:relative; |
| 19 | font-size:12px; |
| 20 | font-weight:700; |
| 21 | color:#0A0A0A; |
| 22 | background:#00FF41; |
| 23 | display:inline-block; |
| 24 | padding:4px 12px; |
| 25 | border-radius:6px; |
| 26 | margin:0 0 16px 0; |
| 27 | z-index:1 |
| 28 | } |
| 29 | .group-list { |
| 30 | display:flex; |
| 31 | flex-direction:column; |
| 32 | gap:16px; |
| 33 | margin-bottom:24px |
| 34 | } |
| 35 | .group-item { |
| 36 | position:relative; |
| 37 | display:flex; |
| 38 | align-items:flex-start; |
| 39 | gap:14px; |
| 40 | padding-left:0 |
| 41 | } |
| 42 | .group-dot { |
| 43 | position:absolute; |
| 44 | left:-18px; |
| 45 | top:4px; |
| 46 | width:10px; |
| 47 | height:10px; |
| 48 | border-radius:50%; |
| 49 | border:2px solid #3A3A3A; |
| 50 | background:#0D0D0D; |
| 51 | z-index:1 |
| 52 | } |
| 53 | .group-dot.active { |
| 54 | border-color:#00FF41; |
| 55 | background:#00FF41; |
| 56 | box-shadow:0 0 8px rgba(0, |
| 57 | 255, |
| 58 | 65, |
| 59 | .4) |
| 60 | } |
| 61 | .group-month { |
| 62 | font-size:11px; |
| 63 | color:#666; |
| 64 | font-weight:500; |
| 65 | text-transform:uppercase; |
| 66 | letter-spacing:.3px |
| 67 | } |
| 68 | .group-title { |
| 69 | font-size:13px; |
| 70 | font-weight:700; |
| 71 | color:#E0E0E0; |
| 72 | margin:2px 0 0; |
| 73 | line-height:1.3 |
| 74 | } |
untitled.html
HTML
| 1 | <div class="relative py-3 pl-10 ml-3"> |
| 2 | <div class="absolute left-[30px] top-0 bottom-0 w-0.5 bg-[#2A2A2A]"> |
| 3 | </div> |
| 4 | <div class="relative inline-block text-xs font-bold text-[#0A0A0A] bg-[#00FF41] px-3 py-1 rounded-md mb-4 z-10"> |
| 5 | 2025 |
| 6 | </div> |
| 7 | <div class="flex flex-col gap-4 mb-6"> |
| 8 | <div class="relative flex items-start gap-3.5"> |
| 9 | <div class="absolute -left-[18px] top-1 w-2.5 h-2.5 rounded-full border-2 border-[#00FF41] bg-[#00FF41] shadow-[0_0_8px_rgba(0,255,65,0.4)]"> |
| 10 | </div> |
| 11 | <div> |
| 12 | <span class="block text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 13 | Mar |
| 14 | </span> |
| 15 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-0.5 leading-tight"> |
| 16 | Series A Funding |
| 17 | </h4> |
| 18 | </div> |
| 19 | </div> |
| 20 | <div class="relative flex items-start gap-3.5"> |
| 21 | <div class="absolute -left-[18px] top-1 w-2.5 h-2.5 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 22 | </div> |
| 23 | <div> |
| 24 | <span class="block text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 25 | Jan |
| 26 | </span> |
| 27 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-0.5 leading-tight"> |
| 28 | Public Beta Launch |
| 29 | </h4> |
| 30 | </div> |
| 31 | </div> |
| 32 | </div> |
| 33 | <div class="relative inline-block text-xs font-bold text-[#0A0A0A] bg-[#00FF41] px-3 py-1 rounded-md mb-4 z-10"> |
| 34 | 2024 |
| 35 | </div> |
| 36 | <div class="flex flex-col gap-4"> |
| 37 | <div class="relative flex items-start gap-3.5"> |
| 38 | <div class="absolute -left-[18px] top-1 w-2.5 h-2.5 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 39 | </div> |
| 40 | <div> |
| 41 | <span class="block text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 42 | Oct |
| 43 | </span> |
| 44 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-0.5 leading-tight"> |
| 45 | Seed Round Closed |
| 46 | </h4> |
| 47 | </div> |
| 48 | </div> |
| 49 | <div class="relative flex items-start gap-3.5"> |
| 50 | <div class="absolute -left-[18px] top-1 w-2.5 h-2.5 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 51 | </div> |
| 52 | <div> |
| 53 | <span class="block text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 54 | Jun |
| 55 | </span> |
| 56 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-0.5 leading-tight"> |
| 57 | MVP Released |
| 58 | </h4> |
| 59 | </div> |
| 60 | </div> |
| 61 | <div class="relative flex items-start gap-3.5"> |
| 62 | <div class="absolute -left-[18px] top-1 w-2.5 h-2.5 rounded-full border-2 border-[#3A3A3A] bg-[#0D0D0D]"> |
| 63 | </div> |
| 64 | <div> |
| 65 | <span class="block text-[11px] text-[#666666] font-medium uppercase tracking-wide"> |
| 66 | Jan |
| 67 | </span> |
| 68 | <h4 class="text-[13px] font-bold text-[#E0E0E0] mt-0.5 leading-tight"> |
| 69 | Company Founded |
| 70 | </h4> |
| 71 | </div> |
| 72 | </div> |
| 73 | </div> |
| 74 | </div> |
untitled.html
HTML
| 1 | <style> |
| 2 | .group-bs{position:relative;padding:12px 24px 12px 36px;margin-left:12px}.group-bs::before{content:'';position:absolute;left:30px;top:0;bottom:0;width:2px;background:#2A2A2A}.group-bs-year{position:relative;font-size:12px;font-weight:700;color:#0A0A0A;background:#00FF41;display:inline-block;padding:4px 12px;border-radius:6px;margin:0 0 16px 0;z-index:1}.group-bs-list{display:flex;flex-direction:column;gap:16px;margin-bottom:24px}.group-bs-item{position:relative;display:flex;align-items:flex-start;gap:14px}.group-bs-dot{position:absolute;left:-18px;top:4px;width:10px;height:10px;border-radius:50%;border:2px solid #3A3A3A;background:#0D0D0D;z-index:1}.group-bs-dot.active{border-color:#00FF41;background:#00FF41;box-shadow:0 0 8px rgba(0,255,65,.4)}.group-bs-month{font-size:11px;color:#666;font-weight:500;text-transform:uppercase;letter-spacing:.3px}.group-bs-title{font-size:13px;font-weight:700;color:#E0E0E0;margin:2px 0 0;line-height:1.3} |
| 3 | </style> |
| 4 | <div class="group-bs"> |
| 5 | <div class="group-bs-year"> |
| 6 | 2025 |
| 7 | </div> |
| 8 | <div class="group-bs-list"> |
| 9 | <div class="group-bs-item"> |
| 10 | <div class="group-bs-dot active"> |
| 11 | </div> |
| 12 | <div> |
| 13 | <span class="group-bs-month"> |
| 14 | Mar |
| 15 | </span> |
| 16 | <h4 class="group-bs-title"> |
| 17 | Series A Funding |
| 18 | </h4> |
| 19 | </div> |
| 20 | </div> |
| 21 | <div class="group-bs-item"> |
| 22 | <div class="group-bs-dot"> |
| 23 | </div> |
| 24 | <div> |
| 25 | <span class="group-bs-month"> |
| 26 | Jan |
| 27 | </span> |
| 28 | <h4 class="group-bs-title"> |
| 29 | Public Beta Launch |
| 30 | </h4> |
| 31 | </div> |
| 32 | </div> |
| 33 | </div> |
| 34 | <div class="group-bs-year"> |
| 35 | 2024 |
| 36 | </div> |
| 37 | <div class="group-bs-list"> |
| 38 | <div class="group-bs-item"> |
| 39 | <div class="group-bs-dot"> |
| 40 | </div> |
| 41 | <div> |
| 42 | <span class="group-bs-month"> |
| 43 | Oct |
| 44 | </span> |
| 45 | <h4 class="group-bs-title"> |
| 46 | Seed Round Closed |
| 47 | </h4> |
| 48 | </div> |
| 49 | </div> |
| 50 | <div class="group-bs-item"> |
| 51 | <div class="group-bs-dot"> |
| 52 | </div> |
| 53 | <div> |
| 54 | <span class="group-bs-month"> |
| 55 | Jun |
| 56 | </span> |
| 57 | <h4 class="group-bs-title"> |
| 58 | MVP Released |
| 59 | </h4> |
| 60 | </div> |
| 61 | </div> |
| 62 | <div class="group-bs-item"> |
| 63 | <div class="group-bs-dot"> |
| 64 | </div> |
| 65 | <div> |
| 66 | <span class="group-bs-month"> |
| 67 | Jan |
| 68 | </span> |
| 69 | <h4 class="group-bs-title"> |
| 70 | Company Founded |
| 71 | </h4> |
| 72 | </div> |
| 73 | </div> |
| 74 | </div> |
| 75 | </div> |
HTML Structure
The vertical timeline uses a simple list structure with a pseudo-element line. Each item has a dot indicator and content block. The::before pseudo-element on the container draws the connecting line automatically — no extra DOM nodes needed.
timeline-structure.html
HTML
| 1 | <div class="timeline"> |
| 2 | <div class="timeline-item"> |
| 3 | <div class="timeline-dot"></div> |
| 4 | <div class="timeline-content"> |
| 5 | <span class="timeline-date">Mar 8, 2025</span> |
| 6 | <h4 class="timeline-title">Event Title</h4> |
| 7 | <p class="timeline-desc"> |
| 8 | Description of what happened at this point. |
| 9 | </p> |
| 10 | </div> |
| 11 | </div> |
| 12 | <div class="timeline-item"> |
| 13 | <div class="timeline-dot active"></div> |
| 14 | <div class="timeline-content"> |
| 15 | <span class="timeline-date">Mar 15, 2025</span> |
| 16 | <h4 class="timeline-title">Next Event</h4> |
| 17 | <p class="timeline-desc">More details here.</p> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
ℹ
info
For vertical timelines, use ::before pseudo-elements on the container to draw the connecting line. This avoids extra DOM nodes and keeps the HTML clean. Set position: relative on items and use absolute positioning for dots and icons.
⚠
warning
Horizontal timelines require careful handling on mobile. Useoverflow-x: auto on the wrapper and setmin-width on the track to prevent items from collapsing. Add a subtle scroll hint or CSS scroll-snap for touch devices.
Accessibility
Timelines are visual by nature, so make sure the same information is available to assistive technologies. Treat a timeline as a structured list of events and communicate status with more than just color.
- Use <ol> (or role="list") so screen readers announce item counts and positions.
- Add an aria-label such as "Project history" to the timeline container.
- Pair status colors with text labels or icons — never rely on color alone.
- Ensure interactive cards or links are reachable by keyboard and show visible focus.
- Use relative and absolute timestamps consistently; avoid mixing "2m ago" and "Mar 8, 2025" in the same timeline.
- For horizontal scrolling timelines, expose the scrollable region to assistive tech with role="region" and an accessible name.
Best Practices
- Use semantic HTML — consider <ol> for sequential events to convey ordering.
- Always show timestamps in a consistent format (relative or absolute, not both).
- For status timelines, use distinct colors and icons — don't rely on color alone.
- Keep timeline items scannable: short titles, brief descriptions, and clear dates.
- On narrow screens, switch from alternating to single-side layout.
- Use aria-label on timeline containers for screen reader context.
- For long timelines, implement virtual scrolling or pagination to maintain performance.
Community
Get help on Slack, Discord or VIP
Stuck on a guide? Join the community and ask.