Icon tiles option to always show CTA

src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css

@@ -27,9 +27,9 @@
 			background-color: var(--tile-bg-color);
 			display: grid;
 			grid-template-rows: subgrid;
-			grid-row: span 2;
+			grid-row: span 4;
 			flex-flow: column;
-			gap: 16px;
+			--gap: 16px;
 			min-height: 320px;
 			max-width: 400px;
 			text-decoration: none; /* in case it's an a href */
@@ -39,13 +39,8 @@
 				color: var(--tile-fg-color);
 			}
 
-			&:has(.icon),
-			&:has(.icon-tiles__tile__cta) {
-				grid-row: span 3;
-			}
-
-			&:has(.icon):has(.icon-tiles__tile__cta) {
-				grid-row: span 4;
+			& > * + * {
+				margin-top: var(--gap);
 			}
 
 			svg {
@@ -80,7 +75,10 @@
 
 			&:hover {
 				transform: scale(1.05);
+			}
 
+			&:hover,
+			&.icon-tiles-grid__tile--force-cta {
 				.icon-tiles__tile__cta {
 					text-align: right;
 					opacity: 1;

src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx

@@ -23,6 +23,7 @@ const component_arguments = {
 			description: new Args.ShortText(),
 			url: new Args.ShortText().setExampleValues([""]),
 			cta: new Args.ShortText().setExampleValues([""]),
+			always_show_cta: new Args.Boolean().setDefaultValue(false),
 		})
 	),
 } as const;
@@ -42,6 +43,7 @@ export class IconTilesGrid extends Component<typeof component_arguments> {
 				class={[
 					"icon-tiles-grid",
 					{ "icon-tiles-grid--bleed": bleed },
+
 					...classes,
 				]}
 			>
@@ -50,7 +52,13 @@ export class IconTilesGrid extends Component<typeof component_arguments> {
 				<section class="icon-tiles-grid__grid">
 					{tiles.map((tile) => (
 						<a
-							class="icon-tiles-grid__tile"
+							class={[
+								"icon-tiles-grid__tile",
+								{
+									"icon-tiles-grid__tile--force-cta":
+										tile.always_show_cta,
+								},
+							]}
 							style={`--tile-bg-color: var(${tile.color}); --tile-fg-color: var(${getFgColorVariable(tile.color, 4.2)})`}
 							href={tile.url ? tile.url : false}
 						>