Kinetic Component Library

Base 

<!DOCTYPE html>
<html lang="en" class="antialiased scroll-smooth">

<head>
    <!-- Standard Project Meta -->
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Resource preload hints -->
    <link rel="preload" as="font" href="/assets/fonts/OpenSans-Regular.woff" type="font/woff">
    <link rel="preload" as="font" href="/assets/fonts/OpenSans-Bold.woff" type="font/woff">
    <link rel="preload" as="font" href="/assets/fonts/OpenSans-Light.woff" type="font/woff">

    <link rel="preload" as="font" href="/assets/fonts/fa-solid-900.woff2" type="font/woff2">

    <!-- Project Styles -->
    <link rel="stylesheet" href="../../assets/css/styles.css">

    <!-- Script Vars -->

    <title>Base</title>
</head>

<body class="flex flex-col justify-between min-h-screen antialiased">

    <header x-data="{ open: false }">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 py-4 flex justify-between">
            <div class="flex-shrink-0 flex items-center">
                <img class="h-20 w-auto" src="/assets/img/logo.png" alt="">
            </div>
            <div class="-mr-2 flex items-center lg:hidden">
                <!-- Mobile menu button -->
                <button type="button" class="bg-gray-100 border border-gray-200 inline-flex items-center justify-center p-2 rounded-full text-primary hover:text-pink focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary" aria-controls="mobile-menu" @click="open = !open" aria-expanded="false" x-bind:aria-expanded="open.toString()">
                    <span class="sr-only">Open main menu</span>
                    <svg x-state:on="Menu open" x-state:off="Menu closed" class="h-8 w-8 block" :class="{ 'hidden': open, 'block': !(open) }" x-description="Heroicon name: outline/menu" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16"></path>
                    </svg>
                    <svg x-state:on="Menu open" x-state:off="Menu closed" class="h-8 w-8 hidden" :class="{ 'block': open, 'hidden': !(open) }" x-description="Heroicon name: outline/x" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
                    </svg>
                </button>
            </div>
        </div>
        <div class="bg-light lg:bg-primary hidden lg:block min-h-full lg:min-h-auto" :class="{'hidden':!open}">
            <div class="max-w-7xl mx-auto px-6 lg:px-6 py-4 flex flex-col lg:flex-row justify-between">
                <div class="flex flex-col lg:flex-row lg:space-x-4 -ml-4">
                    <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light font-bold">Home</a>
                    <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">My TRS</a>
                    <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">HR Hub</a>
                    <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">News</a>
                    <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">Documents</a>
                    <a href="#" class="text-dark lg:text-light text-lg py-3 px-4 underline-offset-2 hover:underline focus:outline-none focus:ring-1 focus:ring-light">Tools</a>
                </div>
                <div class="flex items-center text-dark lg:text-light text-lg mt-2 lg:mt-0 border-t lg:border-0 py-4 lg:py-0">
                    <div class="pr-4 mr-2 border-r">Brett Hill</div>
                    <a href="#" class="p-2 hover:opacity-80 focus:outline-none focus:ring-1 focus:ring-light">
                        <svg class="w-7 h-7" viewBox="0 0 27 27" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
                            <g id="UX-Components" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
                                <g id="Kinetic-UX-Components-1-of-2" transform="translate(-1696.000000, -368.000000)" fill="currentColor" fill-rule="nonzero">
                                    <g id="Group" transform="translate(118.000000, 220.000000)">
                                        <g id="Group-7" transform="translate(1479.000000, 148.000000)">
                                            <g id="person-circle-outline-(1)" transform="translate(99.000000, 0.000000)">
                                                <path d="M13.6888455,0.00125428445 C6.09674302,-0.101284144 -0.101289012,6.09645 0.00125434474,13.6881876 C0.102499685,20.969065 6.03119315,26.8974735 13.3124205,26.998714 C20.905821,27.1025504 27.102555,20.9048162 26.9987137,13.3130786 C26.8987663,6.03090328 20.9700729,0.102494758 13.6888455,0.00125428445 Z M21.8936121,21.2390396 C21.8412728,21.2956368 21.7664857,21.3260461 21.6894996,21.3220339 C21.6125136,21.3180218 21.5412929,21.2800034 21.4951208,21.2182723 C20.9146144,20.4588022 20.2037059,19.8085774 19.395578,19.2979482 C17.7432022,18.2375191 15.6495005,17.6534395 13.500633,17.6534395 C11.3517656,17.6534395 9.25806386,18.2375191 7.60568799,19.2979482 C6.79758945,19.8083509 6.08667896,20.4583577 5.5061452,21.2176233 C5.45997317,21.2793544 5.38875245,21.3173729 5.31176641,21.321385 C5.23478036,21.3253971 5.15999321,21.2949878 5.10765393,21.2383906 C3.20325167,19.1826683 2.12448267,16.4965055 2.07808183,13.6946774 C1.97229343,7.37947831 7.15462702,2.09355741 13.4727256,2.07794658 C19.7908243,2.0624065 24.9231875,7.19257282 24.9231875,13.4999841 C24.9253606,16.3693775 23.8432478,19.1336396 21.8936121,21.2390396 Z" id="Shape"></path>
                                                <path d="M13.4995382,6 C12.1944565,6 11.0144561,6.51319444 10.1759477,7.44583333 C9.33743931,8.37847222 8.91851602,9.66805556 9.0131543,11.0520833 C9.20507808,13.7777778 11.2176306,16 13.4995382,16 C15.7814459,16 17.7900276,13.7777778 17.9859222,11.0527778 C18.0838695,9.68194444 17.6682552,8.40416667 16.8158489,7.45416667 C15.9740315,6.51666667 14.7960165,6 13.4995382,6 Z" id="Path"></path>
                                            </g>
                                        </g>
                                    </g>
                                </g>
                            </g>
                        </svg>
                    </a>
                </div>
            </div>
        </div>

    </header>

    <div class="relative flex-1 w-full overflow-hidden">

    </div>

    <footer class="bg-secondary text-light mt-24">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 py-14 grid sm:grid-cols-12 gap-8 lg:divide-x divide-white/30">

            <div class="sm:pr-12 sm:col-span-4 lg:col-span-2">
                <div class="font-bold">Kinetic+</div>
            </div>

            <div class="sm:px-12 sm:col-span-8 lg:col-span-5 sm:border-l sm:border-white/30 lg:border-0">
                <div class="font-bold mb-4">Quick links</div>
                <div class="columns-2 gap-6 text-sm">
                    <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">My TRS</a>
                    <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">My Hub</a>
                    <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Company policies</a>
                    <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Another link</a>
                    <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">Something else</a>
                    <a href="#" class="flex underline underline-offset-2 text-light/70 px-3 py-2 -ml-3 hover:text-light/100 focus:outline-none focus:ring-1 focus:ring-light">More</a>
                </div>
            </div>

            <div class="lg:pl-12 sm:col-span-12 lg:col-span-5 flex justify-between items-start">
                <div class="flex-shrink-0 flex items-center">
                    <img class="h-24 w-auto" src="/assets/img/logo-white.png" alt="">
                </div>

                <a href="#top" class="bg-white rounded-full text-dark w-14 h-14 flex justify-center items-center hover:opacity-80 focus:outline-none focus:ring-1 focus:ring-offset-2 focus:ring-offset-secondary focus:ring-white"><i class="fas fa-chevron-up fa-2x"></i></a>
            </div>

        </div>
        <div class="bg-dark">
            <div class="max-w-7xl mx-auto px-4 sm:px-6 py-6 text-sm">
                &copy; Towergate Health & Protection 2022
            </div>
        </div>
    </footer>
    <!-- Project Scripts -->
    <script type="module" src="../../assets/js/app.js"></script>
</body>

</html>
 
<!DOCTYPE html>
<html lang="en" class="antialiased scroll-smooth">
<head>
	<!-- Standard Project Meta -->
	<meta charset="UTF-8">
	<meta http-equiv="x-ua-compatible" content="ie=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	
	
	<!-- Resource preload hints -->
	<link rel="preload" as="font" href="/assets/fonts/OpenSans-Regular.woff" type="font/woff">
	<link rel="preload" as="font" href="/assets/fonts/OpenSans-Bold.woff" type="font/woff">
	<link rel="preload" as="font" href="/assets/fonts/OpenSans-Light.woff" type="font/woff">
	
	<link rel="preload" as="font" href="/assets/fonts/fa-solid-900.woff2" type="font/woff2">
	
	<!-- Project Styles -->
	<link rel="stylesheet" href="{{ path '/assets/css/styles.css' }}">
	
	<!-- Script Vars -->
	
	
	<title>Base</title>
</head>
	<body class="flex flex-col justify-between min-h-screen antialiased">
	
		{{> @siteheader }}
		
		<div class="relative flex-1 w-full overflow-hidden">
			{{{ yield }}}
		</div>
		
		{{> @sitefooter }}
		
		<!-- Project Scripts -->
		<script type="module" src="{{ path '/assets/js/app.js' }}"></script>
	</body>
</html>
 
/* No context defined. */

No notes defined.