Link grids

Guide readers to related pages with clean, navigational card grids.

Link grids are navigational elements that guide readers to related pages. They appear as a 2-column grid of cards with titles and short descriptions, creating clear pathways through your documentation.

Usage

Import the LinkGrid component and pass an array of link objects:

import LinkGrid from '@/components/mdx/LinkGrid.astro';

<LinkGrid links={[
  { title: "Installation", description: "Get started quickly.", href: "/en/getting-started/installation" },
  { title: "Configuration", description: "Customize your site.", href: "/en/getting-started/configuration" },
]} />

Example

Design details

Link grids use a subtle visual trick: the grid itself has a background color matching the border, and each card has the page background color. The 1-pixel gap between cards creates clean divider lines without any explicit border elements.

On hover, cards transition to the surface background color, providing a gentle acknowledgment without being distracting.