Feature grid

The “here’s what it does” section: a grid of feature tiles, each with a contained icon, a short title, and a sentence of description. The grid uses auto-fit so it lands on three columns at desktop width and collapses cleanly on narrow screens. Each icon sits in a tinted badge so mixed icon weights still line up.

'use client';

import type { ReactNode } from 'react';
import { Card, Grid, Stack, Text } from '@helix-ui/core';

export interface Feature {
  icon: ReactNode;
  title: string;
  description: ReactNode;
}

export function FeatureGrid({
  features,
  minColumnWidth = 240,
}: {
  features: Feature[];
  /** Min tile width before the grid drops a column. */
  minColumnWidth?: number;
}) {
  return (
    <Grid columns={`repeat(auto-fit, minmax(${minColumnWidth}px, 1fr))`} gap={4}>
      {features.map((feature) => (
        <Card key={feature.title} variant="outlined">
          <Stack gap={3}>
            <div
              style={{
                width: 40,
                height: 40,
                display: 'grid',
                placeItems: 'center',
                borderRadius: 'var(--helix-ui-radius-md)',
                background: 'var(--helix-ui-color-bg-surface-subtle)',
                color: 'var(--helix-ui-color-text-action-brand)',
              }}
              aria-hidden
            >
              {feature.icon}
            </div>
            <Stack gap={1}>
              <Text weight="semibold">{feature.title}</Text>
              <Text size="sm" tone="muted">
                {feature.description}
              </Text>
            </Stack>
          </Stack>
        </Card>
      ))}
    </Grid>
  );
}

Usage

import { Gauge, ShieldCheck, Sparkles } from '@helix-ui/icons';

<FeatureGrid
  features={[
    {
      icon: <Gauge />,
      title: 'Fast by default',
      description: 'Token-driven styling means no runtime CSS-in-JS on the critical path.',
    },
    {
      icon: <ShieldCheck />,
      title: 'Accessible',
      description: 'Every interactive component is built on react-aria primitives.',
    },
    {
      icon: <Sparkles />,
      title: 'AI-readable',
      description: 'Each component ships a spec.md an LLM can compose against.',
    },
  ]}
/>;

Notes

• Keep descriptions to one sentence. If a feature needs a paragraph, it wants its own section, not a tile.
• The icon badge uses text-action-brand on a subtle surface. Swap to text-muted if you want the icons to recede rather than lead.