Skip to main content
Our new developer certification is live!

TechnologyList

Compact grid of Kickstart technology icons rendered inside the Hero via ComponentsRenderer.

Props

PropTypeRequiredDefaultDescription
titlestringNo-Section heading above the icon grid
title_tag'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p'No'h3'HTML tag for the title
title_variantstringNo'section-heading'Typography variant for the title
itemsKickstart[]No-Array of Kickstart references to display
columnsnumberNo-Number of columns in the grid. When omitted, uses flex-wrap layout
noPaddingbooleanNofalseLeft-align layout (used when nested in TwoColumn)
$CSLPFieldMappingNo-CSLP mapping for editable fields

Usage

import { TechnologyList } from '@/components/organisms/TechnologyList';

<TechnologyList
  title="Get started with our kickstarts"
  title_tag="h3"
  items={kickstarts}
  columns={4}
/>

Rendered by ComponentsRenderer when a Hero contains a technology_list modular block, or when a TwoColumn side_a or side_b contains it.

Features

  • Right-aligned layout: Title and cards align to the right to sit secondary to the Hero content
  • Gradient background: Each card uses curated-product-card-gradient (same as default IconCard)
  • Hover effects: Scale transform (1.02) on hover
  • 100x100px cards: Fixed-size squares with 40x40px icon and text label
  • Linked: Each card links to the Kickstart entry URL
  • CSLP support: Live preview editing for title and items

Rendering Flow

  1. CMS delivers Hero with components: [{ technology_list: { title, items } }] or TwoColumn with side_a/side_b containing { technology_list: { ... } }
  2. Hero or TwoColumn passes components to ComponentsRenderer
  3. componentMap maps "technology_list" to this component
  4. Props are spread and the grid renders

Layout variants

  • Hero: Right-aligned on large screens (lg:items-end, lg:justify-end)
  • TwoColumn: Left-aligned (noPadding), no right-alignment

Notes

  • Items without a url are skipped
  • Items without an icon still render with just the title text
  • Uses MediaItem for icons and Title atom for the section heading