Marketing component

Feature Icon Card

Present a compact feature or benefit with a styled icon, title, description, badge, and optional link.

14 props2 slots0 outputsTheme readyResponsive

Interactive playground

Configure Feature Icon Card

Change any prop and inspect the server-rendered component immediately.

Live preview

Feature Icon Card example

A polished default feature icon card for a modern application.

Feature Icon Card

Component code

<FeatureIconCard
  title="Feature Icon Card example"
  description="A polished default feature icon card for a modern application."
  href="#feature-icon-card-demo"
  actionLabel="Feature Icon Card"
  align="start">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureIconCard>

Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Recommended

Icon-led capability card

Use a compact card for one feature, benefit, or linked capability.

Live preview

Core

Secure by design

Build with consistent validation, accessibility, and theme support.

Review security

Component usage.wrn

<FeatureIconCard
  icon="icon-[lucide--shield-check]"
  title="Secure by design"
  description="Build with consistent validation, accessibility, and theme support."
  href="#security"
  actionLabel="Review security"
  badge="Core"
  align="start">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureIconCard>

Compact

Centered benefit card

Center the content for short benefit grids and campaign proof points.

Live preview

Fast rendering

Server-first output with focused client behavior.

Compact example

Component usage.wrn

<FeatureIconCard
  icon="icon-[lucide--gauge]"
  iconVariant="solid"
  title="Fast rendering"
  description="Server-first output with focused client behavior."
  href="#feature-icon-card-demo"
  actionLabel="Compact example"
  size="compact"
  color="info"
  variant="secondary"
  align="center">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureIconCard>

Advanced

Highlighted linked card

Use a stronger raised treatment for a featured capability.

Live preview

Composable workflows

Connect forms, services, data, and actions without duplicating UI.

Explore workflows

Component usage.wrn

<FeatureIconCard
  icon="icon-[lucide--workflow]"
  title="Composable workflows"
  description="Connect forms, services, data, and actions without duplicating UI."
  href="#workflows"
  actionLabel="Explore workflows"
  size="lg"
  color="success"
  variant="raised"
  align="end">
  <div data-slot="footer">
    <div class="showcase-slot">footer slot</div>
  </div>
</FeatureIconCard>

Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

Prop	Type	Default	Required
`icon`	string	`"icon-[lucide--sparkles]"`	No
`iconSize`	string	`"md"`	No
`iconVariant`	string	`"soft"`	No
`title`	string	`"Feature"`	No
`description`	string	`""`	No
`href`	string	`""`	No
`actionLabel`	string	`"Explore"`	No
`badge`	string	`""`	No
`size`	string	`"default"`	No
`color`	string	`"primary"`	No
`variant`	string	`"default"`	No
`align`	string	`"left"`	No
`hover`	string	`"lift"`	No
`class`	string	`""`	No