<div class="tw:p-6 tw:max-w-3xl tw:mx-auto tw:space-y-8"> <!-- Introductory callout --> <div class="tw-callout"> <p class="tw:mb-1 tw:text-sm tw:font-mono"> <strong>TIMELINE / ACTIVITY FEED:</strong> Chronological feed of interactions<br> <strong>ICONS:</strong> primary | blue | green | red | orange | magenta<br> <strong>REUSES:</strong> collapsible_controller.js for expand/collapse </p> <p class="tw:mb-0 tw:text-sm"> 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. </p> </div> <!-- ============================================ Section 1: Activity Feed Demo ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Activity Feed</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Full demo:</strong> Filter pills, 8 activity items (one per type), expand/collapse, and skeleton loading toggle. Click any tw-card header to expand its detail content. </p> </div> <!-- Filter Pills + Controls --> <div class="tw:flex tw:items-center tw:justify-between tw:mb-4 tw:flex-wrap tw:gap-2"> <div class="tw:flex tw:flex-wrap tw:gap-2" id="timelineFilters"> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-primary" type="button" data-filter="all" onclick="filterTimeline('all', this)">All</button> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-outline-secondary" type="button" data-filter="email" data-icon-color="text-blue-700" onclick="filterTimeline('email', this)"> <i class="fa-regular fa-envelope tw:text-blue-700"></i> Emails </button> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-outline-secondary" type="button" data-filter="form" data-icon-color="text-green-800" onclick="filterTimeline('form', this)"> <i class="fa-regular fa-file-lines tw:text-green-800"></i> Forms </button> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-outline-secondary" type="button" data-filter="status" data-icon-color="text-blue-700" onclick="filterTimeline('status', this)"> <i class="fa-solid fa-arrow-right-arrow-left tw:text-blue-700"></i> Status </button> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-outline-secondary" type="button" data-filter="tw-note" data-icon-color="text-magenta-700" onclick="filterTimeline('note', this)"> <i class="fa-regular fa-note-sticky tw:text-magenta-700"></i> Notes </button> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-outline-secondary" type="button" data-filter="sms" data-icon-color="text-blue-700" onclick="filterTimeline('sms', this)"> <i class="fa-regular fa-message tw:text-blue-700"></i> SMS </button> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-outline-secondary" type="button" data-filter="event" data-icon-color="text-red-700" onclick="filterTimeline('event', this)"> <i class="fa-regular fa-calendar tw:text-red-700"></i> Events </button> <button class="tw-tag tw-tag-pill tw-tag-interactive tw-tag-outline-secondary" type="button" data-filter="doc" data-icon-color="text-orange-800" onclick="filterTimeline('doc', this)"> <i class="fa-solid fa-paperclip tw:text-orange-800"></i> Documents </button> </div> <div class="tw:flex tw:items-center tw:gap-2"> <span class="tw:text-body-xs tw:text-neutral-400" id="timelineCount">8 items</span> <button class="tw-btn tw-btn-secondary tw-btn-sm" type="button" onclick="toggleSkeleton()"> <i class="fa-solid fa-spinner"></i> Toggle Skeleton </button> </div> </div> <!-- Timeline Feed --> <div class="tw-timeline" id="timelineFeed"> <!-- 1. Email (expanded) --> <div class="tw-timeline-item" data-type="email" data-controller="collapsible" data-collapsible-open-value="true"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-regular fa-envelope"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="true"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Email</span> <span class="tw-timeline-card-title">Welcome to Admissions+ — next steps for Oscar's application</span> <time class="tw-timeline-card-time" datetime="2026-02-11T10:00">2 hours ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron tw:rotate-180" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content tw-show" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:space-y-3"> <div class="tw:flex tw:gap-4 tw:text-body-xs"> <span class="tw:text-neutral-500">From:</span> <span class="tw:text-neutral-800 tw:font-medium">admissions@school.edu</span> <span class="tw-badge tw-badge-info-subtle tw-badge-sm tw:ml-auto">Outbound</span> </div> <div class="tw:flex tw:gap-4 tw:text-body-xs"> <span class="tw:text-neutral-500">To:</span> <span class="tw:text-neutral-800">jack.davies@email.com</span> </div> <div class="tw:flex tw:gap-2"> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"><i class="fa-regular fa-eye"></i> Opened</span> <span class="tw-badge tw-badge-success-subtle tw-badge-sm"><i class="fa-solid fa-arrow-pointer"></i> Clicked</span> </div> <div class="tw:border-t tw:border-neutral-100 tw:pt-3 tw:text-body-s tw:text-neutral-700"> <p class="tw:mb-2">Dear Mr Davies,</p> <p class="tw:mb-2">Thank you for your enquiry about Oscar's admission to our school. We're delighted to share the next steps in the process.</p> <p class="tw:mb-0">Please complete the attached form at your earliest convenience. If you have any questions, don't hesitate to contact us.</p> </div> </div> </div> </div> </div> </div> </div> <!-- 2. Form Submission (expanded) --> <div class="tw-timeline-item" data-type="form" data-controller="collapsible" data-collapsible-open-value="true"> <div class="tw-timeline-icon tw-timeline-icon-green"> <i class="fa-regular fa-file-lines"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="true"> <span class="tw-timeline-card-type tw-timeline-card-type-green">Form</span> <span class="tw-timeline-card-title">Enquiry form submitted by Jack Davies</span> <time class="tw-timeline-card-time" datetime="2026-02-10">Yesterday</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron tw:rotate-180" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content tw-show" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <dl class="tw-info-grid"> <div> <dt class="tw-info-grid-label">Child's Name</dt> <dd class="tw-info-grid-value">Oscar Clarke</dd> </div> <div> <dt class="tw-info-grid-label">Year Group</dt> <dd class="tw-info-grid-value">Year 2</dd> </div> <div> <dt class="tw-info-grid-label">Parent Name</dt> <dd class="tw-info-grid-value">Jack Davies</dd> </div> <div> <dt class="tw-info-grid-label">Email</dt> <dd class="tw-info-grid-value">jack.davies@email.com</dd> </div> <div> <dt class="tw-info-grid-label">Phone</dt> <dd class="tw-info-grid-value">07700 123456</dd> </div> <div> <dt class="tw-info-grid-label">Source</dt> <dd class="tw-info-grid-value">Open Day</dd> </div> </dl> </div> </div> </div> </div> </div> <!-- 3. Status Change --> <div class="tw-timeline-item" data-type="status" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-solid fa-arrow-right-arrow-left"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Status</span> <span class="tw-timeline-card-title">Stage changed by Sarah Mitchell</span> <time class="tw-timeline-card-time" datetime="2026-02-09">2 days ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:flex tw:items-center tw:gap-3"> <span class="tw-badge tw-badge-secondary-subtle">New</span> <i class="fa-solid fa-arrow-right tw:text-neutral-400"></i> <span class="tw-badge tw-badge-info-subtle">Engage</span> </div> <p class="tw:text-neutral-500 tw:text-body-xs tw:mt-2 tw:mb-0">Changed by Sarah Mitchell</p> </div> </div> </div> </div> </div> <!-- 4. Event --> <div class="tw-timeline-item" data-type="event" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-red"> <i class="fa-regular fa-calendar"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-red">Event</span> <span class="tw-timeline-card-title">Open Day — Year 2 Tour registered</span> <time class="tw-timeline-card-time" datetime="2026-02-08">3 days ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <dl class="tw-info-grid tw-info-grid-inline"> <div> <dt class="tw-info-grid-label">Event</dt> <dd class="tw-info-grid-value">Year 2 Open Day Tour</dd> </div> <div> <dt class="tw-info-grid-label">Date</dt> <dd class="tw-info-grid-value">Saturday, 15 March 2026 at 10:00 AM</dd> </div> <div> <dt class="tw-info-grid-label">Attendees</dt> <dd class="tw-info-grid-value">Jack Davies + 1 guest</dd> </div> <div> <dt class="tw-info-grid-label">Status</dt> <dd class="tw-info-grid-value"> <span class="tw-badge tw-badge-success-subtle tw-badge-sm">Confirmed</span> </dd> </div> </dl> </div> </div> </div> </div> </div> <!-- 5. Note --> <div class="tw-timeline-item" data-type="tw-note" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-magenta"> <i class="fa-regular fa-note-sticky"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-magenta">Note</span> <span class="tw-timeline-card-title">Phone conversation with father</span> <time class="tw-timeline-card-time" datetime="2026-02-07">4 days ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-2">Spoke with Jack Davies regarding Oscar's transition from current school. Father expressed interest in before/after school clubs and sport provision.</p> <p class="tw:mb-0">Follow up: send prospectus and club timetable. Father also asked about bursary options — refer to finance team.</p> <p class="tw:text-neutral-500 tw:text-body-xs tw:mt-3 tw:mb-0">Added by Sarah Mitchell</p> </div> </div> </div> </div> </div> <!-- 6. SMS --> <div class="tw-timeline-item" data-type="sms" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-regular fa-message"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">SMS</span> <span class="tw-timeline-card-title">Open Day reminder sent to Jack Davies</span> <time class="tw-timeline-card-time" datetime="2026-02-06">5 days ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:flex tw:gap-4 tw:text-body-xs tw:mb-3"> <span class="tw:text-neutral-500">To:</span> <span class="tw:text-neutral-800">07700 123456</span> <span class="tw-badge tw-badge-info-subtle tw-badge-sm tw:ml-auto">Outbound</span> </div> <div class="tw:bg-neutral-100 tw:rounded-md tw:p-3 tw:text-body-s tw:text-neutral-800"> Hi Jack, just a reminder about Oscar's Open Day tour this Saturday at 10am. We look forward to seeing you! — Admissions Team </div> <p class="tw:text-neutral-500 tw:text-body-xs tw:mt-2 tw:mb-0">Delivered</p> </div> </div> </div> </div> </div> <!-- 7. Document --> <div class="tw-timeline-item" data-type="doc" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-orange"> <i class="fa-solid fa-paperclip"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-orange">Document</span> <span class="tw-timeline-card-title">School report uploaded</span> <time class="tw-timeline-card-time" datetime="2026-02-04">1 week ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:flex tw:items-center tw:gap-3"> <div class="tw:w-10 tw:h-10 tw:rounded-lg tw:bg-orange-100 tw:text-orange-700 tw:flex tw:items-center tw:justify-center tw:shrink-0"> <i class="fa-regular fa-file-pdf tw:text-lg"></i> </div> <div class="tw:flex-1 tw:min-w-0"> <p class="tw:text-body-s tw:font-medium tw:text-neutral-900 tw:mb-0 tw:truncate">Oscar_Clarke_School_Report_2025.pdf</p> <p class="tw:text-body-xs tw:text-neutral-500 tw:mb-0">PDF · 2.4 MB · Uploaded by Jack Davies</p> </div> <span class="tw-badge tw-badge-success-subtle tw-badge-sm">Verified</span> </div> </div> </div> </div> </div> </div> <!-- 8. Auto/System --> <div class="tw-timeline-item" data-type="auto" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-orange"> <i class="fa-solid fa-robot"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-orange">Auto</span> <span class="tw-timeline-card-title">Enquiry auto-assigned to Sarah Mitchell</span> <time class="tw-timeline-card-time" datetime="2026-02-04">1 week ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-2">Enquiry was automatically assigned based on year group routing rules.</p> <div class="tw:flex tw:gap-4 tw:text-body-xs"> <span class="tw:text-neutral-500">Rule:</span> <span class="tw:text-neutral-800">Year 2 enquiries → Sarah Mitchell</span> </div> </div> </div> </div> </div> </div> </div> <!-- Skeleton Loading State (hidden by default) --> <div class="tw-timeline tw:hidden" id="timelineSkeleton"> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-14"></div> <div class="tw-timeline-skeleton-bar tw:w-4/5"></div> <div class="tw-timeline-skeleton-bar tw:w-2/5"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-12"></div> <div class="tw-timeline-skeleton-bar tw:w-3/4"></div> <div class="tw-timeline-skeleton-bar tw:w-1/2"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-16"></div> <div class="tw-timeline-skeleton-bar tw:w-2/3"></div> <div class="tw-timeline-skeleton-bar tw:w-2/5"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-12"></div> <div class="tw-timeline-skeleton-bar tw:w-3/4"></div> <div class="tw-timeline-skeleton-bar tw:w-1/3"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-14"></div> <div class="tw-timeline-skeleton-bar tw:w-3/5"></div> <div class="tw-timeline-skeleton-bar tw:w-1/2"></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-timeline"&gt;&lt;div class="tw-timeline-item" data-controller="collapsible"&gt;...&lt;/div&gt;&lt;/div&gt;</code> </div> </div> <!-- ============================================ Section 2: Icon Colors ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Icon Color Variants</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Colors:</strong> Mirror the avatar component's 100/700 shade pattern. Use <code>.timeline-icon-{color}</code> to set the background and foreground colour. </p> </div> <div class="tw:flex tw:flex-wrap tw:gap-3"> <div class="tw:flex tw:flex-col tw:items-center tw:gap-2"> <div class="tw-timeline-icon tw-timeline-icon-primary tw:static"> <i class="fa-solid fa-robot"></i> </div> <span class="tw:text-body-xs tw:text-neutral-500">primary</span> </div> <div class="tw:flex tw:flex-col tw:items-center tw:gap-2"> <div class="tw-timeline-icon tw-timeline-icon-blue tw:static"> <i class="fa-regular fa-envelope"></i> </div> <span class="tw:text-body-xs tw:text-neutral-500">blue</span> </div> <div class="tw:flex tw:flex-col tw:items-center tw:gap-2"> <div class="tw-timeline-icon tw-timeline-icon-green tw:static"> <i class="fa-regular fa-file-lines"></i> </div> <span class="tw:text-body-xs tw:text-neutral-500">green</span> </div> <div class="tw:flex tw:flex-col tw:items-center tw:gap-2"> <div class="tw-timeline-icon tw-timeline-icon-red tw:static"> <i class="fa-regular fa-calendar"></i> </div> <span class="tw:text-body-xs tw:text-neutral-500">red</span> </div> <div class="tw:flex tw:flex-col tw:items-center tw:gap-2"> <div class="tw-timeline-icon tw-timeline-icon-orange tw:static"> <i class="fa-solid fa-paperclip"></i> </div> <span class="tw:text-body-xs tw:text-neutral-500">orange</span> </div> <div class="tw:flex tw:flex-col tw:items-center tw:gap-2"> <div class="tw-timeline-icon tw-timeline-icon-magenta tw:static"> <i class="fa-regular fa-note-sticky"></i> </div> <span class="tw:text-body-xs tw:text-neutral-500">magenta</span> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-timeline-icon tw-timeline-icon-blue"&gt;&lt;i class="fa-regular fa-envelope"&gt;&lt;/i&gt;&lt;/div&gt;</code> </div> </div> <!-- ============================================ Section 3: Skeleton Loading ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Skeleton Loading</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Loading state:</strong> Shimmer placeholder items with animated gradient. Use <code>.timeline-skeleton-item</code> inside a <code>.timeline</code> container. </p> </div> <div class="tw-timeline"> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-14"></div> <div class="tw-timeline-skeleton-bar tw:w-4/5"></div> <div class="tw-timeline-skeleton-bar tw:w-2/5"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-12"></div> <div class="tw-timeline-skeleton-bar tw:w-3/4"></div> <div class="tw-timeline-skeleton-bar tw:w-1/2"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-16"></div> <div class="tw-timeline-skeleton-bar tw:w-2/3"></div> <div class="tw-timeline-skeleton-bar tw:w-2/5"></div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-timeline-skeleton-item"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Section 4: Date Separators ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Date Separators</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Date grouping:</strong> Use <code>.timeline-date-separator</code> between items to group activities by date. Place as a sibling of <code>.timeline-item</code> inside the <code>.timeline</code> container. </p> </div> <div class="tw-timeline"> <div class="tw-timeline-date-separator">Today</div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-regular fa-envelope"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Email</span> <span class="tw-timeline-card-title">Application acknowledgment sent to family</span> <time class="tw-timeline-card-time" datetime="2026-02-11T14:30">2:30 PM</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Automatic acknowledgment email sent to jack.davies@email.com confirming receipt of Oscar's enquiry form.</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-green"> <i class="fa-regular fa-file-lines"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-green">Form</span> <span class="tw-timeline-card-title">Reception application form submitted</span> <time class="tw-timeline-card-time" datetime="2026-02-11T11:45">11:45 AM</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Submitted via Online Portal.</p> </div> </div> </div> </div> </div> <div class="tw-timeline-date-separator">Yesterday</div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-solid fa-arrow-right-arrow-left"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Status</span> <span class="tw-timeline-card-title">Application status changed to "Under Review"</span> <time class="tw-timeline-card-time" datetime="2026-02-10T16:15">4:15 PM</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:flex tw:items-center tw:gap-3"> <span class="tw-badge tw-badge-secondary-subtle">New</span> <i class="fa-solid fa-arrow-right tw:text-neutral-400"></i> <span class="tw-badge tw-badge-info-subtle">Under Review</span> </div> <p class="tw:text-neutral-500 tw:text-body-xs tw:mt-2 tw:mb-0">System</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-red"> <i class="fa-regular fa-calendar"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-red">Event</span> <span class="tw-timeline-card-title">Registered for School Tour — Year 2 Entry</span> <time class="tw-timeline-card-time" datetime="2026-02-10T10:30">10:30 AM</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Online Booking · 2 attendees</p> </div> </div> </div> </div> </div> <div class="tw-timeline-date-separator">Last Week</div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-magenta"> <i class="fa-regular fa-note-sticky"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-magenta">Note</span> <span class="tw-timeline-card-title">Interested in music programme and bursary options</span> <time class="tw-timeline-card-time" datetime="2026-02-03">Mon, 3 Feb</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Very interested in music programme — child has Grade 3 piano, looking at joining orchestra. Also asked about bursary options.</p> <p class="tw:text-neutral-500 tw:text-body-xs tw:mt-2 tw:mb-0">James Parker</p> </div> </div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-timeline-date-separator"&gt;Today&lt;/div&gt;</code> </div> </div> <!-- ============================================ Section 5: Compact Variant (.timeline-sm) ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact Variant</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Drawer/sidebar size:</strong> Add <code>.timeline-sm</code> to the <code>.timeline</code> container for smaller icons (28px), tighter spacing, and compact typography. Ideal for detail panels and narrow sidebars. </p> </div> <!-- Simulate drawer-width container --> <div class="tw:max-w-sm tw:bg-neutral-100 tw:border tw:border-neutral-200 tw:rounded-lg tw:p-3"> <!-- Compact header --> <div class="tw:flex tw:items-center tw:justify-between tw:mb-3"> <div class="tw:flex tw:items-center tw:gap-2"> <span class="tw:text-body-xs tw:font-semibold tw:uppercase tw:tracking-wide tw:text-neutral-700">Timeline</span> <span class="tw:text-body-xs tw:text-neutral-500">6 activities</span> </div> <button class="tw-btn tw-btn-sm tw-btn-tertiary" type="button"> View all <i class="fa-solid fa-chevron-right tw:ml-1 tw:text-xs"></i> </button> </div> <div class="tw-timeline tw-timeline-sm"> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-green"> <i class="fa-solid fa-check"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-green">Form Submitted</span> <span class="tw-timeline-card-title">Application submitted for Year 7 entry</span> <time class="tw-timeline-card-time" datetime="2026-02-11T12:00">Just now</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Submitted via Online Portal.</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-regular fa-envelope"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Email</span> <span class="tw-timeline-card-title">Re: Open Morning — Thank you for a wonderful visit</span> <time class="tw-timeline-card-time" datetime="2026-02-09">2 days ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:flex tw:gap-3 tw:text-body-xs tw:mb-2"> <span class="tw:text-neutral-500">From:</span> <span class="tw:text-neutral-800">jack.davies@email.com</span> <span class="tw-badge tw-badge-info-subtle tw-badge-sm tw:ml-auto">Received</span> </div> <p class="tw:mb-0">Thank you for hosting us at the Open Morning. Oscar really enjoyed the science lab tour.</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-red"> <i class="fa-regular fa-calendar"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-red">Event</span> <span class="tw-timeline-card-title">Open Morning attended</span> <time class="tw-timeline-card-time" datetime="2026-02-08">3 days ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">2 attendees · Confirmed</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-solid fa-arrow-right-arrow-left"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Status</span> <span class="tw-timeline-card-title">Stage changed to Engage</span> <time class="tw-timeline-card-time" datetime="2026-02-06">5 days ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:flex tw:items-center tw:gap-3"> <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">New</span> <i class="fa-solid fa-arrow-right tw:text-neutral-400 tw:text-xs"></i> <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Engage</span> </div> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-regular fa-message"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">SMS</span> <span class="tw-timeline-card-title">Tour booking confirmation sent</span> <time class="tw-timeline-card-time" datetime="2026-02-04">1 week ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Sent to +44 7700 900XXX</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-orange"> <i class="fa-solid fa-robot"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-orange">Auto</span> <span class="tw-timeline-card-title">Enquiry created from website form</span> <time class="tw-timeline-card-time" datetime="2026-02-04">1 week ago</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Enquiry auto-created from Open Day registration form on school website.</p> </div> </div> </div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-timeline tw-timeline-sm"&gt;...&lt;/div&gt;</code> </div> </div> <!-- ============================================ Section 6: Compact Skeleton ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Compact Skeleton</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Compact loading state:</strong> Skeleton placeholders adapt to the <code>.timeline-sm</code> modifier with smaller icons and tighter spacing. </p> </div> <div class="tw:max-w-sm tw:bg-neutral-100 tw:border tw:border-neutral-200 tw:rounded-lg tw:p-3"> <div class="tw-timeline tw-timeline-sm"> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-12"></div> <div class="tw-timeline-skeleton-bar tw:w-4/5"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-10"></div> <div class="tw-timeline-skeleton-bar tw:w-3/5"></div> </div> </div> <div class="tw-timeline-skeleton-item"> <div class="tw-timeline-skeleton-icon"></div> <div class="tw-timeline-skeleton-card"> <div class="tw-timeline-skeleton-bar tw:w-14"></div> <div class="tw-timeline-skeleton-bar tw:w-2/3"></div> </div> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-timeline tw-timeline-sm"&gt;&lt;div class="tw-timeline-skeleton-item"&gt;...&lt;/div&gt;&lt;/div&gt;</code> </div> </div> <!-- ============================================ Section 7: Empty State ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">Empty State</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>No activity:</strong> When no timeline items exist, show a helpful empty state with an explanation and suggested action. </p> </div> <div class="tw-timeline"> <div class="tw:text-center tw:py-10"> <div class="tw:w-12 tw:h-12 tw:rounded-lg tw:bg-neutral-100 tw:text-neutral-400 tw:flex tw:items-center tw:justify-center tw:mx-auto tw:mb-3"> <i class="fa-solid fa-clock-rotate-left tw:text-xl"></i> </div> <h3 class="tw-h5 tw:text-neutral-500 tw:mb-1">No activity yet</h3> <p class="tw:text-body-s tw:text-neutral-400 tw:mb-4">Interactions with this family will appear here as they happen.</p> <button class="tw-btn tw-btn-primary tw-btn-sm" type="button"> <i class="fa-solid fa-plus tw:mr-1"></i> Add Note </button> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>Empty state content inside a &lt;div class="tw-timeline"&gt; container</code> </div> </div> <!-- ============================================ Section 8: In-Context — Enquiry Sidebar ============================================ --> <div class="tw:border-t tw:pt-6"> <h2 class="tw-h4 tw:mb-4">In-Context: Enquiry Sidebar</h2> <div class="tw-callout tw:mb-4"> <p class="tw:mb-0 tw:text-sm"> <strong>Realistic usage:</strong> 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. </p> </div> <div class="tw:max-w-sm"> <div class="tw-card tw-card-flat"> <div class="tw-card-header tw:flex tw:items-center tw:justify-between"> <span class="tw:text-body-s tw:font-semibold tw:text-neutral-900">Activity</span> <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">12</span> </div> <div class="tw-card-body"> <div class="tw-timeline tw-timeline-sm"> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-regular fa-envelope"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Email</span> <span class="tw-timeline-card-title">Welcome pack sent</span> <time class="tw-timeline-card-time" datetime="2026-02-11T09:15">9:15 AM</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Sent to jack.davies@email.com</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-green"> <i class="fa-regular fa-file-lines"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-green">Form</span> <span class="tw-timeline-card-title">Enquiry form submitted</span> <time class="tw-timeline-card-time" datetime="2026-02-10">Yesterday</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <p class="tw:mb-0">Via Online Portal</p> </div> </div> </div> </div> </div> <div class="tw-timeline-item" data-controller="collapsible"> <div class="tw-timeline-icon tw-timeline-icon-blue"> <i class="fa-solid fa-arrow-right-arrow-left"></i> </div> <div class="tw-timeline-card"> <button class="tw-timeline-card-header" type="button" data-action="click->collapsible#toggle" aria-expanded="false"> <span class="tw-timeline-card-type tw-timeline-card-type-blue">Status</span> <span class="tw-timeline-card-title">Stage: New → Engage</span> <time class="tw-timeline-card-time" datetime="2026-02-10">Yesterday</time> <i class="fa-solid fa-chevron-down tw-timeline-card-chevron" data-collapsible-target="icon"></i> </button> <div class="tw-collapsible-content" data-collapsible-target="content"> <div class="tw-timeline-card-detail"> <div class="tw-timeline-card-detail-inner"> <div class="tw:flex tw:items-center tw:gap-3"> <span class="tw-badge tw-badge-secondary-subtle tw-badge-sm">New</span> <i class="fa-solid fa-arrow-right tw:text-neutral-400 tw:text-xs"></i> <span class="tw-badge tw-badge-info-subtle tw-badge-sm">Engage</span> </div> </div> </div> </div> </div> </div> </div> </div> <div class="tw-card-footer tw:text-center"> <button class="tw-btn tw-btn-tertiary tw-btn-sm" type="button"> View all activity <i class="fa-solid fa-chevron-right tw:ml-1 tw:text-xs"></i> </button> </div> </div> </div> <div class="tw:mt-4 tw:text-sm tw:text-gray-600"> <code>&lt;div class="tw-card tw-card-flat"&gt;&lt;div class="tw-card-body"&gt;&lt;div class="tw-timeline tw-timeline-sm"&gt;...&lt;/div&gt;&lt;/div&gt;&lt;/div&gt;</code> </div> </div> </div> <!-- Demo Script — filter pills and skeleton toggle --> <script> function filterTimeline(type, btn) { const filters = document.getElementById('timelineFilters') const feed = document.getElementById('timelineFeed') if (!filters || !feed) return // Reset all pills to inactive filters.querySelectorAll('.tag').forEach(pill => { pill.classList.remove('tag-primary') pill.classList.add('tag-outline-secondary') // Restore icon color const icon = pill.querySelector('.svg-inline--fa, i[class*="fa-"]') const iconColor = pill.dataset.iconColor if (icon && iconColor) { icon.classList.remove('text-neutral-0') icon.classList.add(iconColor) } }) // Activate clicked pill btn.classList.remove('tag-outline-secondary') btn.classList.add('tag-primary') // Swap icon to white for contrast on primary background const activeIcon = btn.querySelector('.svg-inline--fa, i[class*="fa-"]') const activeIconColor = btn.dataset.iconColor if (activeIcon && activeIconColor) { activeIcon.classList.remove(activeIconColor) activeIcon.classList.add('text-neutral-0') } // Show/hide items const items = feed.querySelectorAll('.timeline-item') let visibleCount = 0 items.forEach(item => { if (type === 'all' || item.dataset.type === type) { item.classList.remove('hidden') visibleCount++ } else { item.classList.add('hidden') } }) // Manage connector visibility for filtered items feed.querySelectorAll('.timeline-item-first-visible, .timeline-item-last-visible') .forEach(el => el.classList.remove('timeline-item-first-visible', 'timeline-item-last-visible')) const visibleItems = feed.querySelectorAll('.timeline-item:not(.hidden)') if (visibleItems.length > 0) { visibleItems[0].classList.add('timeline-item-first-visible') visibleItems[visibleItems.length - 1].classList.add('timeline-item-last-visible') } // Update count const countEl = document.getElementById('timelineCount') if (countEl) countEl.textContent = visibleCount + ' item' + (visibleCount !== 1 ? 's' : '') } function toggleSkeleton() { const feed = document.getElementById('timelineFeed') const skeleton = document.getElementById('timelineSkeleton') if (!feed || !skeleton) return feed.classList.toggle('hidden') skeleton.classList.toggle('hidden') } </script>