Blog sections
2-grids list
Open this two grids list blog sections example in new window
Copy two grids list blog sections code
Close two grids list blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid lg:grid-cols-2 lg:gap-y-16 gap-10">
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-1.jpg" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-primary-600 ">
Lorem ipsum dolor sit amet
</h3>
<p class="mt-3 text-gray-600 ">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-hs2-cyan decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-2.jpg" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-primary-600 ">
Lorem ipsum dolor sit amet
</h3>
<p class="mt-3 text-gray-600 ">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-hs2-cyan decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-3.jpg" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-primary-600 ">
Lorem ipsum dolor sit amet
</h3>
<p class="mt-3 text-gray-600 ">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-hs2-cyan decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="sm:flex">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full sm:w-56 h-44">
<img class="group-hover:scale-105 transition-transform duration-500 ease-in-out w-full h-full absolute top-0 left-0 object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-4.jpg" alt="Image Description">
</div>
<div class="grow mt-4 sm:mt-0 sm:ml-6 px-4 sm:px-0">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-primary-600 ">
Lorem ipsum dolor sit amet
</h3>
<p class="mt-3 text-gray-600 ">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="mt-4 inline-flex items-center gap-x-1.5 text-hs2-cyan decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</p>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->3-grids with an overlay card
Open this three grids with overlay card blog sections example in new window
Copy three grids with overlay card blog sections code
Close three grids with overlay card blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight ">Insights</h2>
<p class="mt-1 text-hs2-primary-600 ">Stay in the know with insights from industry experts.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="relative pt-[50%] sm:pt-[70%] rounded-xl overflow-hidden">
<img class="w-full h-full absolute top-0 left-0 object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="/assets/images/app-toolkit/placeholder-1.jpg" alt="Image Description">
<span class="absolute top-0 right-0 rounded-tr-xl rounded-bl-xl text-xs font-medium bg-hs2-primary-500 text-white py-1.5 px-3 ">
Featured
</span>
</div>
<div class="mt-7">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-primary-600 ">
Lorem ipsum dolor sit amet
</h3>
<p class="mt-3 text-gray-800 ">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="mt-5 inline-flex items-center gap-x-1.5 text-hs2-cyan decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group rounded-xl overflow-hidden" href="#">
<div class="relative pt-[50%] sm:pt-[70%] rounded-xl overflow-hidden">
<img class="w-full h-full absolute top-0 left-0 object-cover group-hover:scale-105 transition-transform duration-500 ease-in-out rounded-xl" src="/assets/images/app-toolkit/placeholder-2.jpg" alt="Image Description">
</div>
<div class="mt-7">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-primary-600 ">
Lorem ipsum dolor sit amet
</h3>
<p class="mt-3 text-gray-800 ">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</p>
<p class="mt-5 inline-flex items-center gap-x-1.5 text-hs2-cyan decoration-2 group-hover:underline font-medium">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</p>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group relative flex flex-col w-full min-h-[15rem] bg-center bg-cover rounded-xl hover:shadow-lg transition bg-[url('/assets/images/app-toolkit/placeholder-blue.jpg')]" href="#">
<div class="flex-auto p-4 md:p-6">
<h3 class="text-xl text-white/[.9] group-hover:text-white"><span class="font-bold">Lorem ipsum</span> dolor sit amet. Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</h3>
</div>
<div class="pt-0 p-4 md:p-6">
<div class="inline-flex items-center gap-2 text-sm font-medium text-white group-hover:text-white/[.7]">
Visit the site
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->Hero style
Open this hero style blog sections example in new window
Copy hero style blog sections code
Close hero style blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid sm:grid-cols-2 sm:items-center gap-8">
<div class="sm:order-2">
<div class="relative pt-[50%] sm:pt-[100%] rounded-lg">
<img class="w-full h-full absolute top-0 left-0 object-cover rounded-lg" src="/assets/images/app-toolkit/placeholder-1.jpg" alt="Image Description">
</div>
</div>
<!-- End Col -->
<div class="sm:order-1">
<p class="mb-5 inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-gray-100 text-gray-800 ">
Lorum ipsum
</p>
<h2 class="text-2xl font-bold md:text-3xl lg:text-4xl lg:leading-tight xl:text-5xl xl:leading-tight text-hs2-primary-500 ">
<a class="hover:text-hs2-cyan " href="#">
Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
</a>
</h2>
<!-- Avatar -->
<div class="mt-6 sm:mt-10 flex items-center">
<div class="flex-shrink-0">
<img class="h-10 w-10 sm:h-14 sm:w-14 rounded-full" src="/assets/images/app-toolkit/avatar-3.jpg" alt="Image Description">
</div>
<div class="ml-3 sm:ml-4">
<p class="sm:mb-1 font-semibold text-gray-800 ">
Louise Donadieu
</p>
<p class="text-xs text-gray-500">
Strategic Marketing Consultant
</p>
</div>
</div>
<!-- End Avatar -->
<div class="mt-5">
<a class="inline-flex items-center gap-x-1.5 text-blue-600 decoration-2 hover:underline font-medium" href="#">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</a>
</div>
</div>
<!-- End Col -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->Image overlay
Open this image overlay blog sections example in new window
Copy image overlay blog sections code
Close image overlay blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid lg:grid-cols-2 gap-6">
<!-- Card -->
<a class="group relative block" href="#">
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="/assets/images/app-toolkit/placeholder-5.jpg" alt="Image Description">
</div>
<div class="absolute top-0 inset-x-0 z-10">
<div class="p-4 flex flex-col h-full sm:p-6">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] border-2 border-white rounded-full" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-white">
Gloria
</h4>
<p class="text-xs text-white/[.8]">
Jan 09, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<div class="absolute bottom-0 inset-x-0 z-10">
<div class="flex flex-col h-full p-4 sm:p-6">
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
Consectetur adipiscing elit, sed do eiusmod tempor
</h3>
<p class="mt-2 text-white/[.8]">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group relative block" href="#">
<div class="flex-shrink-0 relative w-full rounded-xl overflow-hidden w-full h-[350px] before:absolute before:inset-x-0 before:w-full before:h-full before:bg-gradient-to-t before:from-gray-900/[.7] before:z-[1]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="/assets/images/app-toolkit/placeholder-6.jpg" alt="Image Description">
</div>
<div class="absolute top-0 inset-x-0 z-10">
<div class="p-4 flex flex-col h-full sm:p-6">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] border-2 border-white rounded-full" src="/assets/images/app-toolkit/avatar-4.jpg" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-white">
Gloria
</h4>
<p class="text-xs text-white/[.8]">
May 30, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
<div class="absolute bottom-0 inset-x-0 z-10">
<div class="flex flex-col h-full p-4 sm:p-6">
<h3 class="text-lg sm:text-3xl font-semibold text-white group-hover:text-white/[.8]">
Consectetur adipiscing elit, sed do eiusmod tempor
</h3>
<p class="mt-2 text-white/[.8]">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->Image card with subtitle and title
Open this image card subtitle title blog sections example in new window
Copy image card subtitle title blog sections code
Close image card subtitle title blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl text-center mx-auto mb-10 lg:mb-14">
<h2 class="text-2xl font-bold md:text-4xl md:leading-tight ">Read our latest news</h2>
<p class="mt-1 text-gray-600 ">We've helped some great companies brand, design and get to market.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6 mb-10 lg:mb-14">
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition " href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="/assets/images/app-toolkit/placeholder-1.jpg" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-hs2-secondary ">
Product
</p>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
Better is when everything works together
</h3>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition " href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="/assets/images/app-toolkit/placeholder-2.jpg" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-hs2-secondary ">
Business
</p>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
What CFR really is about
</h3>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition " href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="/assets/images/app-toolkit/placeholder-3.jpg" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-hs2-secondary ">
Business
</p>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
Should Product Owners think like entrepreneurs?
</h3>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col bg-white border shadow-sm rounded-xl hover:shadow-md transition " href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-t-xl" src="/assets/images/app-toolkit/placeholder-4.jpg" alt="Image Description">
</div>
<div class="p-4 md:p-5">
<p class="mt-2 text-xs uppercase text-hs2-secondary ">
Facilitate
</p>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
Announcing Front Strategies: Ready-to-use rules
</h3>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
<!-- Card -->
<div class="text-center">
<div class="inline-block bg-white border shadow-sm rounded-full ">
<div class="py-3 px-4 flex items-center gap-x-2">
<p class="text-gray-600 ">
Want to read more?
</p>
<a class="inline-flex items-center gap-x-1.5 text-hs2-cyan decoration-2 hover:underline font-medium" href="../docs/index.html">
Go here
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</a>
</div>
</div>
</div>
<!-- End Card -->
</div>
<!-- End Card Blog -->Horizontal style
Open this horizontal style blog sections example in new window
Copy horizontal style blog sections code
Close horizontal style blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Grid -->
<div class="grid lg:grid-cols-2 gap-6">
<!-- Card -->
<a class="group sm:flex" href="#">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="/assets/images/app-toolkit/placeholder-1.jpg" alt="Image Description">
</div>
<div class="grow">
<div class="p-4 flex flex-col h-full sm:p-6">
<div class="mb-3">
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-gray-100 text-hs2-secondary ">
Business
</p>
</div>
<h3 class="text-lg sm:text-2xl font-semibold text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h3>
<p class="mt-2 text-gray-600 ">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="mt-5 sm:mt-auto">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] rounded-full" src="/assets/images/app-toolkit/avatar-5.jpg" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-hs2-primary-500 ">
Aaron Larsson
</h4>
<p class="text-xs text-gray-500">
Feb 15, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group sm:flex" href="#">
<div class="flex-shrink-0 relative rounded-xl overflow-hidden w-full h-[200px] sm:w-[250px] sm:h-[350px]">
<img class="w-full h-full absolute top-0 left-0 object-cover" src="/assets/images/app-toolkit/placeholder-5.jpg" alt="Image Description">
</div>
<div class="grow">
<div class="p-4 flex flex-col h-full sm:p-6">
<div class="mb-3">
<p class="inline-flex items-center gap-1.5 py-1.5 px-3 rounded-md text-xs font-medium bg-gray-100 text-hs2-secondary ">
Announcements
</p>
</div>
<h3 class="text-lg sm:text-2xl font-semibold text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h3>
<p class="mt-2 text-gray-600 ">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<div class="mt-5 sm:mt-auto">
<!-- Avatar -->
<div class="flex items-center">
<div class="flex-shrink-0">
<img class="h-[2.875rem] w-[2.875rem] rounded-full" src="/assets/images/app-toolkit/avatar-6.jpg" alt="Image Description">
</div>
<div class="ml-2.5 sm:ml-4">
<h4 class="font-semibold text-hs2-primary-500 ">
Hanna Wolfe
</h4>
<p class="text-xs text-gray-500">
Feb 4, 2021
</p>
</div>
</div>
<!-- End Avatar -->
</div>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->Card with background gray on hover
Open this card bg gray on hover blog sections example in new window
Copy card bg gray on hover blog sections code
Close card bg gray on hover blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl text-hs2-primary-500 font-bold md:text-4xl md:leading-tight ">Latest news</h2>
<p class="mt-1 text-gray-600 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<a class="group hover:bg-gray-100 rounded-xl p-5 transition-all " href="#">
<div class="aspect-w-16 aspect-h-10">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-6.jpg" alt="Image Description">
</div>
<h3 class="mt-5 text-xl text-hs2-primary-500 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<p class="mt-3 inline-flex items-center gap-x-2 text-sm font-semibold text-hs2-primary-500 ">
Learn more
<svg class="w-2.5 h-2.5 transition ease-in-out group-hover:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor" />
</svg>
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group hover:bg-gray-100 rounded-xl p-5 transition-all " href="#">
<div class="aspect-w-16 aspect-h-10">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-7.jpg" alt="Image Description">
</div>
<h3 class="mt-5 text-xl text-hs2-primary-500 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<p class="mt-3 inline-flex items-center gap-x-2 text-sm font-semibold text-hs2-primary-500 ">
Learn more
<svg class="w-2.5 h-2.5 transition ease-in-out group-hover:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor" />
</svg>
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group hover:bg-gray-100 rounded-xl p-5 transition-all " href="#">
<div class="aspect-w-16 aspect-h-10">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-8.jpg" alt="Image Description">
</div>
<h3 class="mt-5 text-xl text-hs2-primary-500 ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<p class="mt-3 inline-flex items-center gap-x-2 text-sm font-semibold text-hs2-primary-500 ">
Learn more
<svg class="w-2.5 h-2.5 transition ease-in-out group-hover:translate-x-1" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.975821 6.92249C0.43689 6.92249 -3.50468e-07 7.34222 -3.27835e-07 7.85999C-3.05203e-07 8.37775 0.43689 8.79749 0.975821 8.79749L12.7694 8.79748L7.60447 13.7596C7.22339 14.1257 7.22339 14.7193 7.60447 15.0854C7.98555 15.4515 8.60341 15.4515 8.98449 15.0854L15.6427 8.68862C16.1191 8.23098 16.1191 7.48899 15.6427 7.03134L8.98449 0.634573C8.60341 0.268455 7.98555 0.268456 7.60447 0.634573C7.22339 1.00069 7.22339 1.59428 7.60447 1.9604L12.7694 6.92248L0.975821 6.92249Z" fill="currentColor" />
</svg>
</p>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->Brand colour on hover
Open this brand colour on hover blog sections example in new window
Copy brand colour on hover blog sections code
Close brand colour on hover blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mb-10">
<h2 class="text-2xl text-hs2-primary-500 font-bold md:text-4xl md:leading-tight ">Latest news</h2>
<p class="mt-1 text-gray-600 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-4 gap-6">
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-7.jpg" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<p class="mt-2 text-sm text-gray-600 ">
September 12, 2022
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-8.jpg" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<p class="mt-2 text-sm text-gray-600 ">
September 12, 2022
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-9.jpg" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<p class="mt-2 text-sm text-gray-600 ">
September 12, 2022
</p>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group block" href="#">
<div class="aspect-w-16 aspect-h-9">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-10.jpg" alt="Image Description">
</div>
<h3 class="mt-2 text-lg font-medium text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</h3>
<p class="mt-2 text-sm text-gray-600 ">
September 12, 2022
</p>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
</div>
<!-- End Card Blog -->Bordered cards with authors
Open this bordered cards with authors blog sections example in new window
Copy bordered cards with authors blog sections code
Close bordered cards with authors blog sections code
<!-- Card Blog -->
<div class="max-w-[85rem] px-4 py-10 sm:px-6 lg:px-8 lg:py-14 mx-auto">
<!-- Title -->
<div class="max-w-2xl mx-auto text-center mb-10 lg:mb-14">
<h2 class="text-2xl text-hs2-primary-500 group-hover:text-hs2-cyan font-bold md:text-4xl md:leading-tight ">Latest news</h2>
<p class="mt-1 text-gray-600 ">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<!-- End Title -->
<!-- Grid -->
<div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-6">
<!-- Card -->
<a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " href="#">
<div class="aspect-w-16 aspect-h-11">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-8.jpg" alt="Image Description">
</div>
<div class="my-6">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h3>
<p class="mt-5 text-gray-600 ">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="mt-auto flex items-center gap-x-3">
<img class="w-8 h-8 rounded-full" src="/assets/images/app-toolkit/avatar-7.jpg" alt="Image Description">
<div>
<h5 class="text-sm text-hs2-primary-500 group-hover:text-hs2-cyan ">By Lauren Waller</h5>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " href="#">
<div class="aspect-w-16 aspect-h-11">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-9.jpg" alt="Image Description">
</div>
<div class="my-6">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h3>
<p class="mt-5 text-gray-600 ">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="mt-auto flex items-center gap-x-3">
<img class="w-8 h-8 rounded-full" src="/assets/images/app-toolkit/avatar-7.jpg" alt="Image Description">
<div>
<h5 class="text-sm text-hs2-primary-500 group-hover:text-hs2-cyan ">By Lauren Waller</h5>
</div>
</div>
</a>
<!-- End Card -->
<!-- Card -->
<a class="group flex flex-col h-full border border-gray-200 hover:border-transparent hover:shadow-lg transition-all duration-300 rounded-xl p-5 " href="#">
<div class="aspect-w-16 aspect-h-11">
<img class="w-full object-cover rounded-xl" src="/assets/images/app-toolkit/placeholder-11.jpg" alt="Image Description">
</div>
<div class="my-6">
<h3 class="text-xl font-semibold text-hs2-primary-500 group-hover:text-hs2-cyan ">
Lorem ipsum dolor sit amet, consectetur adipiscing elit
</h3>
<p class="mt-5 text-gray-600 ">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
</div>
<div class="mt-auto flex items-center gap-x-3">
<img class="w-8 h-8 rounded-full" src="/assets/images/app-toolkit/avatar-7.jpg" alt="Image Description">
<div>
<h5 class="text-sm text-hs2-primary-500 group-hover:text-hs2-cyan ">By Lauren Waller</h5>
</div>
</div>
</a>
<!-- End Card -->
</div>
<!-- End Grid -->
<!-- Card -->
<div class="mt-12 text-center">
<a class="inline-flex justify-center items-center gap-x-2 text-center bg-white border border-hs2-secondary hover:border-hs2-secondary-hover text-sm text-hs2-secondary hover:text-hs2-secondary-hover font-medium hover:shadow-sm rounded-full focus:outline-none focus:ring-2 focus:ring-hs2-secondary focus:ring-offset-2 focus:ring-offset-white transition py-3 px-4 " href="#">
Read more
<svg class="w-2.5 h-2.5" width="16" height="16" viewBox="0 0 16 16" fill="none">
<path d="M5.27921 2L10.9257 7.64645C11.1209 7.84171 11.1209 8.15829 10.9257 8.35355L5.27921 14" stroke="currentColor" stroke-width="2" stroke-linecap="round" />
</svg>
</a>
</div>
<!-- End Card -->
</div>
<!-- End Card Blog -->