Listing Card
Display content listings with optional navigation, badges, and descriptions - based on Gene design system
Basic Examples
Title Only
GraphQL API Documentation
Simple listing with just a title
With Description
REST API Guidelines
Comprehensive documentation covering authentication, rate limiting, error handling, and best practices for consuming our REST APIs.
Listing with descriptive text providing more context
With Badge
TypeScript Migration Guide
Step-by-step instructions for migrating your JavaScript codebase to TypeScript with practical examples.
Listing with an info badge to highlight status
TypeScript Migration Guide
Step-by-step instructions for migrating your JavaScript codebase to TypeScript with practical examples.
Listing with a pending badge to highlight status
Interactive Examples
Clickable Card with URL
Complete reference for components, patterns, and guidelines for building consistent user interfaces.
Clickable card with hover states and accessibility features
Multiple Clickable Cards
Modern approaches to structuring React applications with Next.js, TypeScript, and state management.
Microservices patterns, API design, database optimization, and deployment strategies.
Automated testing, deployment pipelines, monitoring, and infrastructure as code best practices.
Multiple cards stacked to form a cohesive listing interface
Content Variations
Long Content
Advanced React Patterns and Performance Optimization Techniques
Deep dive into advanced React patterns including render props, higher-order components, compound components, and modern hooks patterns. Learn how to optimize performance with memoization, code splitting, and lazy loading strategies for large-scale applications.
Card with longer content demonstrating text wrapping and layout
Short Content
API
Quick start guide
Card with minimal content showing compact layout
Feedback Request Examples
Anytime Feedback with Date and Requester
Anytime feedback: Sarah Johnson
Desktop layout with date and requester side-by-side
Completed Feedback
Anytime feedback: Michael Rodriguez
Completed feedback request with responsive date layout