chore(SLB-455): add subgrid to card layout

AmazeeLabs · Oct 16, 2024 · 5db01b3 · 5db01b3
1 parent 3f8993e
commit 5db01b3
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 9 deletions.
diff --git a/packages/ui/src/components/Organisms/Card.tsx b/packages/ui/src/components/Organisms/Card.tsx
@@ -16,9 +16,9 @@ export const CardItem = ({
   return (
     <article
       aria-labelledby={formattedID}
-      className="focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 relative max-w-sm bg-white rounded-lg hover:shadow overflow-hidden flex flex-col-reverse"
+      className="focus-within:outline focus-within:outline-2 focus-within:outline-offset-2 focus-within:outline-indigo-600 relative max-w-sm bg-white rounded-lg hover:shadow grid grid-rows-[auto_1fr] gap-4 p-4"
     >
-      <div className="p-5">
+      <div className="p-5 grid grid-rows-[auto_1fr_auto] gap-4">
         <h5
           id={formattedID}
           className="mb-2 text-2xl font-bold tracking-tight text-gray-900"
@@ -28,7 +28,7 @@ export const CardItem = ({
         {hero?.headline ? <div>{hero?.headline}</div> : null}
         <Link
           href={path}
-          className="inline-flex items-center px-3 py-2 text-sm font-medium text-center text-blue-700 border border-blue-700 rounded-lg hover:bg-blue-800 hover:text-white focus:outline-offset-4 after:content-[''] after:absolute after:inset-0"
+          className="row-start-3 justify-self-start inline-flex items-center px-3 py-2 text-sm font-medium text-center text-blue-700 border border-blue-700 rounded-lg hover:bg-blue-800 hover:text-white focus:outline-offset-4 after:content-[''] after:absolute after:inset-0"
         >
           <span className="sr-only w-0 h-0 overflow-hidden">{title}</span>
           {readMoreText ||
@@ -53,7 +53,7 @@ export const CardItem = ({
           </svg>
         </Link>
       </div>
-      <div className="rounded-t-lg">
+      <div className="rounded-t-lg row-start-1">
         {teaserImage ? (
           <Image {...teaserImage} className="w-full" />
         ) : (

diff --git a/packages/ui/src/components/Organisms/ContentHub.tsx b/packages/ui/src/components/Organisms/ContentHub.tsx
@@ -50,10 +50,10 @@ export function ContentHub({ pageSize = 10 }: { pageSize: number }) {
         ) : null}
         {data?.contentHub.total ? (
           <>
-            <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+            <ul className="my-8 grid gap-4 lg:gap-8 md:grid-cols-2 lg:grid-cols-3 auto-rows-fr grid-rows-subgrid">
               {data?.contentHub.items.filter(isTruthy).map((item) => {
                 return (
-                  <li key={item.path}>
+                  <li key={item.path} className="grid grid-rows-subgrid">
                     <CardItem {...item} />
                   </li>
                 );

diff --git a/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx b/packages/ui/src/components/Organisms/PageContent/BlockTeaserList.tsx
@@ -29,11 +29,11 @@ export function BlockTeaserList(props: BlockTeaserListFragment) {
   return (
     <div className="bg-white py-12 px-6 lg:px-8">
       <div className="mx-auto max-w-6xl">
-        <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8">
+        <ul className="my-8 grid md:grid-cols-2 lg:grid-cols-3 gap-4 lg:gap-8 grid-cols-subgrid">
           {props.staticContent?.map((teaserItem) => {
             staticIds.push(getUUIDFromId(teaserItem?.content?.id || ''));
             return teaserItem?.content ? (
-              <li key={teaserItem?.content?.id}>
+              <li key={teaserItem?.content?.id} className="grid grid-rows-subgrid">
                 <CardItem
                   readMoreText={props.buttonText}
                   {...teaserItem?.content}
@@ -76,7 +76,7 @@ export function DynamicTeaserList(
       <>
         {data.teaserList.items.map((teaserItem) => {
           return teaserItem ? (
-            <li key={teaserItem.id}>
+            <li key={teaserItem.id} className="grid grid-rows-subgrid">
               <CardItem readMoreText={props.buttonText} {...teaserItem} />
             </li>
           ) : null;