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
CardsTextGrid Pattern
A section pattern with a header (heading + description) and a grid of CardTextIconCard components.
Overview
CardsTextGrid 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 base+md, 2 cards/row at lg
- Aspect ratios: sm 16:9, md 3:2, lg 3:1
- Light/dark mode support
Usage
import { CardsTextGrid } from 'shared/sections/CardsTextGrid';
<CardsTextGrid
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: 6 (3 cards/row at base+md, 2 at lg)
Files
CardsTextGrid.tsx- React componentCardsTextGrid.scss- Stylesindex.ts- Barrel exportsREADME.md- This file