Feature Grid

Responsive grid layout for highlighting multiple product features.

Why teams switch

Operational clarity in every workflow

Spotlight the core capabilities that make your product different, with consistent icon cards that wrap automatically on any screen.

Automated handoffs

Trigger downstream tools when tasks close so work keeps moving without manual pings.

Insight dashboards

Pull status from every project into a single adaptive view for leadership.

Granular permissions

Use roles to decide exactly who can edit briefs, roadmaps, and approvals.

Shared timelines

Keep stakeholders aligned with always-on launch calendars and reminders.

---
import FeatureGrid from "@features/feature-grid/FeatureGrid.astro";
---

<FeatureGrid
align="center" eyebrow="Why teams switch" features={
  [
    {
      "title": "Automated handoffs",
      "description": "Trigger downstream tools when tasks close so work keeps moving without manual pings.",
      "iconName": "sparkles",
      "iconColor": "purple",
      "iconBackground": true
    },
    {
      "title": "Insight dashboards",
      "description": "Pull status from every project into a single adaptive view for leadership.",
      "iconName": "chart-bar-square",
      "iconColor": "blue",
      "iconBackground": true
    },
    {
      "title": "Granular permissions",
      "description": "Use roles to decide exactly who can edit briefs, roadmaps, and approvals.",
      "iconName": "shield-check",
      "iconColor": "green",
      "iconBackground": true
    },
    {
      "title": "Shared timelines",
      "description": "Keep stakeholders aligned with always-on launch calendars and reminders.",
      "iconName": "calendar-days",
      "iconColor": "orange",
      "iconBackground": true
    }
  ]
} gap="xl" heading="Operational clarity in every workflow" maxItemWidth={360} minItemWidth={280} subtext="Spotlight the core capabilities that make your product different, with consistent icon cards that wrap automatically on any screen."
/>

---
blocks:
  _component: page-sections/features/feature-grid
  eyebrow: Why teams switch
  heading: Operational clarity in every workflow
  subtext: Spotlight the core capabilities that make your product different, with consistent icon cards that wrap automatically on any screen.
  align: center
  gap: xl
  minItemWidth: 280
  maxItemWidth: 360
  features:
    - title: Automated handoffs
      description: Trigger downstream tools when tasks close so work keeps moving without manual pings.
      iconName: sparkles
      iconColor: purple
      iconBackground: true
    - title: Insight dashboards
      description: Pull status from every project into a single adaptive view for leadership.
      iconName: chart-bar-square
      iconColor: blue
      iconBackground: true
    - title: Granular permissions
      description: Use roles to decide exactly who can edit briefs, roadmaps, and approvals.
      iconName: shield-check
      iconColor: green
      iconBackground: true
    - title: Shared timelines
      description: Keep stakeholders aligned with always-on launch calendars and reminders.
      iconName: calendar-days
      iconColor: orange
      iconBackground: true
---

Overview

Use Feature Grid when you need to showcase a set of tightly-related capabilities inside one section. It keeps the heading and subtext grouped together while the grid automatically flows into responsive columns, so launches and landing pages stay balanced without hand-tuning breakpoints.

Properties

eyebrow string | default: Eyebrow text

Optional eyebrow text shown above the heading.

heading string | default: Heading text

Main heading for the feature grid.

subtext string | default: Subtext placeholder text that will be replaced with actual content.

Supporting copy beneath the heading.

gap enum | default: xl

Spacing between feature cards.

Accepted values:

sm
md
lg
xl
2xl
3xl

minItemWidth number | default: 280

Minimum width for each feature card in pixels.

maxItemWidth number | default: 360

Maximum width for each feature card in pixels.

features array | default: array

Feature cards rendered in the grid.

Item Properties:

_component string | default: page-sections/features/feature-grid/feature-item

title string | default: Feature title

Name of the feature.

description string | default: Feature description placeholder text that will be replaced with actual content.

Supporting description for the feature.

iconName enum | default: bolt

Icon displayed with the feature.

iconColor enum | default: yellow

Color accent applied to the icon.

Accepted values:

default
blue
green
yellow
orange
red
purple
pink
cyan

colorScheme enum | default: inherit

Color scheme theme applied to the section wrapper.

Accepted values:

inherit
default
contrast

backgroundColor enum | default: base

Background color used behind the grid.

Accepted values:

none
base
surface
accent
highlight