A client-side React component that renders a responsive grid of feature cards with configurable layouts, borders, backgrounds, icons, and status badges.
## Key Components
### Interfaces
- **`FeatureCardItem`** — Defines individual card data: icon, title, badge, content, and per-card style overrides (`removeAllBorders`, `noBackground`, `customBackground`)
- **`FeatureCardGridProps`** — Grid-level configuration: items array, column count, class overrides, border/background/gap controls
### Exports
- **`FeatureCardGrid`** — Main component rendering a `Card` wrapper with a responsive CSS grid, dynamically computing row/column borders and applying per-item style overrides
## Usage Example
```typescript
import { FeatureCardGrid, FeatureCardItem } from './feature-card';
import { ShieldIcon } from 'lucide-react';
const items: FeatureCardItem[] = [
{
icon: ShieldIcon,
iconColor: '#FFC008',
title: 'Automated Patching',
badge: { text: 'New', colorScheme: 'green' },
content: Keep endpoints secure with zero-touch patch management.
,
},
{
title: 'AI Triage',
content: Mingo AI resolves tickets before a technician is needed.
,
noBackground: true,
},
];
export default function Page() {
return (
);
}
```
## Notes
- Border logic is **responsive-aware**: right borders are hidden on mobile (single column) and shown on desktop only where appropriate
- When **all items** share `noBackground` or `removeAllBorders`, the outer `Card` container is also updated to match, avoiding visual inconsistencies
- `content` accepts any `React.ReactNode`, making cards fully composable for marketing pages, feature showcases, or dashboard layouts