Your Business Name
Skip to main content

IconCard - Your Most Versatile Card

The Swiss Army knife of cards. Icon, title, description, and optional link. Perfect for features, services, navigation grids, and more.

See ExamplesAll UI Components

What Is IconCard?

IconCard is your most frequently used card component. Display an icon (emoji or icon character), heading, description, and optional link. Perfect for feature grids, service listings, navigation menus, and benefit highlights.

The entire card becomes clickable when you provide an href, or it stays as informational content without a link. Pairs perfectly with CardGrid for responsive layouts.

Live Examples

Without Links (Informational)

Pure content display - perfect for feature highlights

Fast Loading

90+ PageSpeed scores out of the box

Beautiful Design

8 pre-built color themes included

Fully Responsive

Works perfectly on every device

Different Icon Styles

Use any emoji or icon character

Checkmark

Completion indicator

Rocket

Launch features

Lightbulb

Ideas and tips

Chart

Analytics data

How to Use IconCard

With Link (Clickable Card) 

---
import IconCard from '@theme/components/ui/IconCard.astro';
---

<IconCard
  icon="📚"
  title="Documentation"
  description="Complete guides and tutorials"
  href="/docs/"
  ctaText="Read docs"
/>

Without Link (Informational) 

<IconCard
  icon="⚡"
  title="Fast Loading"
  description="90+ PageSpeed scores"
/>

In a Grid Layout

import CardGrid from '@theme/components/ui/CardGrid.astro';
import IconCard from '@theme/components/ui/IconCard.astro';

<CardGrid columns={3}>
  <IconCard
    icon="🎯"
    title="Feature One"
    description="Description here"
    href="/feature-one/"
    ctaText="Learn more"
  />
  <IconCard
    icon="🚀"
    title="Feature Two"
    description="Description here"
    href="/feature-two/"
    ctaText="Learn more"
  />
  <IconCard
    icon="💡"
    title="Feature Three"
    description="Description here"
    href="/feature-three/"
    ctaText="Learn more"
  />
</CardGrid>

Props Reference

  • icon - Any emoji or icon character (required)
  • title - Card heading (required)
  • description - Card description (required)
  • href - Link URL (optional)
  • ctaText - Link text (optional, requires href)

IconCard Features

Icon Support

Any emoji or icon character

Optional Link

Make entire card clickable

Theme Aware

Adapts to color scheme

Responsive

Works on all devices

Ready to Use IconCard?

The most versatile card component for features, services, and navigation.

All UI Components Back to Components