TIMELINE / ACTIVITY FEED: Chronological feed of interactions
ICONS: primary | blue | green | red | orange | magenta
REUSES: collapsible_controller.js for expand/collapse
Vertical stack with left gutter for type icons and a 2px connector line. Each activity tw-card expands on click to reveal type-specific detail content. Used in enquiry records to show all interactions with a family.
Full demo: Filter pills, 8 activity items (one per type), expand/collapse, and skeleton loading toggle. Click any tw-card header to expand its detail content.
Dear Mr Davies,
Thank you for your enquiry about Oscar's admission to our school. We're delighted to share the next steps in the process.
Please complete the attached form at your earliest convenience. If you have any questions, don't hesitate to contact us.
Changed by Sarah Mitchell
Spoke with Jack Davies regarding Oscar's transition from current school. Father expressed interest in before/after school clubs and sport provision.
Follow up: send prospectus and club timetable. Father also asked about bursary options — refer to finance team.
Added by Sarah Mitchell
Delivered
Oscar_Clarke_School_Report_2025.pdf
PDF · 2.4 MB · Uploaded by Jack Davies
Enquiry was automatically assigned based on year group routing rules.
<div class="tw-timeline"><div class="tw-timeline-item" data-controller="collapsible">...</div></div>
Colors: Mirror the avatar component's 100/700 shade pattern.
Use .timeline-icon-{color} to set the background and foreground colour.
<div class="tw-timeline-icon tw-timeline-icon-blue"><i class="fa-regular fa-envelope"></i></div>
Loading state: Shimmer placeholder items with animated gradient.
Use .timeline-skeleton-item inside a .timeline container.
<div class="tw-timeline-skeleton-item">...</div>
Date grouping: Use .timeline-date-separator between items to group
activities by date. Place as a sibling of .timeline-item inside the
.timeline container.
Automatic acknowledgment email sent to jack.davies@email.com confirming receipt of Oscar's enquiry form.
Submitted via Online Portal.
System
Online Booking · 2 attendees
Very interested in music programme — child has Grade 3 piano, looking at joining orchestra. Also asked about bursary options.
James Parker
<div class="tw-timeline-date-separator">Today</div>
Drawer/sidebar size: Add .timeline-sm to the
.timeline container for smaller icons (28px), tighter spacing,
and compact typography. Ideal for detail panels and narrow sidebars.
Submitted via Online Portal.
Thank you for hosting us at the Open Morning. Oscar really enjoyed the science lab tour.
2 attendees · Confirmed
Sent to +44 7700 900XXX
Enquiry auto-created from Open Day registration form on school website.
<div class="tw-timeline tw-timeline-sm">...</div>
Compact loading state: Skeleton placeholders adapt to
the .timeline-sm modifier with smaller icons and tighter spacing.
<div class="tw-timeline tw-timeline-sm"><div class="tw-timeline-skeleton-item">...</div></div>
No activity: When no timeline items exist, show a helpful empty state with an explanation and suggested action.
Interactions with this family will appear here as they happen.
Empty state content inside a <div class="tw-timeline"> container
Realistic usage: Timeline inside a drawer-width tw-card with header, compact variant, and a "View all" action — as it would appear in an enquiry detail sidebar.
Sent to jack.davies@email.com
Via Online Portal
<div class="tw-card tw-card-flat"><div class="tw-card-body"><div class="tw-timeline tw-timeline-sm">...</div></div></div>