Single Column List - Free UI Component Template

Text Color #1e293b

Accent Color #4f46e5

Background Color #f8fafc

Card BG #ffffff

Font Size (rem) 1

Max Width (px) 700

Single Column List

A high-focus single column layout balanced for linear content like tutorials, course modules, or process steps.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Single Column Layout</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}};         /* Font Color */
            --accent-color: {{accentColor}};     /* Decorative elements */
            --bg-color: {{bgColor}};             /* Page Background */
            --card-bg: {{cardBgColor}};          /* Card background */
            --font-size: {{fontSize}}rem;        /* Main text size */
            --max-width: {{maxWidth}}px;         /* Max list width */
        }

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

body {
            font-family: 'Plus Jakarta Sans', sans-serif;
            background: var(--bg-color);
            color: var(--text-color);
            line-height: 1.6;
            padding: 4rem 2rem;
            font-size: var(--font-size);
        }

.layout-wrapper {
            max-width: var(--max-width);
            margin: 0 auto;
        }

.header {
            text-align: center;
            margin-bottom: 4rem;
        }
        .header h1 {
            font-size: 2.5rem;
            font-weight: 800;
            margin-bottom: 1rem;
            letter-spacing: -0.04em;
        }
        .header p {
            color: #64748b;
            font-size: 1.1rem;
        }

.list-stack {
            display: flex;
            flex-direction: column;
            gap: 1.5rem;
        }

.stack-item {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.05);
            display: flex;
            align-items: center;
            gap: 1.5rem;
            transition: all 0.3s ease;
            cursor: pointer;
        }

.stack-item:hover {
            transform: scale(1.02);
            box-shadow: 0 20px 40px -10px rgba(0,0,0,0.1);
            border-color: var(--accent-color);
        }

.item-index {
            font-size: 2em;
            font-weight: 800;
            color: rgba(var(--accent-rgb, 79, 70, 229), 0.1);
            width: 60px;
            text-align: center;
        }

.item-text {
            flex: 1;
        }
        .item-text h3 {
            font-size: 1.25em;
            font-weight: 700;
            margin-bottom: 0.25rem;
        }
        .item-text p {
            color: #64748b;
            font-size: 0.95em;
        }

.item-tag {
            background: rgba(var(--accent-rgb, 79, 70, 229), 0.1);
            color: var(--accent-color);
            padding: 0.25rem 0.75rem;
            border-radius: 100px;
            font-size: 0.75em;
            font-weight: 700;
            text-transform: uppercase;
        }

@media (max-width: 640px) {
            .stack-item { flex-direction: column; text-align: center; }
            .item-index { width: 100%; }
        }

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

<div class="layout-wrapper">
        <header class="header">
            <h1>Single Column Layout</h1>
            <p>A centered, high-focus list layout for linear content delivery.</p>
        </header>

<section class="list-stack">
            <div class="stack-item">
                <span class="item-index">01</span>
                <div class="item-text">
                    <h3>Getting Started</h3>
                    <p>Learn the basics of our platform and setup your first project.</p>
                </div>
                <span class="item-tag">Intro</span>
            </div>
            <div class="stack-item">
                <span class="item-index">02</span>
                <div class="item-text">
                    <h3>Core Concepts</h3>
                    <p>Explore the fundamental principles behind our design system.</p>
                </div>
                <span class="item-tag">Basics</span>
            </div>
            <div class="stack-item">
                <span class="item-index">03</span>
                <div class="item-text">
                    <h3>Advanced Techniques</h3>
                    <p>Take your skills to the next level with pro-level animations.</p>
                </div>
                <span class="item-tag">Expert</span>
            </div>
            <div class="stack-item">
                <span class="item-index">04</span>
                <div class="item-text">
                    <h3>Going Live</h3>
                    <p>Best practices for deploying your production-ready sites.</p>
                </div>
                <span class="item-tag">Production</span>
            </div>
        </section>
    </div>

</body>
</html>