mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-07-31 19:10:17 +00:00
fe1aa0ecb1
* CardsIconGrid and CardsTextGrid + showcase pages * cleaning up code * more code clean up * using the spacing tokens for values
54 lines
1.3 KiB
Markdown
54 lines
1.3 KiB
Markdown
# CardsIconGrid Pattern
|
|
|
|
A section pattern with a header (heading + description) and a grid of CardTextIconCard components.
|
|
|
|
## Overview
|
|
|
|
CardsIconGrid mirrors the LinkTextDirectory header structure and renders cards in a responsive grid using PageGrid.Row as="ul" and CardTextIconCard with gridColSpan. Each card is a PageGrid.Col as="li"—no div wrapper.
|
|
|
|
## Features
|
|
|
|
- Header with heading and optional description
|
|
- Responsive grid: 3 cards/row at all breakpoints (base, md, lg)
|
|
- Aspect ratios: sm 3:2, md/lg 4:3
|
|
- Light/dark mode support
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { CardsIconGrid } from 'shared/patterns/CardsIconGrid';
|
|
|
|
<CardsIconGrid
|
|
heading="Explore Tools"
|
|
description="Choose a tool to get started"
|
|
cards={[
|
|
{
|
|
icon: "/icons/docs.svg",
|
|
iconAlt: "Documentation",
|
|
heading: "Documentation",
|
|
description: "Access everything you need.",
|
|
},
|
|
]}
|
|
/>
|
|
```
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Description |
|
|
|------|------|-------------|
|
|
| `heading` | `string` | Section heading |
|
|
| `description` | `string` | Optional description |
|
|
| `cards` | `CardTextIconCardData[]` | Array of card configs |
|
|
| `className` | `string` | Additional CSS classes |
|
|
|
|
## Grid Column Spans
|
|
|
|
- base: 4, md: 4, lg: 4 (3 cards per row)
|
|
|
|
## Files
|
|
|
|
- `CardsIconGrid.tsx` - React component
|
|
- `CardsIconGrid.scss` - Styles
|
|
- `index.ts` - Barrel exports
|
|
- `README.md` - This file
|