mirror of
https://github.com/XRPLF/xrpl-dev-portal.git
synced 2026-04-29 15:37:48 +00:00
32e89c1299
* adding showcase page * adding CardStatsList * clean up, tighter code * code review and code clean up * update import, clean up env for error message * tweak some css code * less css, rebuilt * re-adding bem, modifier for bds variants
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
import { CardsIconGrid } from 'shared/sections/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 componentCardsIconGrid.scss- Stylesindex.ts- Barrel exportsREADME.md- This file