Logo

ScreenCraft Components

Headers

Outline the purpose of these components here...

Simple Header

SCC Logo

Site Name

Navigation Area


<div class="w-full mt-5 text-gray-700 bg-white border-t border-gray-100 shadow-sm body-font">
    <div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row gap-2">
        <a class="flex items-center mb-4 text-gray-900 title-font md:mb-0 gap-2">
            <img src="../../assets/img/SCC-Logo.svg" alt="SCC Logo" class="h-6">
            <h1 class="text-sm">Site Name</h1>
        </a>
        <div class="flex flex-wrap text-gray-500 pl-6 ml-6 text-base border-l border-gray-200 md:mr-auto border border-dashed">
            <p>Navigation Area</p>
        </div>
    </div>
</div>

Header with Navigation on Right

SCC Logo

Site Name

Navigation Area


<div class="w-full mt-5 text-gray-700 bg-white shadow-sm body-font">
    <div class="container flex flex-col items-start justify-between p-6 mx-auto md:flex-row gap-2">
        <a class="flex items-center mb-4 text-gray-900 title-font md:mb-0 gap-2">
            <img src="../../assets/img/SCC-Logo.svg" alt="SCC Logo" class="h-6">
            <h1 class="text-sm">Site Name</h1>
        </a>
        <div class="flex text-base md:ml-auto border border-dashed">
            <p>Navigation Area</p>
        </div>
    </div>
</div>

Sticky Header

SCC Logo

Site Name

Navigation Area

This area will slide behind the header


<div class="sticky top-0 flex flex-col justify-between p-6 mx-auto md:flex-row gap-2 bg-gray-800 text-gray-200">
    <a class="flex items-center mb-4 title-font md:mb-0 gap-2">
        <img src="../../assets/img/SCC-Logo.svg" alt="SCC Logo" class="h-6">
        <h1 class="text-sm">Site Name</h1>
    </a>
    <div class="flex text-base md:ml-auto border border-dashed">
        <p>Navigation Area</p>
    </div>
</div>

Component Name

Component demo

<p>Component Code</p>