← Back to Components

Icon Card

Versatile cards for empty states, onboarding, feature highlights, and user guidance

Basic IconCard

Simple Icon Card

Start a feedback request to see results here

Basic icon card with image and title

Icon Card with Description

Welcome to Gene Feedback

Get started by selecting a team member from the sidebar to begin the feedback process.

Icon card with both title and descriptive text

GeneIcon Integration

Using iconName prop

No tasks at this time

Check back later

Uses GeneIcon with preserveColors for original SVG styling

Different GeneIcons

Task Complete

All feedback collected successfully

Team Setup

Configure your team members

Dashboard

Your feedback overview

Multiple GeneIcon options available with consistent sizing

Content Variations

Short Content

No items yet

Detailed Content

Complete Your Profile Setup

To get the most out of Gene Feedback, please complete your profile information including your role, department, and direct reports. This will help us provide better feedback matching and insights.

Real-World Use Cases

Empty State (No Data)

No feedback history yet

Feedback requests will appear here once you start the process