Compact Data List - Free UI Component Template

Text Color #1e293b

Accent Color #4f46e5

Background Color #ffffff

Font Size (rem) 0.9

Max Width (px) 600

Compact Data List

A high-density data presentation list. Ideal for displaying technical metadata, system specs, or inventory identifiers.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Compact Data 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}};
            --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: #f8fafc;
            display: flex;
            align-items: center;
            justify-content: center;
            min-height: 100vh;
            padding: 2rem;
            color: var(--text-color);
        }

.compact-container {
            width: 100%;
            max-width: var(--list-width);
            background: var(--bg-color);
            border-radius: 12px;
            overflow: hidden;
            border: 1px solid #e2e8f0;
            font-size: var(--font-size);
        }

.data-list {
            list-style: none;
            display: flex;
            flex-direction: column;
        }

.data-item {
            display: flex;
            align-items: center;
            padding: 0.75rem 1rem;
            border-bottom: 1px solid #f1f5f9;
            transition: background 0.1s ease;
        }
        .data-item:last-child { border-bottom: none; }
        .data-item:hover { background: #fcfcfd; }

.item-key {
            flex: 0 0 140px;
            font-size: 0.85em;
            font-weight: 700;
            color: var(--text-color);
            opacity: 0.6;
        }

.item-value {
            flex: 1;
            font-weight: 600;
            font-size: 0.9em;
            display: flex;
            align-items: center;
            gap: 8px;
        }

.item-value code {
            background: rgba(var(--accent-rgb, 79, 70, 229), 0.08);
            color: var(--accent-color);
            padding: 0.1rem 0.4rem;
            border-radius: 4px;
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
        }

.tag {
            font-size: 0.75em;
            background: #f1f5f9;
            padding: 0.1rem 0.6rem;
            border-radius: 4px;
            color: #475569;
        }

@media (max-width: 480px) {
            .data-item { flex-direction: column; align-items: flex-start; gap: 4px; }
            .item-key { flex: 0; }
        }

</style>
</head>
<body style="--accent-rgb: 79, 70, 229;">

<div class="compact-container">
        <ul class="data-list">
            <li class="data-item">
                <span class="item-key">Server ID</span>
                <span class="item-value"><code>uk-production-01</code></span>
            </li>
            <li class="data-item">
                <span class="item-key">Region</span>
                <span class="item-value">London, UK (eu-west-2)</span>
            </li>
            <li class="data-item">
                <span class="item-key">Status</span>
                <span class="item-value">
                   <div style="width: 8px; height: 8px; background: var(--accent-color); border-radius: 50%;"></div>
                   Online
                </span>
            </li>
            <li class="data-item">
                <span class="item-key">IP Address</span>
                <span class="item-value">192.168.1.104</span>
            </li>
            <li class="data-item">
                <span class="item-key">Labels</span>
                <span class="item-value">
                    <span class="tag">Production</span>
                    <span class="tag">Active</span>
                </span>
            </li>
            <li class="data-item">
                <span class="item-key">Last Deployment</span>
                <span class="item-value">Oct 29, 2026 14:22 GMT</span>
            </li>
        </ul>
    </div>

</body>
</html>