Service Timeline

<div class="card">
	<header>
		<h3>Service Queue</h3>
		<span class="badge primary">7 people waiting</span>
	</header>
	
	<ol class="chat">
		<!-- Active item -->
		<li>
			<div class="avatar primary"><span class="axicon render" data-name="Check"></span></div>
			<div>
				<h4>John Smith</h4>
				<small>Ticket #A-2024</small>
			</div>
			<div><strong>SERVING</strong></div>
		</li>
		
		<!-- Waiting item -->
		<li data-author="user">
			<div class="avatar">1</div>
			<div>
				<h4>Sarah Johnson</h4>
				<small>Ticket #A-2025</small>
			</div>
			<div><small>WAITING</small></div>
		</li>
	</ol>
</div>

• Queue Display - Visual list of waiting customers
• Status Indicators - Serving, waiting, completed states
• Position Numbers - Clear queue position display
• Progress Bar - Visual queue progress indicator
• Timeline View - Service history tracking
• Customer Info - Name, ticket number, and details

• Service Desks - Bank, DMV, post office queues
• Restaurant Booking - Waiting list management
• Customer Support - Help desk ticket queue
• Healthcare - Patient waiting lists
• Event Registration - Ticket redemption queues
• Print Shop - Job queue and status tracking

• Use semantic list structure for queue items
• Clearly indicate serving vs waiting status
• Use colors + text for status (not just color)
• Include aria-label for status badges
• Support keyboard navigation through queue
• Provide text alternative for progress indicators

• Clear Status - Make current service obvious
• Position Tracking - Show customer's position in queue
• Time Estimates - Display wait time if available
• Real-Time Updates - Update as customers move through
• Visual Hierarchy - Emphasize currently serving customer
• History Tracking - Show completed services timeline