Improve component card layout: Align badges to on the bottom and add some spacing

Author: sdvg

src/components/docs/ComponentList.tsx

@@ -39,24 +39,30 @@ const LazyLoadComponent: FC<
 		<div ref={ref} className="components-overview-item">
 			{isVisible && (
 				<Suspense fallback={<div className="skeleton"></div>}>
-					<Link tabIndex={0} to={`${path}/components/${formattedComponentName}`} />
+					<Link
+						className="components-overview-item__link"
+						tabIndex={0}
+						to={`${path}/components/${formattedComponentName}`}
+					/>
 					<KolCard
 						tabIndex={-1}
 						aria-label={formattedComponentName}
 						role="img"
 						_level={2}
 						_label={formattedComponentName}
 					>
-						<SampleComponent lang={lang} />
-						{badges && badges?.length > 0 && (
-							<div className="bottom-2 p-1">
-								<div className="flex flex-wrap gap-2">
-									{badges?.map((label) => (
-										<KolBadge key={label} _color="#dadde1" _label={label}></KolBadge>
-									))}
+						<div className="components-overview-item__card-content">
+							<SampleComponent lang={lang} />
+							{badges && badges?.length > 0 && (
+								<div className="mt-4 p-1">
+									<div className="flex flex-wrap gap-2">
+										{badges?.map((label) => (
+											<KolBadge key={label} _color="#dadde1" _label={label}></KolBadge>
+										))}
+									</div>
 								</div>
-							</div>
-						)}
+							)}
+						</div>
 					</KolCard>
 				</Suspense>
 			)}

src/css/custom.css

@@ -163,7 +163,14 @@ kol-link-button {
 	box-sizing: border-box;
 }
 
-.components-overview-item a {
+.components-overview-item__card-content {
+	display: flex;
+	flex-flow: column;
+	height: 100%;
+	justify-content: space-between;
+}
+
+.components-overview-item__link {
 	position: absolute;
 	width: 100%;
 	height: 100%;