Lists - Design Guide

Basic List

Simple list with clean styling.

Project Planning
Design System
Development Phase
Testing & QA

HTML

<ul class="space-y-2">
    <li class="py-2 px-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-white">
        Project Planning
    </li>
    <li class="py-2 px-3 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-white">
        Design System
    </li>
    <!-- More items... -->
</ul>

Interactive List

List with hover states and clickable items.

HTML

<ul class="space-y-1">
    <li>
        <a href="#" class="block py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md text-gray-900 dark:text-white hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors">
            <div class="flex items-center justify-between">
                <span>Dashboard Overview</span>
                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7"/>
                </svg>
            </div>
        </a>
    </li>
    <!-- More items... -->
</ul>

Avatar List

List with avatars and additional information.

JD

John Doe

Project Manager

2 hours ago
SM

Sarah Miller

UI Designer

5 hours ago
AK

Alex Kim

Developer

1 day ago

HTML

<ul class="space-y-3">
    <li class="flex items-center py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md">
        <div class="w-10 h-10 bg-blue-500 rounded-full flex items-center justify-center text-white font-medium text-sm mr-3">
            JD
        </div>
        <div class="flex-1">
            <div class="text-sm font-medium text-gray-900 dark:text-white">John Doe</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Project Manager</div>
        </div>
        <div class="text-xs text-gray-400 dark:text-gray-500">2 hours ago</div>
    </li>
    <!-- More items... -->
</ul>

Task List

List with checkboxes and status indicators.

Complete user research

Done
Design wireframes

In Progress
Develop prototype

Todo

HTML

<ul class="space-y-2">
    <li class="flex items-center py-3 px-4 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-md">
        <input type="checkbox" checked class="h-4 w-4 text-primary-600 focus:ring-primary-500 border-gray-300 dark:border-gray-600 rounded bg-white dark:bg-gray-800 mr-3">
        <div class="flex-1">
            <div class="text-sm text-gray-500 dark:text-gray-400 line-through">Complete user research</div>
        </div>
        <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 dark:bg-green-900 text-green-800 dark:text-green-200">
            Done
        </span>
    </li>
    <!-- More items... -->
</ul>

Ordered List

Numbered list with custom styling.

1

Project Initialization

Set up project structure and requirements
2

Design Phase

Create mockups and design system
3

Development

Build the application features

HTML

<ol class="space-y-3">
    <li class="flex items-start">
        <span class="flex items-center justify-center w-6 h-6 bg-primary-600 text-white rounded-full text-sm font-medium mr-3 mt-0.5">
            1
        </span>
        <div class="flex-1">
            <div class="text-sm font-medium text-gray-900 dark:text-white">Project Initialization</div>
            <div class="text-sm text-gray-500 dark:text-gray-400">Set up project structure and requirements</div>
        </div>
    </li>
    <!-- More items... -->
</ol>