Topics Grid

A grid of compact topic cards on a coloured or gradient background — for listing themes, services or focus areas at a glance. Hovering lifts each card slightly.

Live example

Strategy

Research

Branding

Design

Launch

Measurement

<div class="topics-grid-container gradient-himmel-kornblume">
<div class="topics-grid topics-grid-cols-3">
<div class="topics-grid-card"><div class="topics-grid-card-inner dck-surface dck-hover-lift"><h3 class="topics-grid-title">Strategy</h3></div></div>
<div class="topics-grid-card"><div class="topics-grid-card-inner dck-surface dck-hover-lift"><h3 class="topics-grid-title">Research</h3></div></div>
<div class="topics-grid-card"><div class="topics-grid-card-inner dck-surface dck-hover-lift"><h3 class="topics-grid-title">Branding</h3></div></div>
<div class="topics-grid-card"><div class="topics-grid-card-inner dck-surface dck-hover-lift"><h3 class="topics-grid-title">Design</h3></div></div>
<div class="topics-grid-card"><div class="topics-grid-card-inner dck-surface dck-hover-lift"><h3 class="topics-grid-title">Launch</h3></div></div>
<div class="topics-grid-card"><div class="topics-grid-card-inner dck-surface dck-hover-lift"><h3 class="topics-grid-title">Measurement</h3></div></div>
</div>
</div>

Option	Effect
(no extra class)	Container uses the default surface background
Any `gradient-…` class	Gradient background for the container — all 19 gradients on the Gradients page work, e.g. `gradient-himmel-kornblume`
`topics-grid-overlay-white`	Adds a transparent white overlay on top of the gradient
`topics-grid-cols-3`	Fixes the grid to 3 columns (otherwise columns adapt to the item count)