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.