Home/Docs/Cards

Card Guide

Beautiful SVG cards for showcasing repositories, users, and language breakdowns. 100+ themes with full customization options.

Card Types

Repository Card

/api/card/repo?repo=owner/repo

Comprehensive repository overview with health score, stats, and insights

Features

  • ✓Health score with grade
  • ✓Stars, forks, issues
  • ✓Top insights
  • ✓Activity indicators

Best For

Main project showcase, README headers

User Profile Card

/api/card/user?username=user

Developer statistics and contribution overview

Features

  • ✓Repository count
  • ✓Contribution stats
  • ✓Language breakdown
  • ✓Activity metrics

Best For

Personal profiles, portfolio sites, GitHub READMEs

Language Breakdown Card

/api/card/languages?repo=owner/repo

Programming language usage visualization

Features

  • ✓Language percentages
  • ✓Color-coded bars
  • ✓Sorted by usage
  • ✓Clean visualization

Best For

Tech stack showcase, project language overview

Theme Categories (100+ Themes)

Dark Themes

40+

Rich, deep backgrounds perfect for dark websites and professional portfolios

Examples:carbon, midnight, obsidian, slate, gunmetal
Best for:Dark websites, professional portfolios, tech-focused projects

Light Themes

30+

Clean, bright designs that work well on light backgrounds

Examples:default, clean, paper, github-light, solarized-light
Best for:Light websites, documentation, corporate environments

Gradient Themes

25+

Beautiful color transitions and modern visual effects

Examples:ocean, sunset, forest, aurora, cosmic
Best for:Creative projects, personal branding, modern web design

Minimal Themes

15+

Subtle colors and clean aesthetics for understated elegance

Examples:monochrome, pure-black, elegant-black
Best for:Minimalist designs, sophisticated projects, clean aesthetics

Visual Examples

repo Card

repo card with carbon theme
theme=carbon

user Card

user card with ocean theme
theme=ocean

languages Card

languages card with minimal theme
theme=minimal

Parameters

ParameterRequiredDescriptionExampleApplies To
repoYesGitHub repository in owner/name formatvercel/next.jsrepo, languages
usernameYesGitHub usernameoctocatuser
themeNoCard theme (default: default)carbon, ocean, minimalall
widthNoCard width in pixels (default: 400)500, 600all
heightNoCard height in pixels (default: 200)250, 300all
borderNoShow border (default: true)0, 1all

Best Practices

Choose Card Type by Purpose

Select repository cards for project showcase, user cards for personal branding, language cards for tech stack display

Example: Use repo card in README, user card in portfolio, languages card in tech blog

Match Theme to Context

Dark themes work well on dark websites, light themes on documentation sites, gradient themes for creative projects

Example: Carbon theme for dark portfolio, default theme for GitHub README, ocean theme for creative project

Consider Loading Performance

Cards are cached but still require network requests. Use appropriate sizing and consider lazy loading

Example: Use standard sizes (400x200) for consistency, implement lazy loading for below-fold cards

Test Readability

Ensure card text is legible against your background. Test both light and dark website themes

Example: Preview cards on your actual website background, adjust themes for contrast

Use Semantic HTML

Wrap cards in figure elements with proper alt text for accessibility

Example: <figure><img src="..." alt="Repository health card"><figcaption>Project status</figcaption></figure>

README Integration

Repository Card

<!-- Repository Card --> <img src="https://repopulse-one.vercel.app/api/card/repo?repo=your-username/your-repo&theme=carbon" alt="Repository Card"/>

User Profile Card

<!-- User Card --> <img src="https://repopulse-one.vercel.app/api/card/user?username=your-username&theme=ocean" alt="User Card"/>

Language Breakdown

<!-- Languages Card --> <img src="https://repopulse-one.vercel.app/api/card/languages?repo=your-username/your-repo&theme=minimal" alt="Languages Card"/>

With Custom Sizing

<img src="https://repopulse-one.vercel.app/api/card/repo?repo=owner/repo&theme=carbon&width=500&height=250" alt="Custom Card"/>

Explore Card Themes

Browse our complete collection of 100+ card themes. Find the perfect visual style for your project showcase.

Card GalleryAll ThemesBadge Guide

← Badge Guide • Back to Documentation