LinkSmallGrid Component

A responsive grid section pattern for displaying navigational links using TileLink components.

LinkSmallGrid is a pattern component that combines a heading, optional description, and a grid of TileLink components. It provides a consistent layout for presenting multiple navigation options or quick links.

• Responsive Grid Layout: Adapts from 1 column (mobile) to 4 columns (desktop)
• Two Color Variants: Gray and Lilac (applied to all tiles)
• Light/Dark Mode: Full theming support
• Right-Alignment: Automatically right-aligns grids with fewer than 10 tiles at desktop
• Flexible Content: Supports both links and click handlers
• Accessible: Semantic HTML with proper heading hierarchy

Based on a 12-column grid system:

When there are fewer than 10 total tiles, the grid is right-aligned at the LG breakpoint only:

• 1 tile: offset 9 columns
• 2 tiles: offset 6 columns
• 3 tiles: offset 3 columns
• 4+ tiles: no offset (fills row)
• 10+ tiles: no offset (left-aligned grid)

Note: MD and Base breakpoints never apply offset (always left-aligned).

<LinkSmallGrid
  variant="gray"
  heading="Quick Links"
  description="Navigate to key sections"
  links={[
    { label: "Documentation", href: "/docs" },
    { label: "Tutorials", href: "/tutorials" },
    { label: "API Reference", href: "/api" },
    { label: "Examples", href: "/examples" }
  ]}
/>

<LinkSmallGrid
  variant="lilac"
  heading="Get Started"
  links={[
    { label: "Quick Start", onClick: () => navigate('/start') },
    { label: "Examples", href: "/examples" },
    { label: "Templates", href: "/templates" }
  ]}
/>

<LinkSmallGrid
  variant="gray"
  heading="Resources"
  links={[
    { label: "Blog", href: "/blog" },
    { label: "Community", href: "/community" }
  ]}
/>

Note: variant is controlled by the parent LinkSmallGrid component.

<section className="bds-link-small-grid">
  <PageGrid>
    <PageGridRow>
      <PageGridCol span={{ base: 4, md: 6, lg: 8 }}>
        <header>
          <h2>{heading}</h2>
          <p>{description}</p>
        </header>
      </PageGridCol>
    </PageGridRow>
    <PageGridRow>
      {links.map(link => (
        <PageGridCol span={{ base: 4, md: 4, lg: 3 }} offset={...}>
          <TileLink {...link} />
        </PageGridCol>
      ))}
    </PageGridRow>
  </PageGrid>
</section>

• Memoized Offset Calculations: Uses useMemo to avoid recalculating offsets on every render
• Optimized Keys: Uses href or label as React keys instead of array index for better reconciliation

• LinkSmallGrid.tsx - React component
• LinkSmallGrid.scss - Styles with BEM naming convention
• README.md - This file

• TileLink: Atomic component used for each tile in the grid
• PageGrid/PageGridRow/PageGridCol: Grid system components
• calculateTileOffset: Utility function for offset calculations (in shared/utils/helpers.ts)

Part of the Brand Design System (BDS) with bds- namespace prefix.

See about/link-small-grid-showcase.page.tsx for examples with different link counts and variants.