Card Component Playground
GenericCard Component - Comprehensive Examples
Default Variant - Basic Cards
Simple cards with title and description, perfect for glossary terms and content listings.
AI Overview
AI-generated summaries that appear at the top of Google search results, providing comprehensive answers by synthesizing information from multiple sources.
SEO
Search Engine Optimization - the practice of optimizing websites to rank higher in search engine results.
GEO
Generative Engine Optimization - optimizing content for AI-powered search engines and assistants.
Default Variant - With Icons
Cards with icons and action buttons, ideal for tools and feature highlights.
AI Brand Visibility Report
Discover how well AI assistants like ChatGPT, Claude, and Perplexity know your brand. Get detailed visibility scores, sentiment analysis, and competitive insights across multiple AI models.
AI SEO Audit
Instantly analyze your website's optimization for ChatGPT, Claude, Perplexity, and Gemini. Our free AI SEO audit checks if your site appears correctly when users ask ChatGPT or Claude about your industry.
Website LLMs.txt Generator
Create an optimized LLMs.txt file that helps ChatGPT, Claude, Perplexity, and Gemini understand your business. This file ensures AI models accurately recommend your products when users ask questions.
Default Variant - Custom Icon Colors
Examples with different icon background and color combinations.
Analytics Dashboard
Track your performance metrics with real-time analytics and comprehensive reporting tools.
Security Features
Enterprise-grade security with encryption, access controls, and compliance certifications.
Global Infrastructure
Deploy anywhere with our worldwide network of data centers and edge locations.
Default Variant - With Action Text
Cards with action buttons. The arrow is automatically included with the action text.
Average Sources Per Response
Explore our public GEO & AI SEO dataset. See how many sources AI assistants cite per response across models like ChatGPT, Claude, Perplexity, and Gemini. We publish anonymized, aggregated insights for the community.
Top ChatGPT Sources
Live analytics showing which domains ChatGPT cites most frequently. Track citation trends for Reddit, Wikipedia, Forbes, and 20+ major websites across social, news, review, and reference categories.
Top Google AI Overviews Sources
Explore our public GEO & AI SEO dataset. See how many sources Google AI Overviews cite per response across models like ChatGPT, Claude, Perplexity, and Gemini. We publish anonymized, aggregated insights for the community.
Default Variant - With Children Content
Cards with custom content in the children slot, allowing for flexible layouts.
Compact Variant - Basic
Smaller, more condensed cards perfect for dense layouts and sidebars.
AI Overview
AI-generated summaries that appear at the top of Google search results, providing comprehensive answers by synthesizing information from multiple sources.
SEO
Search Engine Optimization - the practice of optimizing websites to rank higher in search engine results.
GEO
Generative Engine Optimization - optimizing content for AI-powered search engines and assistants.
Compact Variant - With Action Text
Compact cards with action buttons for quick navigation.
Compact Variant - Basic Navigation
Compact cards without action text, perfect for simple navigation links.
Clickable Cards (onClick Handler)
Cards that use onClick handlers instead of href links, useful for modals and interactive elements.
Interactive Card
This card uses an onClick handler instead of a link. Perfect for modals, dropdowns, or custom interactions.
Compact Interactive
Compact variant with onClick handler for space-efficient interactive elements.
Action Card
Card with action text and onClick handler for custom button behavior.
Long Content Examples
Testing how cards handle longer descriptions and content.
Comprehensive AI SEO Guide
This is a much longer description that tests how the card component handles extended text content. The description should be truncated appropriately using line-clamp utilities to maintain consistent card heights and visual balance across the grid layout. This ensures that even with varying content lengths, the cards remain visually aligned and professional.
Advanced Configuration Options
This compact card variant also handles longer descriptions gracefully. The text will be truncated to maintain the compact design while still providing enough context for users to understand what the card is about. The line-clamp utility ensures consistent heights.
Shadcn Card Component - Basic Examples
Basic Card Structure
Standard shadcn Card component with CardHeader, CardTitle, CardDescription, CardContent, and CardFooter.
View comprehensive metrics including page views, user engagement, conversion rates, and more. All data is updated in real-time.
• Email notifications
• Privacy settings
• Security options
Card with Icons and Custom Content
Cards with icons, badges, and custom layouts using the shadcn Card component.
