CardsTextGrid Pattern

A section pattern with a header (heading + description) and a grid of CardTextIconCard components.

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.

• 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

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.",
    },
  ]}
/>

• base: 4, md: 4, lg: 6 (3 cards/row at base+md, 2 at lg)

• CardsTextGrid.tsx - React component
• CardsTextGrid.scss - Styles
• index.ts - Barrel exports
• README.md - This file