Icon Card

Block

Feature card with coordinated icon styling and layout variants

Basic Usage

Lightning Fast

Optimized for speed and performance.

Secure by Default

Enterprise-grade security built in.

Easy to Deploy

Ship to production in minutes.

pnpm add @corew500/ui

import { IconCard } from "@corew500/ui/blocks/icon-card"

<IconCard>Content</IconCard>

CMSPayload CMS Integration

This component supports CMS-driven content via @corew500/cms-payload.

Lightning Fast

Our platform is optimized for speed and delivers exceptional performance at scale.

CMS FieldsEN

Title

Description

Layout

Icon

Icon Color

Icon Size

Icon Style

Hover Animation

Border Hover Effect

Enabled

Show Action Button

Shown

Action Label

This simulates how a content editor configures icon cards in Payload CMS. Switch locales to see localized content.

Prop	Type	Default	Description
`title*`	string	—	Card title (required)
`description`	string	—	Card description
`icon`	enum	—	Icon element
`iconIntent`	enum	`primary`	Icon intent color - coordinates icon background, hover border, and button accent.
`layout`	enum	`icon-top`	Layout variant. - `icon-top`: Icon above title (vertical layout) - `icon-left`: Icon beside title (horizontal layout)
`action`	IconCardAction	—	Primary action button
`iconHoverEffect`	enum	`translate`	Icon hover animation triggered on card hover. - `none`: No animation - `scale`: Scale up slightly - `translate`: Move up slightly
`borderHover`	enum	`true`	Show accent border on hover matching icon intent.
`iconSize`	enum	`lg`	Icon badge size.
`iconVariant`	enum	`soft`	Icon badge variant.