title = "Style guide"
url = "/style-guide"
layout = "default"
meta_title = "Style guide"
meta_description = "theme octobercms wintercms october winter vite windicss windi css"
is_hidden = 0
==
<div>
    <div class="h-96 hero bg-primary">
        <div class="hero-content container">
            <div class="py-6 hero-text">
                <div class="py-2 font-bold text-9xl text-primary-content">
                    Aa
                </div>
                <div class="py-2 text-5xl font-bold text-primary-content">
                    Style Guide Demo
                </div>
                <p class="text-primary-content">Lorem ipsum dolor sit amet, consectetur adipiscing elit, </p>
            </div>
        </div>
    </div>

    <div class="container pt-32 pb-12">
        <div class="inline-block text-2xl font-bold border-b-8 lg:text-7xl text-base-content border-primary">Typography</div>
    </div>

    <div class="container flex flex-col lg:space-x-6 lg:flex-row">
        <div class="space-y-2 font-bold text-base-content">
            <div class="text-9xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-8xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-7xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-6xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-5xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-4xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-3xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-2xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-lg">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-base">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-sm">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-xs">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
        </div>
        <div class="space-y-2 text-base-content">
            <div class="text-9xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-8xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-7xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-6xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-5xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-4xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-3xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-2xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-xl">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-lg">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-base">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-sm">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
            <div class="text-xs">AaBb
                <span class="hidden lg:inline-block">Cc</span>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="pt-32 pb-12">
            <div class="inline-block text-2xl font-bold border-b-8 lg:text-7xl text-base-content border-primary">Brand Colors</div>
        </div>

        <div class="grid grid-cols-3 gap-6 mt-10 text-xs font-semibold capitalize">
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-primary"></div>
                <div class="py-4">primary</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-primary-focus"></div>
                <div class="py-4">primary focus</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-primary-content"></div>
                <div class="py-4">primary content</div>
            </div>
        </div>

        <div class="grid grid-cols-3 gap-6 mt-10 text-xs font-semibold capitalize">
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-secondary"></div>
                <div class="py-4">secondary</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-secondary-focus"></div>
                <div class="py-4">secondary focus</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-secondary-content"></div>
                <div class="py-4">secondary content</div>
            </div>
        </div>

        <div class="grid grid-cols-3 gap-6 mt-10 text-xs font-semibold capitalize">
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-accent"></div>
                <div class="py-4">accent</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-accent-focus"></div>
                <div class="py-4">accent focus</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-accent-content"></div>
                <div class="py-4">accent content</div>
            </div>
        </div>

        <div class="grid grid-cols-3 gap-6 mt-10 text-xs font-semibold capitalize">
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-neutral"></div>
                <div class="py-4">neutral</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-neutral-focus"></div>
                <div class="py-4">neutral focus</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg w-fill lg:w-32 lg:h-32 rounded-xl bg-neutral-content"></div>
                <div class="py-4">neutral content</div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="pt-32 pb-12">
            <div class="inline-block text-2xl font-bold border-b-8 lg:text-7xl text-base-content border-primary">Base Colors</div>
        </div>

        <div class="grid grid-cols-2 gap-6 mt-10 text-xs font-semibold capitalize lg:grid-cols-5">
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-base-100"></div>
                <div class="py-4">100</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-base-200"></div>
                <div class="py-4">200</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-base-300"></div>
                <div class="py-4">300</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-base-content"></div>
                <div class="py-4">content</div>
            </div>
        </div>
    </div>

    <div class="container">
        <div class="pt-32 pb-12">
            <div class="inline-block text-2xl font-bold border-b-8 lg:text-7xl text-base-content border-primary">State Colors</div>
        </div>

        <div class="grid grid-cols-2 gap-6 mt-10 text-xs font-semibold capitalize lg:grid-cols-5">
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-info"></div>
                <div class="py-4">info</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-success"></div>
                <div class="py-4">success</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-warning"></div>
                <div class="py-4">warning</div>
            </div>
            <div>
                <div class="w-20 h-20 shadow-lg rounded-xl bg-error"></div>
                <div class="py-4">error</div>
            </div>
        </div>
    </div>


</div>