Two-Panel List Layout - Free UI Component Template

Text Color #1e293b

Accent Color #4f46e5

Main Panel BG #ffffff

List Panel BG #f8fafc

Base Font Size (rem) 1

Max Width (px) 1200

Side Panel Width (px) 350

Two-Panel List Layout

A Master-Detail layout inspired by modern messaging and email apps. Features a scrollable list panel and a focus content area.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Two-Panel List</title>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap" rel="stylesheet">
    <style>
        /* -- Variables ------------------------------------------------- */
        :root {
            --text-color: {{textColor}};         /* Primary Text */
            --accent-color: {{accentColor}};     /* Active item & accent */
            --bg-color: {{bgColor}};             /* Main Background */
            --panel-bg: {{panelBgColor}};        /* List Panel Background */
            --font-size: {{fontSize}}rem;        /* Text font size */
            --layout-width: {{layoutWidth}}px;     /* Max width */
            --panel-width: {{panelWidth}}px;     /* Left panel width */
        }

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: #f1f5f9;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            color: var(--text-color);
        }

/* -- Two-Panel Implementation ----------------------------------- */
        .master-detail {
            width: 100%;
            max-width: var(--layout-width);
            background: var(--bg-color);
            display: flex;
            height: 600px;
            border-radius: 24px;
            overflow: hidden;
            box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
            border: 1px solid rgba(0,0,0,0.05);
            font-size: var(--font-size);
        }

.list-panel {
            width: var(--panel-width);
            background: var(--panel-bg);
            border-right: 1px solid rgba(0,0,0,0.05);
            display: flex;
            flex-direction: column;
            overflow-y: auto;
        }

.content-panel {
            flex: 1;
            padding: 3rem;
            overflow-y: auto;
            background: var(--bg-color);
        }

/* List Items */
        .panel-item {
            padding: 1.5rem;
            cursor: pointer;
            transition: all 0.2s ease;
            display: flex;
            align-items: center;
            gap: 1rem;
            border-bottom: 1px solid rgba(0,0,0,0.03);
        }
        .panel-item:hover {
            background: rgba(0,0,0,0.02);
        }
        .panel-item.active {
            background: white;
            box-shadow: inset 4px 0 0 var(--accent-color);
        }

.item-avatar {
            width: 40px;
            height: 40px;
            background: #e2e8f0;
            border-radius: 50%;
            flex-shrink: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: 700;
            font-size: 0.8em;
            color: #64748b;
        }
        .panel-item.active .item-avatar {
            background: var(--accent-color);
            color: white;
        }

.item-meta {
            display: flex;
            flex-direction: column;
            gap: 2px;
        }
        .item-name {
            font-weight: 700;
            font-size: 0.95em;
        }
        .item-status {
            font-size: 0.75em;
            color: #94a3b8;
        }

/* Content Styles */
        .content-header { margin-bottom: 2rem; }
        .content-title { font-size: 1.75em; font-weight: 800; margin-bottom: 0.5rem; }
        .content-subtitle { color: #64748b; font-size: 1em; }
        .content-body { line-height: 1.6; color: #475569; }

/* Responsive */
        @media (max-width: 768px) {
            .master-detail { flex-direction: column; height: auto; }
            .list-panel { width: 100%; height: 300px; border-right: none; border-bottom: 1px solid rgba(0,0,0,0.05); }
        }

</style>
</head>
<body>

<div class="master-detail">
        <div class="list-panel">
            <div class="panel-item active">
                <div class="item-avatar">AV</div>
                <div class="item-meta">
                    <span class="item-name">Alexander Vaughn</span>
                    <span class="item-status">Last active 2m ago</span>
                </div>
            </div>
            <div class="panel-item">
                <div class="item-avatar">ER</div>
                <div class="item-meta">
                    <span class="item-name">Elena Rodriguez</span>
                    <span class="item-status">Away - 4h</span>
                </div>
            </div>
            <div class="panel-item">
                <div class="item-avatar">MT</div>
                <div class="item-meta">
                    <span class="item-name">Marcus Thorne</span>
                    <span class="item-status">Offline</span>
                </div>
            </div>
            <div class="panel-item">
                <div class="item-avatar">SC</div>
                <div class="item-meta">
                    <span class="item-name">Sophia Chen</span>
                    <span class="item-status">Busy</span>
                </div>
            </div>
        </div>

<div class="content-panel">
            <div class="content-header">
                <h1 class="content-title">Alexander Vaughn</h1>
                <p class="content-subtitle">Lead Systems Architect â¢ Seattle, WA</p>
            </div>
            <div class="content-body">
                <p>Select a contact from the list to view their full profile and conversation history. This two-panel layout is ideal for messaging apps, contact managers, or email clients.</p>
                <br>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
            </div>
        </div>
    </div>

</body>
</html>