xrpl-dev-portal/shared/patterns/CardsTextGrid

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/patterns/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 component
• CardsTextGrid.scss - Styles
• index.ts - Barrel exports
• README.md - This file