FeatureGrid

Overview

FeatureGrid is a CORE-OWNED section component in src/core/components/sections/FeatureGrid.astro. It renders a grid of cards from a structured data array, with each card delegated to SectionCard. Cards support icons, badges, media, and action links.

FeatureGrid and InfoCards share the same architecture — the only difference is that FeatureGrid items support an icon field. Use FeatureGrid when cards benefit from a visual icon prefix; use InfoCards when they don’t.

Props

Prop	Type	Default	Description
`columns`	`2` \| `3`	`3`	Number of grid columns (responsive auto-fit)
`cardOrientation`	`"vertical"` \| `"horizontal"`	`"vertical"`	Card layout direction (passed to SectionCard)
`fullCardClick`	`boolean`	`true`	Enable full-card click area for single-link cards
`cardBackground`	`SectionBackground`	—	Default card surface variant (overridable per item)
`items`	`FeatureGridItem[]`	required	Array of card data objects (see Items below)
`class`	`string`	—	Additional CSS classes

All other HTML attributes (id, aria-*, data-*, etc.) are forwarded to the root <div> via attribute passthrough.

Items

Each item in the items array has this shape:

Field	Type	Description
`title`	`string`	Card heading text
`body`	`string`	Card body text
`icon`	`string`	Emoji or text icon rendered before the heading
`badge`	`string`	Small label below the heading
`media`	`SectionMedia`	Image with `src` and `alt`
`links`	`SectionCardLink[]`	Action links with `href`, `label`, and optional `external`
`fullCardClick`	`boolean`	Per-item override of the section-level `fullCardClick`
`cardBackground`	`SectionBackground`	Per-item override of the section-level `cardBackground`

Behavior

Column layout

The grid uses CSS auto-fit with minimum column widths:

2 columns: minmax(min(100%, 24rem), 1fr) — cards fill two columns on wide viewports, collapse to one on narrow
3 columns: minmax(min(100%, 20rem), 1fr) — same pattern with a smaller minimum

Card delegation

Each item is rendered as a SectionCard. All card behavior (full-card click, orientation, background variants, title link) is inherited from SectionCard. See the SectionCard reference for details.

Heading composition

FeatureGrid does not render its own heading. Callers compose headings as siblings before the component, inside the same LayoutSection:

Visible heading: Place a <Heading> before <FeatureGrid> inside the same LayoutSection
Screen-reader-only naming: Use the LayoutSection label prop to set aria-label on the wrapping <section>

CSS API

BEM root class: feature-grid

Class	Element
`.feature-grid`	Component root (`<div>`)
`.feature-grid__grid`	Grid container (`<ul>`)
`.feature-grid__item`	Grid item (`<li>`)

Modifier classes applied automatically:

Modifier	Applied when
`.feature-grid__grid--2`	`columns={2}`
`.feature-grid__grid--3`	`columns={3}`

These classes are available as CSS API hooks for site-level overrides in src/site/styles/.

Usage

<LayoutSection>
  <Heading level={2}>Our Core Services</Heading>
  <p class="mt-sm">End-to-end capabilities for modern web projects.</p>
  <FeatureGrid
    items={[
      {
        title: "Web Development",
        body: "Custom websites built with modern frameworks.",
        icon: "💻",
        links: [{ href: "/contact/", label: "Start a project" }],
      },
      {
        title: "UI/UX Design",
        body: "User-centered design from research through prototypes.",
        icon: "🎨",
        links: [{ href: "/contact/", label: "Schedule a review" }],
      },
    ]}
    columns={2}
  />
</LayoutSection>

Note: To customize FeatureGrid appearance at the site level, target the BEM classes above in site-owned stylesheets rather than modifying the core component. Card-level styling is controlled via SectionCard’s CSS API.

On this page