Consistant Height

Author: PrashantUnity

assets/css/tailwind-input.css

@@ -689,6 +689,22 @@
     @apply mt-2 grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4 gap-4 md:gap-6;
   }
 
+  .tool-card {
+    @apply h-[140px] xl:h-[148px];
+  }
+
+  .tool-card__body {
+    @apply justify-between;
+  }
+
+  .tool-card__desc {
+    @apply m-0 mt-2 min-h-[2.0625rem] text-xs leading-snug text-slate-500 line-clamp-2 xl:min-h-[2.25rem] xl:text-[13px];
+  }
+
+  .tool-card__meta {
+    @apply mt-2 h-5 shrink-0;
+  }
+
   /* About us (/about-us/) */
   .about-hero__panel {
     @apply relative overflow-hidden rounded-2xl border border-gray-200/80 bg-gradient-to-br from-white via-slate-50/90 to-sky-50/50 shadow-sm sm:rounded-3xl;

layouts/partials/home/tool-card.html

@@ -15,13 +15,13 @@
 {{- $linkClass := "tool-card__link text-inherit no-underline hover:text-brand after:absolute after:inset-0 after:rounded-2xl after:z-10 after:content-['']" -}}
 
 <article
-  class="relative bg-white border border-gray-100 p-3.5 rounded-2xl flex items-center gap-3 hover:-translate-y-1 hover:shadow-md transition-all group"
+  class="tool-card relative bg-white border border-gray-100 p-3.5 rounded-2xl flex items-center gap-3 hover:-translate-y-1 hover:shadow-md transition-all group"
   data-cfd-tool="{{ $item.name }}"
   data-cfd-category="{{ $categoryName }}"
   data-cfd-source="{{ $source }}"
   data-cfd-external="{{ $isExternal }}">
-  <div class="flex-1 flex flex-col justify-between pt-1 min-w-0">
-    <div class="flex justify-between items-start gap-1">
+  <div class="tool-card__body flex-1 flex flex-col min-w-0 min-h-0 self-stretch">
+    <div class="shrink-0">
         {{- if eq $headingLevel 2 -}}
         <h2 class="{{ $titleClass }}">
           <a href="{{ $item.url }}" class="{{ $linkClass }}"{{ if $isExternal }} target="_blank" rel="noopener noreferrer"{{ end }}>
@@ -41,13 +41,13 @@ <h3 class="{{ $titleClass }}">
           </a>
         </h3>
         {{- end -}}
-      </div>
-    <p class="text-xs xl:text-[13px] text-slate-500 leading-snug mt-2 line-clamp-3 m-0">{{ $desc }}</p>
-    {{- with $item.date -}}
-    <div class="mt-4">
+    </div>
+    <p class="tool-card__desc">{{ $desc }}</p>
+    <div class="tool-card__meta">
+      {{- with $item.date -}}
       <span class="inline-block bg-gray-50 px-2 py-0.5 rounded-md text-[10px] xl:text-[11px] font-medium text-slate-500 border border-gray-100">{{ . | time.Format "02 Jan 2006" }}</span>
+      {{- end -}}
     </div>
-    {{- end -}}
   </div>
   <div class="w-20 h-20 xl:w-[104px] xl:h-[104px] bg-gray-50/80 rounded-xl shrink-0 flex items-center justify-center p-2 border border-gray-50 group-hover:border-gray-100 transition-colors relative z-0">
     <img src="/images/{{ $iconDir }}/{{ $item.icon }}.svg" alt="" class="w-full h-full object-contain opacity-80 group-hover:opacity-100 transition-opacity" loading="lazy" width="80" height="80">