CleenUI · Data Display · CardIcon

CardIcon

Card variant with a leading icon block — feature lists, capability grids, module overviews.

storybook.cleenui.com · data-display-cardicon--basic
Open in new window

About CardIcon

CardIcon places an icon block at the top of the card, paired with a title and short description. The icon block can be a solid brand color, a tinted background, or a custom-styled wrapper.

Useful anywhere a feature, capability, or module needs a visual identity. The Codebase page's category grid uses this pattern.

When to use it

  • Feature grids on marketing pages.
  • Module or capability lists in product overviews.
  • Category navigation cards on category pages.
  • Quick-action grids in dashboards.

Common props

Prop
Type
Description
icon
string
Icon name to render.
title
string
Card title.
description
string
Body text.
iconColor
string
Color token for the icon background.
as
ElementType
Render-as element.
Cross-references

Where this component shows up elsewhere in the foundation.

In modules

2
⚡ Already in an AI editor?

Set up CleenUI in your tool.

Skip the manual import — ask your AI agent to build with this component. The Builder skill knows its props, variants, and idioms.

Claude CodeCursorWindsurfGitHub CopilotClineAider+6All 12 guides
Other categories

More component families.

Live demo

See CleenUI running before you talk to us.

Configure a demo environment in about twenty seconds — theme, spacing, the modules you care about, sample data for your industry — then launch the full dashboard in your browser. Nothing to install, no signup.

  • 20 sec setup
  • 15 themes
  • 20 modules
  • 80 industries
Pick a theme to start with