Use a <ul class="activity-feed">. Each <li> takes a leading avatar and a body; .activity-feed-divider marks a date break. Add .activity-feed-roomy for the looser rhythm.

• Today

• Fee reminder circular sent to 412 parents

  20m High

  Circular

• SMS batch delivered — 98.6% success

  1h

  Delivered
• 

  Robert Daniel requested a meeting

  2h Med

  Meeting
• Yesterday

• Sports Day circular published

  4:12 PM

  Notice
• Earlier

• Term 1 report cards approved — 18 classes

  2 days ago

  Approved

Drop .activity-feed-roomy for the dense rhythm — better inside a narrow column.

• New admission approved

  8m

• Fee payment failed

  42m

• 14 library books returned

  3h

.status-dot marks live state. Sizes: .status-dot-sm, .status-dot-lg. Add .status-dot-pulse to animate, .status-dot-square for a legend swatch.