# CardOffgrid Component - Usage Guide
## Overview
`CardOffgrid` is a feature highlight card component designed to showcase key capabilities, features, or resources. It combines an icon, title, and description in a visually engaging, interactive card format with smooth hover animations.
**Use CardOffgrid when:**
- Highlighting key features or capabilities
- Creating feature grids or showcases
- Linking to important documentation or resources
- Presenting product/service highlights
**Don't use CardOffgrid for:**
- Simple content cards (use standard Bootstrap cards)
- Navigation items (use navigation components)
- Data display (use tables or data components)
- Long-form content (use article/page layouts)
## When to Use Each Variant
### Neutral Variant (`variant="neutral"`)
**Use for:**
- General feature highlights
- Standard content cards
- Secondary or supporting features
- When you want subtle, professional presentation
**Example use cases:**
- Documentation sections
- Feature lists
- Service offerings
- Standard informational cards
### Green Variant (`variant="green"`)
**Use for:**
- Primary or featured highlights
- Call-to-action cards
- Important announcements
- Brand-emphasized content
**Example use cases:**
- Hero feature cards
- Primary CTAs
- Featured resources
- Branded highlights
## Content Best Practices
### Title Guidelines
✅ **Do:**
- Keep titles concise (1-3 words ideal)
- Use line breaks (`\n`) for multi-word titles when needed
- Make titles action-oriented or descriptive
- Examples: "Onchain Metadata", "Token\nManagement", "Cross-Chain\nBridges"
❌ **Don't:**
- Write long sentences as titles
- Use more than 2 lines
- Include punctuation (periods, commas)
- Make titles too generic ("Feature", "Service")
### Description Guidelines
✅ **Do:**
- Write 1-2 sentences (15-25 words ideal)
- Focus on benefits or key information
- Use clear, simple language
- Keep descriptions scannable
❌ **Don't:**
- Write paragraphs (save for full pages)
- Use jargon without context
- Include multiple ideas in one description
- Make descriptions too short (< 10 words) or too long (> 40 words)
### Icon Guidelines
✅ **Do:**
- Use SVG icons for crisp rendering
- Choose icons that represent the feature clearly
- Ensure icons are recognizable at 68×68px
- Use consistent icon style across cards
❌ **Don't:**
- Use low-resolution raster images
- Choose overly complex icons
- Mix icon styles within a single grid
- Use icons that don't relate to the content
## Interaction Patterns
### Using `onClick` vs `href`
**Use `onClick` when:**
- Triggering JavaScript actions (modals, analytics, state changes)
- Opening external links in new tabs
- Performing client-side navigation
- Handling complex interactions
```tsx
}
title="View Analytics"
description="See detailed usage statistics and insights."
onClick={() => {
trackEvent('analytics_viewed');
openModal('analytics');
}}
/>
```
**Use `href` when:**
- Navigating to internal pages
- Linking to documentation
- Simple page navigation
- SEO-friendly links
```tsx
```
### Static (Presentational) Cards
Omit both `onClick` and `href` to render a purely presentational card. It has no
click target, so the component drops every interactive affordance: no pointer
cursor, no hover color wipe, and no pressed state. It renders as a plain `
`
and isn't focusable or announced as a control.
Use this for cards that only communicate information — e.g. a "why XRPL" feature
carousel where none of the cards link anywhere.
```tsx
```
### Disabled State
Use `disabled` when:
- Feature is coming soon
- Feature requires authentication
- Feature is temporarily unavailable
- You want to show but not allow interaction
```tsx
}
title="Coming\nSoon"
description="This feature will be available in the next release."
disabled
/>
```
## Layout Best Practices
### Grid Layouts
**Recommended grid patterns:**
```tsx
// 2-column grid (desktop)
// 3-column grid (desktop)
{cards.map(card => (
))}
```
**Spacing:**
- Use Bootstrap spacing utilities (`mb-4`, `mb-5`) between cards
- Maintain consistent spacing in grids
- Cards are responsive and stack on mobile automatically
### Single Card Usage
For hero sections or featured highlights:
```tsx