diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css index 206ea08..dead306 100644 --- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.css +++ b/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; diff --git a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx b/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx index c932a0c..07034cd 100644 --- a/src/back/jdd-components/icon-tiles-grid/icon-tiles-grid.jdd.tsx +++ b/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 { class={[ "icon-tiles-grid", { "icon-tiles-grid--bleed": bleed }, + ...classes, ]} > @@ -50,7 +52,13 @@ export class IconTilesGrid extends Component {
{tiles.map((tile) => (