Kinetic Component Library

Documents 

<div class="w-full h-[300px] relative">
    <picture class="">
        <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
    </picture>
    <div class="absolute w-full h-full bg-gradient-to-t from-black/75"></div>

    <div class="max-w-7xl mx-auto px-4 sm:px-6 py-10 h-full flex items-end relative">
        <h1 class="text-5xl font-bold text-white text-shadow-md">Mental health</h1>
    </div>
</div>
<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-16 mt-16">

    <div class="flex flex-col sm:flex-row">
        <div class="flex flex-col sm:pr-6 lg:pr-10 w-full sm:w-[250px] lg:w-[350px] mb-10 sm:mb-0" x-data="{open:false}">
            <h3 class="text-xl font-bold uppercase px-6 py-4 bg-dark/5 border-b border-dark/10 flex justify-between items-center">
                Documents
                <div class="sm:hidden cursor-pointer hover:opacity-80 px-1 -mr-1" tabindex="0" x-on:click="open = !open" x-on:keydown.space="open != open">
                    <i class="fas fa-chevron-up fa-lg" x-show="open"></i>
                    <i class="fas fa-chevron-down fa-lg" x-show="!open"></i>
                </div>
            </h3>
            <div class="sm:!flex sm:!h-auto" x-show="open" x-collapse>
                <nav class="flex flex-col text-lg lg:text-xl font-bold mt-6 space-y-4 pb-6 sm:pb-0 border-b border-dark/10 sm:border-0">
                    <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Employee HR documents</a>
                    <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline text-blue" tabindex="-1">
                        <i class="fas fa-chevron-right fa-sm -ml-5 mr-2"></i>
                        IT help and FAQ
                    </a>
                    <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Useful resources</a>
                    <a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Wellbeing documents</a>
                </nav>
            </div>
        </div>
        <div class="flex-1 sm:border-l border-dark\20 sm:pl-6 lg:pl-10 space-y-16">
            <div class="prose">
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
                <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
            </div>
            <div class="grid sm:grid-cols-2 md:grid-cols-3 gap-10">
                <div class="bg-blue-light rounded flex flex-col overflow-hidden">
                    <div class="h-[130px] relative" tabindex="-1">
                        <picture class="">
                            <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                        </picture>
                    </div>
                    <div class="flex-1 p-6 relative">
                        <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                            <i class="fas fa-file-pdf fa-lg"></i>
                        </div>
                        <h4 class="text-2xl font-bold">Document title</h4>
                        <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
                        <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
                    </div>
                    <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
                        <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
                        <i class="fas fa-arrow-circle-down fa-2x"></i>
                    </a>
                </div>
                <div class="bg-blue-light rounded flex flex-col overflow-hidden">
                    <div class="h-[130px] relative" tabindex="-1">
                        <picture class="">
                            <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                        </picture>
                    </div>
                    <div class="flex-1 p-6 relative">
                        <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                            <i class="fas fa-file-pdf fa-lg"></i>
                        </div>
                        <h4 class="text-2xl font-bold">Document title</h4>
                        <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
                        <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
                    </div>
                    <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
                        <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
                        <i class="fas fa-arrow-circle-down fa-2x"></i>
                    </a>
                </div>
                <div class="bg-blue-light rounded flex flex-col overflow-hidden">
                    <div class="h-[130px] relative" tabindex="-1">
                        <picture class="">
                            <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                        </picture>
                    </div>
                    <div class="flex-1 p-6 relative">
                        <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                            <i class="fas fa-file-pdf fa-lg"></i>
                        </div>
                        <h4 class="text-2xl font-bold">Document title</h4>
                        <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
                        <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
                    </div>
                    <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
                        <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
                        <i class="fas fa-arrow-circle-down fa-2x"></i>
                    </a>
                </div>
                <div class="bg-blue-light rounded flex flex-col overflow-hidden">
                    <div class="h-[130px] relative" tabindex="-1">
                        <picture class="">
                            <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                        </picture>
                    </div>
                    <div class="flex-1 p-6 relative">
                        <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                            <i class="fas fa-file-pdf fa-lg"></i>
                        </div>
                        <h4 class="text-2xl font-bold">Document title</h4>
                        <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
                        <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
                    </div>
                    <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
                        <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
                        <i class="fas fa-arrow-circle-down fa-2x"></i>
                    </a>
                </div>
                <div class="bg-blue-light rounded flex flex-col overflow-hidden">
                    <div class="h-[130px] relative" tabindex="-1">
                        <picture class="">
                            <img class="absolute w-full h-full object-cover" srcset="https://picsum.photos/1000/500?random&#x3D;1 800w, https://picsum.photos/1000/500?random&#x3D;1 480w" width="100%" height="100%" alt="" loading="lazy" style="object-position: 50% 50%;" sizes="100vw" src="https://picsum.photos/1000/500?random&#x3D;1">
                        </picture>
                    </div>
                    <div class="flex-1 p-6 relative">
                        <div class="bg-blue rounded-full w-12 h-12 border-4 border-blue-light absolute -top-6 right-4 flex justify-center items-center text-light">
                            <i class="fas fa-file-pdf fa-lg"></i>
                        </div>
                        <h4 class="text-2xl font-bold">Document title</h4>
                        <div class="text-sm opacity-60 uppercase mb-6">Monday 31 January 2022</div>
                        <div class="">Summary… lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. </div>
                    </div>
                    <a href="#" class="flex justify-between items-center px-6 py-4 text-blue border-t hover:text-pink group focus:outline-none">
                        <span class="font-bold text-lg group-focus:underline underline-offset-2">Download</span>
                        <i class="fas fa-arrow-circle-down fa-2x"></i>
                    </a>
                </div>
            </div>
        </div>
    </div>

</div>
 
{{> '@header--small'}}

<div class="max-w-7xl mx-auto px-4 sm:px-6 space-y-16 mt-16">
	
	<div class="flex flex-col sm:flex-row">
		<div class="flex flex-col sm:pr-6 lg:pr-10 w-full sm:w-[250px] lg:w-[350px] mb-10 sm:mb-0"
			x-data="{open:false}"
		>
			<h3 class="text-xl font-bold uppercase px-6 py-4 bg-dark/5 border-b border-dark/10 flex justify-between items-center">
				Documents
				<div class="sm:hidden cursor-pointer hover:opacity-80 px-1 -mr-1" tabindex="0"
					x-on:click="open = !open"
					x-on:keydown.space="open != open"
				>
					<i class="fas fa-chevron-up fa-lg" x-show="open"></i>
					<i class="fas fa-chevron-down fa-lg" x-show="!open"></i>
				</div>
			</h3>
			<div class="sm:!flex sm:!h-auto"
				x-show="open"
				x-collapse
			>
				<nav class="flex flex-col text-lg lg:text-xl font-bold mt-6 space-y-4 pb-6 sm:pb-0 border-b border-dark/10 sm:border-0">
					<a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Employee HR documents</a>
					<a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline text-blue" tabindex="-1">
						<i class="fas fa-chevron-right fa-sm -ml-5 mr-2"></i>
						IT help and FAQ
					</a>
					<a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Useful resources</a>
					<a href="#" class="flex items-center pl-6 underline-offset-2 hover:text-blue focus:outline-none focus:ring-0 focus:underline">Wellbeing documents</a>
				</nav>
			</div>
		</div>
		<div class="flex-1 sm:border-l border-dark\20 sm:pl-6 lg:pl-10 space-y-16">
			<div class="prose">
				<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
				<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia</p>
			</div>
			<div class="grid sm:grid-cols-2 md:grid-cols-3 gap-10">
				{{> @card--document}}
				{{> @card--document}}
				{{> @card--document}}
				{{> @card--document}}
				{{> @card--document}}
			</div>
		</div>
	</div>
	
</div>
 
{
  "image": "https://picsum.photos/1000/500?random=1"
}

No notes defined.