Ledger Audit Log
Financial-grade audit log table with a dark masthead, column ruling, status badges (Done / Pending / Critical / Archived), and a gold left-edge marker on milestone rows. Built for database migration history, compliance records, and incident logs.
Ledger Audit Log the 24th of 24 designs in the 24 CSS Timeline Layouts collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
The code
<div class="tl24-wrap">
<div class="tl24-header">
<div>
<div class="tl24-title-lbl">System Audit Log</div>
<div class="tl24-title-name">Migration Record</div>
</div>
<div class="tl24-period">FY 2024–2026<br>Schema v4 → v7</div>
</div>
<div class="tl24-cols">
<span>Date</span>
<span>Description</span>
<span>Reference</span>
<span>Status</span>
</div>
<div class="tl24-row tl24-milestone">
<div class="tl24-dt">2024-01-08</div>
<div class="tl24-desc">
Initial schema migration v4 → v5
<small>Postgres 14 → 16 · 3.2M rows</small>
</div>
<div class="tl24-ref">MIG-001</div>
<div class="tl24-status"><span class="tl24-badge tl24-arch">Archived</span></div>
</div>
<div class="tl24-row">
<div class="tl24-dt">2024-03-22</div>
<div class="tl24-desc">
Added composite index on events table
<small>Resolved P1 query timeout · Ticket #4421</small>
</div>
<div class="tl24-ref">IDX-007</div>
<div class="tl24-status"><span class="tl24-badge tl24-arch">Archived</span></div>
</div>
<div class="tl24-row">
<div class="tl24-dt">2025-07-14</div>
<div class="tl24-desc">
Backfilled NULL values in user_meta
<small>GDPR remediation · 88k rows affected</small>
</div>
<div class="tl24-ref">REM-034</div>
<div class="tl24-status"><span class="tl24-badge tl24-done">Done</span></div>
</div>
<div class="tl24-row tl24-milestone">
<div class="tl24-dt">2025-11-01</div>
<div class="tl24-desc">
Schema migration v5 → v6 — new billing model
<small>Zero-downtime · Blue/green deployment</small>
</div>
<div class="tl24-ref">MIG-002</div>
<div class="tl24-status"><span class="tl24-badge tl24-done">Done</span></div>
</div>
<div class="tl24-row">
<div class="tl24-dt">2026-02-19</div>
<div class="tl24-desc">
Incident: replication lag exceeded 45s
<small>RCA complete · Failover triggered</small>
</div>
<div class="tl24-ref">INC-012</div>
<div class="tl24-status"><span class="tl24-badge tl24-crit">Critical</span></div>
</div>
<div class="tl24-row tl24-milestone">
<div class="tl24-dt">2026-05-08</div>
<div class="tl24-desc">
Schema migration v6 → v7 in progress
<small>Estimated completion 2026-05-22</small>
</div>
<div class="tl24-ref">MIG-003</div>
<div class="tl24-status"><span class="tl24-badge tl24-pend">Pending</span></div>
</div>
<div class="tl24-footer">
<div class="tl24-footer-note">Gold bar = milestone event</div>
<div class="tl24-footer-count">6 of 148 entries shown</div>
</div>
</div> .tl24-wrap {
background: #f8f5f0;
color: #1a1a1a;
padding: 0;
border-radius: 2px;
overflow: hidden;
font-family: 'Space Mono', ui-monospace, monospace;
border: 1px solid #ddd;
}
.tl24-header {
padding: 1.5rem 2rem;
background: #1a1a1a;
color: #f8f5f0;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.tl24-title-lbl {
font-size: 0.55rem;
letter-spacing: 0.3em;
text-transform: uppercase;
color: #666;
margin-bottom: 0.25rem;
}
.tl24-title-name {
font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
font-size: 1.8rem;
letter-spacing: 0.1em;
color: #f8f5f0;
}
.tl24-period {
font-size: 0.6rem;
color: #888;
text-align: right;
line-height: 1.5;
}
.tl24-cols {
display: grid;
grid-template-columns: 8ch 1fr 10ch 8ch;
gap: 0 1.5rem;
padding: 0.5rem 2rem;
background: #eee;
font-size: 0.55rem;
letter-spacing: 0.2em;
text-transform: uppercase;
color: #999;
border-bottom: 1px solid #ddd;
}
.tl24-row {
display: grid;
grid-template-columns: 8ch 1fr 10ch 8ch;
gap: 0 1.5rem;
padding: 0.8rem 2rem;
border-bottom: 1px solid #ebe8e2;
align-items: center;
transition: background 0.15s;
position: relative;
}
.tl24-row:hover { background: #f0ece6; }
.tl24-milestone { background: #fffbf2; }
.tl24-milestone::before {
content: '';
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 3px;
background: #c8a96e;
}
.tl24-dt {
font-size: 0.65rem;
color: #999;
white-space: nowrap;
}
.tl24-desc {
font-size: 0.7rem;
color: #333;
line-height: 1.3;
}
.tl24-desc small {
display: block;
font-size: 0.55rem;
color: #aaa;
margin-top: 0.15rem;
}
.tl24-ref {
font-size: 0.6rem;
color: #bbb;
text-align: right;
}
.tl24-status { text-align: right; }
.tl24-badge {
display: inline-block;
font-size: 0.5rem;
padding: 0.15rem 0.5rem;
border-radius: 2px;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tl24-done { background: #e8f5e9; color: #2e7d32; }
.tl24-pend { background: #fff3e0; color: #e65100; }
.tl24-arch { background: #f5f5f5; color: #999; }
.tl24-crit { background: #fce4ec; color: #c62828; }
.tl24-footer {
padding: 1rem 2rem;
background: #f0ece6;
display: flex;
justify-content: space-between;
align-items: center;
border-top: 2px solid #ddd;
}
.tl24-footer-note {
font-size: 0.55rem;
color: #aaa;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.tl24-footer-count {
font-size: 0.65rem;
color: #666;
}
@media (max-width: 600px) {
.tl24-cols, .tl24-row { grid-template-columns: 1fr; gap: 0.25rem; padding: 0.5rem 1rem; }
.tl24-cols { display: none; }
.tl24-ref, .tl24-status { text-align: left; }
}