Nested Hierarchy List - Free UI Component Template

Text Color #1e293b

Accent Color #4338ca

Background Color #ffffff

Font Size (rem) 1

Max Width (px) 650

Nested Hierarchy List

A complex multi-level hierarchy with visual connectors and context-aware iconography for deep information architecture.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nested Hierarchy 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>
        :root {
            --text-color: {{textColor}};
            --accent-color: {{accentColor}};
            --bg-color: {{bgColor}};
            --page-bg: #d946ef; /* Vibrant Bright Fuchsia/Purple */
            --font-size: {{fontSize}}rem;
            --list-width: {{listWidth}}px;
        }

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

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

.hierarchy-container {
            width: 100%;
            max-width: var(--list-width);
            background: var(--bg-color);
            border-radius: 24px;
            padding: 2.5rem;
            box-shadow: 0 40px 100px rgba(0,0,0,0.25);
            font-size: var(--font-size);
        }

.nested-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 0.5rem;
        }

.item {
            display: flex;
            align-items: center;
            gap: 1rem;
            padding: 0.75rem 1rem;
            border-radius: 12px;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        .item:hover { 
            background: color-mix(in srgb, var(--accent-color), transparent 92%);
            transform: translateX(5px);
        }
        .item:hover .icon { transform: scale(1.1); }

.level-1 { font-weight: 800; font-size: 1.1em; color: var(--text-color); }
        .level-2 { font-weight: 700; margin-left: 2rem; color: var(--text-color); opacity: 0.8; font-size: 1em; }
        .level-3 { font-weight: 600; margin-left: 4rem; color: var(--text-color); opacity: 0.6; font-size: 0.9em; }

.icon {
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--accent-color);
            flex-shrink: 0;
        }

.icon svg {
            width: 100%;
            height: 100%;
            stroke: currentColor;
            fill: none;
            stroke-width: 2.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

.connector {
            position: relative;
        }
        .connector::before {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: -0.5rem;
            bottom: 0.5rem;
            width: 2px;
            background: color-mix(in srgb, var(--accent-color), transparent 80%);
        }
        .connector::after {
            content: '';
            position: absolute;
            left: -1.5rem;
            top: 1.25rem;
            width: 1rem;
            height: 2px;
            background: color-mix(in srgb, var(--accent-color), transparent 80%);
        }

</style>
</head>
<body style="--accent-rgb: 217, 70, 239;">

<div class="hierarchy-container">
        <ul class="nested-list">
            <li>
                <div class="item level-1">
                    <div class="icon">
                        <svg viewBox="0 0 24 24"><path d="M21 8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16Z"/><path d="m3.3 7 8.7 5 8.7-5"/><path d="M12 22V12"/></svg>
                    </div>
                    <span>Root Project</span>
                </div>
                <ul class="nested-list">
                    <li>
                        <div class="item level-2 connector">
                            <div class="icon">
                                <svg viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 0-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
                            </div>
                            <span>Source Code</span>
                        </div>
                        <ul class="nested-list">
                            <li>
                                <div class="item level-3 connector">
                                    <div class="icon">
                                        <svg viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
                                    </div>
                                    <span>Main.js</span>
                                </div>
                            </li>
                            <li>
                                <div class="item level-3 connector">
                                    <div class="icon">
                                        <svg viewBox="0 0 24 24"><path d="M14.5 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7.5L14.5 2z"/><polyline points="14 2 14 8 20 8"/></svg>
                                    </div>
                                    <span>Utils.js</span>
                                </div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div class="item level-2 connector">
                            <div class="icon">
                                <svg viewBox="0 0 24 24"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 0-1.69-.9L9.6 3.9A2 2 0 0 0 7.93 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z"/></svg>
                            </div>
                            <span>Documentation</span>
                        </div>
                    </li>
                </ul>
            </li>
            <li>
                <div class="item level-1">
                    <div class="icon">
                        <svg viewBox="0 0 24 24"><path d="M12.22 2h-.44a2 2 0 0 0-2 2v.18a2 2 0 0 1-1 1.73l-.43.25a2 2 0 0 1-2 0l-.15-.08a2 2 0 0 0-2.73.73l-.22.38a2 2 0 0 0 .73 2.73l.15.1a2 2 0 0 1 1 1.72v.51a2 2 0 0 1-1 1.74l-.15.09a2 2 0 0 0-.73 2.73l.22.38a2 2 0 0 0 2.73.73l.15-.08a2 2 0 0 1 2 0l.43.25a2 2 0 0 1 1 1.73V20a2 2 0 0 0 2 2h.44a2 2 0 0 0 2-2v-.18a2 2 0 0 1 1-1.73l.43-.25a2 2 0 0 1 2 0l.15.08a2 2 0 0 0 2.73-.73l.22-.39a2 2 0 0 0-.73-2.73l-.15-.08a2 2 0 0 1-1-1.74v-.5a2 2 0 0 1 1-1.74l.15-.09a2 2 0 0 0 .73-2.73l-.22-.38a2 2 0 0 0-2.73-.73l-.15.08a2 2 0 0 1-2 0l-.43-.25a2 2 0 0 1-1-1.73V4a2 2 0 0 0-2-2z"/><circle cx="12" cy="12" r="3"/></svg>
                    </div>
                    <span>Configuration</span>
                </div>
            </li>
        </ul>
    </div>

</body>
</html>