Inline Horizontal List - Free UI Component Template

Text Color #1e293b

Accent Color #0f172a

Horizontal Spacing (rem) 2

Font Size (rem) 0.9

Alignment center

Hover Effect Underline

Show Dividers

Divider Color #e2e8f0

Inline Horizontal List

A flexible horizontal list perfect for secondary navigation, footer links, or horizontally grouped labels.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Premium Inline Horizontal 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}};     /* Hover & Underline color */
            --h-gap: {{hGap}}rem;                /* Horizontal spacing between items */
            --font-size: {{fontSize}}rem;        /* Text font size */
            --list-align: {{listAlign}};         /* Alignment: flex-start, center, flex-end */
            --divider-color: {{dividerColor}};   /* Divider line color */
            --accent-glow: {{accentColor}}88;    /* Accent with 53% opacity for glow */
        }

*, *::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);
        }

/* -- List Implementation --------------------------------------- */
        .inline-container {
            width: 100%;
            max-width: 1000px;
            background: #ffffff;
            padding: 2rem;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.03);
            display: flex;
            justify-content: var(--list-align);
        }

ul.premium-inline-list {
            list-style: none;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: var(--h-gap);
        }

ul.premium-inline-list li {
            font-size: var(--font-size);
            font-weight: 600;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            white-space: nowrap;
            display: flex;
            align-items: center;
        }

/* Hover Effect: Underline (Default) */
        body[data-hover="Underline"] ul.premium-inline-list li::after {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-color);
            transition: width 0.3s ease;
        }
        body[data-hover="Underline"] ul.premium-inline-list li:hover {
            color: var(--accent-color);
        }
        body[data-hover="Underline"] ul.premium-inline-list li:hover::after {
            width: 100%;
        }

/* Hover Effect: Glow */
        body[data-hover="Glow"] ul.premium-inline-list li:hover {
            color: var(--accent-color);
            text-shadow: 0 0 12px var(--accent-glow);
        }

/* Hover Effect: Scale */
        body[data-hover="Scale"] ul.premium-inline-list li:hover {
            color: var(--accent-color);
            transform: translateY(-2px) scale(1.05);
        }

/* Divider Logic */
        body[data-dividers="Yes"] ul.premium-inline-list li:not(:last-child)::after {
            content: '';
            width: 1px;
            height: 1.2rem;
            background: var(--divider-color);
            margin-left: calc(var(--h-gap) / 2);
            position: absolute;
            right: calc(var(--h-gap) / -2);
            top: 50%;
            transform: translateY(-50%);
        }
        /* No hover adjustment for dividers - keep them static */
        
        /* Underline effect override when dividers are on */
        body[data-hover="Underline"][data-dividers="Yes"] ul.premium-inline-list li::after {
            display: none; /* Hide the divider-using ::after if we're using it for underline */
        }
        /* Fallback for Underline + Dividers: use a span or different pseudo */
        body[data-hover="Underline"][data-dividers="Yes"] ul.premium-inline-list li::before {
            content: '';
            position: absolute;
            bottom: -4px;
            left: 0;
            width: 0;
            height: 2px;
            background: var(--accent-color);
            transition: width 0.3s ease;
        }
        body[data-hover="Underline"][data-dividers="Yes"] ul.premium-inline-list li:hover::before {
            width: 100%;
        }

</style>
</head>
<body data-dividers="{{showDividers}}" data-hover="{{hoverEffect}}">

<div class="inline-container">
        <ul class="premium-inline-list">
            <li>Platform</li>
            <li>Solutions</li>
            <li>Resources</li>
            <li>Pricing</li>
            <li>Company</li>
            <li>Contact</li>
        </ul>
    </div>

</body>
</html>