IconCard

Card component optimized for displaying icons with optional title and description.

Props

Prop	Type	Required	Default	Description
`card`	`CardData`	Yes	-	Card data object (same as DefaultCard)
`variant`	`'default' \| 'centered'`	No	`'default'`	Layout variant
`size`	`'default' \| 'small'`	No	`'default'`	Size variant (only applies to centered)
`priority`	`boolean`	No	`false`	Loads the icon image eagerly with `fetchPriority="high"` (for above-the-fold cards)
`cslp`	`CSLPFieldMapping`	No	-	CSLP mapping for editable fields

Variants

Default

Horizontal layout with icon and title side-by-side
Gradient background
Taxonomy tags (TechnologyTags with icons for kickstart)

Centered

Vertical centered layout
Square aspect ratio (or 100x100px for small)
Icon centered above title
No description

Usage

1import { IconCard } from '@/components/organisms/IconCard';
2
3// Default variant
4<IconCard 
5  card={{
6    image: { url: "/icon.svg", alt: "Icon" },
7    title: "Feature",
8    description: "Description",
9    url: "/feature"
10  }}
11/>
12
13// Centered variant
14<IconCard 
15  card={{
16    image: { url: "/icon.svg", alt: "Icon" },
17    title: "Feature",
18    url: "/feature"
19  }}
20  variant="centered"
21  size="small"
22/>

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

// Default variant
<IconCard 
  card={{
    image: { url: "/icon.svg", alt: "Icon" },
    title: "Feature",
    description: "Description",
    url: "/feature"
  }}
/>

// Centered variant
<IconCard 
  card={{
    image: { url: "/icon.svg", alt: "Icon" },
    title: "Feature",
    url: "/feature"
  }}
  variant="centered"
  size="small"
/>

Features

Icon-focused: Optimized for icon display
Two variants: Default (horizontal) and centered (vertical)
Size options: Small (100x100px) or default for centered variant
Gradient background: Default variant uses curated-product-card-gradient
Hover effects: Scale transform on hover
Priority loading: Supports priority prop for above-the-fold images (passed through to MediaItem/Next.js Image)

Size Details (Centered Variant)

Default: Aspect square, p-8, icon 64x64px, cs-h5 title
Small: 100x100px fixed, p-4, icon 40x40px, cs-h6 title

Notes

Centered variant: icon + title only, no taxonomies or date
Default variant: uses CardTaxonomies for taxonomy display
Uses MediaItem component for icons
Links to card URL using Next.js Link
Supports CSLP for live preview editing