Grid-Based List - Free UI Component Template

Text Color #1e293b

Accent Color #4f46e5

Card BG #ffffff

Columns 3

Grid Gap (rem) 2

Title Font Size (rem) 1.2

Max Width (px) 1200

Grid-Based List

A responsive grid of feature-style cards. Each item includes an icon, title, and description area.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Grid 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}};     /* Icon & Highlight */
            --card-bg: {{cardBgColor}};          /* Individual Item Background */
            --grid-columns: {{gridColumns}};     /* Number of columns */
            --grid-gap: {{gridGap}}rem;          /* Gap between cards */
            --font-size: {{fontSize}}rem;        /* Title font size */
            --list-width: {{listWidth}}px;       /* Max width */
        }

*, *::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: 4rem 2rem;
            color: var(--text-color);
        }

/* -- Grid Implementation --------------------------------------- */
        .grid-container {
            width: 100%;
            max-width: var(--list-width);
            display: grid;
            grid-template-columns: repeat(var(--grid-columns), 1fr);
            gap: var(--grid-gap);
        }

.grid-item {
            background: var(--card-bg);
            padding: 2rem;
            border-radius: 16px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.03);
            border: 1px solid rgba(0,0,0,0.05);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            flex-direction: column;
            gap: 1rem;
            cursor: pointer;
        }

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

.item-icon {
            width: 48px;
            height: 48px;
            background: rgba(var(--accent-rgb, 79, 70, 229), 0.1);
            color: var(--accent-color);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.5rem;
        }

.item-title {
            font-size: var(--font-size);
            font-weight: 700;
            color: var(--text-color);
            line-height: 1.3;
        }

.item-desc {
            font-size: 0.9rem;
            color: #64748b;
            line-height: 1.6;
        }

/* Responsive Grid */
        @media (max-width: 1024px) {
            .grid-container { grid-template-columns: repeat(min(var(--grid-columns), 2), 1fr); }
        }
        @media (max-width: 640px) {
            .grid-container { grid-template-columns: 1fr; }
        }

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

<div class="grid-container">
        <div class="grid-item">
            <div class="item-icon">â¡</div>
            <h3 class="item-title">Fast Integration</h3>
            <p class="item-desc">Deploy in seconds with our zero-dependency CSS architecture.</p>
        </div>
        <div class="grid-item">
            <div class="item-icon">ð¨</div>
            <h3 class="item-title">Visual Editor</h3>
            <p class="item-desc">Easily customize every property with our real-time generator.</p>
        </div>
        <div class="grid-item">
            <div class="item-icon">ð±</div>
            <h3 class="item-title">Responsive Design</h3>
            <p class="item-desc">Optimized for every screen size from mobile to desktop.</p>
        </div>
        <div class="grid-item">
            <div class="item-icon">ð</div>
            <h3 class="item-title">Secure by Default</h3>
            <p class="item-desc">Enterprise-grade security built into every component.</p>
        </div>
        <div class="grid-item">
            <div class="item-icon">ð</div>
            <h3 class="item-title">Premium Support</h3>
            <p class="item-desc">Our dedicated team is ready to help you 24/7 with any issues.</p>
        </div>
        <div class="grid-item">
            <div class="item-icon">ð</div>
            <h3 class="item-title">High Performance</h3>
            <p class="item-desc">Lighting fast interactions with optimized rendering logic.</p>
        </div>
    </div>

</body>
</html>