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