Feature Grids

Ported from HyperUI’s Feature Grids — see Attribution.

Grid with content

Includes a dark: variant — toggle the site theme (top right) to preview it.

MobileSMMDLGFullLTR

Flutter

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});

  final String svg;

  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}

class FeatureGrids1Example extends StatelessWidget {
  const FeatureGrids1Example({super.key});

  static const _boltSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>''';

  static const _shieldSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>''';

  static const _slidersSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"/></svg>''';

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      children: [
        Style(
          'mx-auto max-w-lg text-center',
          children: const [
            Style(
              'text-3xl/tight font-bold text-gray-900 sm:text-4xl dark:text-white',
              child: Text('Features for growth'),
            ),
            Style(
              'mt-4 text-lg text-pretty text-gray-700 dark:text-gray-200',
              child: Text(
                'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo '
                'quam voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.',
              ),
            ),
          ],
        ),
        Style(
          'mt-8 grid grid-cols-1 gap-8 md:grid-cols-3',
          children: [
            Style(
              'rounded-lg border border-gray-200 p-6 dark:border-gray-700',
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Style(
                    'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                    child: Style('size-6', child: CurrentColorIcon(_boltSvg)),
                  ),
                  const Style(
                    'mt-4 text-lg font-semibold text-gray-900 dark:text-white',
                    child: Text('High performance'),
                  ),
                  const Style(
                    'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                    child: Text(
                      'Lightning-quick load times optimized for every device',
                    ),
                  ),
                ],
              ),
            ),
            Style(
              'rounded-lg border border-gray-200 p-6 dark:border-gray-700',
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Style(
                    'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                    child: Style(
                      'size-6',
                      child: CurrentColorIcon(_shieldSvg),
                    ),
                  ),
                  const Style(
                    'mt-4 text-lg font-semibold text-gray-900 dark:text-white',
                    child: Text('Enterprise security'),
                  ),
                  const Style(
                    'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                    child: Text(
                      'Enterprise-grade security built into every layer',
                    ),
                  ),
                ],
              ),
            ),
            Style(
              'rounded-lg border border-gray-200 p-6 dark:border-gray-700',
              child: Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Style(
                    'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                    child: Style(
                      'size-6',
                      child: CurrentColorIcon(_slidersSvg),
                    ),
                  ),
                  const Style(
                    'mt-4 text-lg font-semibold text-gray-900 dark:text-white',
                    child: Text('Highly configurable'),
                  ),
                  const Style(
                    'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                    child: Text(
                      'Adapt every aspect to match your brand and needs',
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Original HTML

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <div class="mx-auto max-w-lg text-center">
    <h2 class="text-3xl/tight font-bold text-gray-900 sm:text-4xl">Features for growth</h2>

    <p class="mt-4 text-lg text-pretty text-gray-700">
      Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam
      voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.
    </p>
  </div>

  <div class="mt-8 grid grid-cols-1 gap-8 md:grid-cols-3">
    <div class="rounded-lg border border-gray-200 p-6">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
          />
        </svg>
      </div>

      <h3 class="mt-4 text-lg font-semibold text-gray-900">High performance</h3>

      <p class="mt-2 text-pretty text-gray-700">
        Lightning-quick load times optimized for every device
      </p>
    </div>

    <div class="rounded-lg border border-gray-200 p-6">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
          />
        </svg>
      </div>

      <h3 class="mt-4 text-lg font-semibold text-gray-900">Enterprise security</h3>

      <p class="mt-2 text-pretty text-gray-700">
        Enterprise-grade security built into every layer
      </p>
    </div>

    <div class="rounded-lg border border-gray-200 p-6">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
          />
        </svg>
      </div>

      <h3 class="mt-4 text-lg font-semibold text-gray-900">Highly configurable</h3>

      <p class="mt-2 text-pretty text-gray-700">
        Adapt every aspect to match your brand and needs
      </p>
    </div>
  </div>
</div>

List with content

Includes a dark: variant — toggle the site theme (top right) to preview it.

MobileSMMDLGFullLTR

Flutter

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});

  final String svg;

  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}

class FeatureGrids2Example extends StatelessWidget {
  const FeatureGrids2Example({super.key});

  static const _reportingSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"/></svg>''';

  static const _collaborationSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"/></svg>''';

  static const _connectorsSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"/></svg>''';

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-8 md:grid-cols-2',
        children: [
          Style(
            'col-span-1',
            children: const [
              Style(
                'text-3xl/tight font-bold text-gray-900 sm:text-4xl dark:text-white',
                child: Text('Features for growth'),
              ),
              Style(
                'mt-4 text-lg text-pretty text-gray-700 dark:text-gray-200',
                child: Text(
                  'Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo '
                  'quam voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.',
                ),
              ),
            ],
          ),
          Style(
            'space-y-6',
            children: [
              Style(
                'flex items-start gap-4',
                children: [
                  Style(
                    'shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                    child: Style('size-6', child: CurrentColorIcon(_reportingSvg)),
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Style(
                        'text-lg font-semibold text-gray-900 dark:text-white',
                        child: Text('Advanced reporting'),
                      ),
                      Style(
                        'mt-1 text-gray-700 dark:text-gray-200',
                        child: Text('Track metrics that matter with instant insights'),
                      ),
                    ],
                  ),
                ],
              ),
              Style(
                'flex items-start gap-4',
                children: [
                  Style(
                    'shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                    child: Style('size-6', child: CurrentColorIcon(_collaborationSvg)),
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Style(
                        'text-lg font-semibold text-gray-900 dark:text-white',
                        child: Text('Collaboration tools'),
                      ),
                      Style(
                        'mt-1 text-gray-700 dark:text-gray-200',
                        child: Text('Work together seamlessly across your organization'),
                      ),
                    ],
                  ),
                ],
              ),
              Style(
                'flex items-start gap-4',
                children: [
                  Style(
                    'shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                    child: Style('size-6', child: CurrentColorIcon(_connectorsSvg)),
                  ),
                  Column(
                    mainAxisSize: MainAxisSize.min,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Style(
                        'text-lg font-semibold text-gray-900 dark:text-white',
                        child: Text('Third-party connectors'),
                      ),
                      Style(
                        'mt-1 text-gray-700 dark:text-gray-200',
                        child: Text('Connect with your favorite tools and services'),
                      ),
                    ],
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Original HTML

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
    <div class="col-span-1">
      <h2 class="text-3xl/tight font-bold text-gray-900 sm:text-4xl">Features for growth</h2>

      <p class="mt-4 text-lg text-pretty text-gray-700">
        Lorem ipsum dolor sit, amet consectetur adipisicing elit. Veritatis tenetur, nemo quam
        voluptas sunt impedit dolorem asperiores aliquid doloribus fugit.
      </p>
    </div>

    <div class="space-y-6">
      <div class="flex items-start gap-4">
        <div class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
            />
          </svg>
        </div>

        <div>
          <h3 class="text-lg font-semibold text-gray-900">Advanced reporting</h3>

          <p class="mt-1 text-gray-700">Track metrics that matter with instant insights</p>
        </div>
      </div>

      <div class="flex items-start gap-4">
        <div class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M18 18.72a9.094 9.094 0 0 0 3.741-.479 3 3 0 0 0-4.682-2.72m.94 3.198.001.031c0 .225-.012.447-.037.666A11.944 11.944 0 0 1 12 21c-2.17 0-4.207-.576-5.963-1.584A6.062 6.062 0 0 1 6 18.719m12 0a5.971 5.971 0 0 0-.941-3.197m0 0A5.995 5.995 0 0 0 12 12.75a5.995 5.995 0 0 0-5.058 2.772m0 0a3 3 0 0 0-4.681 2.72 8.986 8.986 0 0 0 3.74.477m.94-3.197a5.971 5.971 0 0 0-.94 3.197M15 6.75a3 3 0 1 1-6 0 3 3 0 0 1 6 0Zm6 3a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Zm-13.5 0a2.25 2.25 0 1 1-4.5 0 2.25 2.25 0 0 1 4.5 0Z"
            />
          </svg>
        </div>

        <div>
          <h3 class="text-lg font-semibold text-gray-900">Collaboration tools</h3>

          <p class="mt-1 text-gray-700">Work together seamlessly across your organization</p>
        </div>
      </div>

      <div class="flex items-start gap-4">
        <div class="shrink-0 rounded-lg bg-gray-100 p-3 text-gray-700">
          <svg
            aria-hidden="true"
            xmlns="http://www.w3.org/2000/svg"
            fill="none"
            viewBox="0 0 24 24"
            stroke-width="1.5"
            stroke="currentColor"
            class="size-6"
          >
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              d="M5.25 14.25h13.5m-13.5 0a3 3 0 0 1-3-3m3 3a3 3 0 1 0 0 6h13.5a3 3 0 1 0 0-6m-16.5-3a3 3 0 0 1 3-3h13.5a3 3 0 0 1 3 3m-19.5 0a4.5 4.5 0 0 1 .9-2.7L5.737 5.1a3.375 3.375 0 0 1 2.7-1.35h7.126c1.062 0 2.062.5 2.7 1.35l2.587 3.45a4.5 4.5 0 0 1 .9 2.7m0 0a3 3 0 0 1-3 3m0 3h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Zm-3 6h.008v.008h-.008v-.008Zm0-6h.008v.008h-.008v-.008Z"
            />
          </svg>
        </div>

        <div>
          <h3 class="text-lg font-semibold text-gray-900">Third-party connectors</h3>

          <p class="mt-1 text-gray-700">Connect with your favorite tools and services</p>
        </div>
      </div>
    </div>
  </div>
</div>

Simple grid

Includes a dark: variant — toggle the site theme (top right) to preview it.

MobileSMMDLGFullLTR

Flutter

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});

  final String svg;

  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}

class FeatureGrids3Example extends StatelessWidget {
  const FeatureGrids3Example({super.key});

  static const _boltSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>''';

  static const _shieldSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>''';

  static const _slidersSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"/></svg>''';

  static const _reportingSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"/></svg>''';

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4',
        children: [
          Style(
            'text-center',
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Style(
                  'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                  child: Style('size-6', child: CurrentColorIcon(_boltSvg)),
                ),
                const Style(
                  'mt-4 text-lg font-semibold text-gray-900 dark:text-white',
                  child: Text('High performance'),
                ),
                const Style(
                  'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                  child: Text('Optimized load times'),
                ),
              ],
            ),
          ),
          Style(
            'text-center',
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Style(
                  'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                  child: Style('size-6', child: CurrentColorIcon(_shieldSvg)),
                ),
                const Style(
                  'mt-4 text-lg font-semibold text-gray-900 dark:text-white',
                  child: Text('Enterprise security'),
                ),
                const Style(
                  'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                  child: Text('Every layer secured'),
                ),
              ],
            ),
          ),
          Style(
            'text-center',
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Style(
                  'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                  child: Style('size-6', child: CurrentColorIcon(_slidersSvg)),
                ),
                const Style(
                  'mt-4 text-lg font-semibold text-gray-900 dark:text-white',
                  child: Text('Highly configurable'),
                ),
                const Style(
                  'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                  child: Text('Adapt every aspect'),
                ),
              ],
            ),
          ),
          Style(
            'text-center',
            child: Column(
              mainAxisSize: MainAxisSize.min,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Style(
                  'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                  child: Style(
                    'size-6',
                    child: CurrentColorIcon(_reportingSvg),
                  ),
                ),
                const Style(
                  'mt-4 text-lg font-semibold text-gray-900 dark:text-white',
                  child: Text('Advanced reporting'),
                ),
                const Style(
                  'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                  child: Text('Metrics that matter'),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

Original HTML

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <div class="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-4">
    <div class="text-center">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
          />
        </svg>
      </div>

      <h3 class="mt-4 text-lg font-semibold text-gray-900">High performance</h3>

      <p class="mt-2 text-pretty text-gray-700">Optimized load times</p>
    </div>

    <div class="text-center">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
          />
        </svg>
      </div>

      <h3 class="mt-4 text-lg font-semibold text-gray-900">Enterprise security</h3>

      <p class="mt-2 text-pretty text-gray-700">Every layer secured</p>
    </div>

    <div class="text-center">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
          />
        </svg>
      </div>

      <h3 class="mt-4 text-lg font-semibold text-gray-900">Highly configurable</h3>

      <p class="mt-2 text-pretty text-gray-700">Adapt every aspect</p>
    </div>

    <div class="text-center">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
          />
        </svg>
      </div>

      <h3 class="mt-4 text-lg font-semibold text-gray-900">Advanced reporting</h3>

      <p class="mt-2 text-pretty text-gray-700">Metrics that matter</p>
    </div>
  </div>
</div>

Grid with list items

Includes a dark: variant — toggle the site theme (top right) to preview it.

MobileSMMDLGFullLTR

Flutter

class CurrentColorIcon extends StatelessWidget
    implements StyleReplacedElementWrapper {
  const CurrentColorIcon(this.svg, {super.key});

  final String svg;

  @override
  Widget build(BuildContext context) {
    final color = IconTheme.of(context).color ?? const Color(0xFF000000);
    return SvgPicture.string(svg, theme: SvgTheme(currentColor: color));
  }
}

class FeatureGrids4Example extends StatelessWidget {
  const FeatureGrids4Example({super.key});

  static const _boltSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"/></svg>''';

  static const _shieldSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"/></svg>''';

  static const _slidersSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"/></svg>''';

  static const _reportingSvg =
      '''<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"/></svg>''';

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8',
      child: Style(
        'grid grid-cols-1 gap-8 md:grid-cols-2',
        children: [
          Style(
            'flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700',
            children: [
              Style(
                'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                child: Style('size-6', child: CurrentColorIcon(_boltSvg)),
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Style(
                    'text-lg font-semibold text-gray-900 dark:text-white',
                    child: Text('High performance'),
                  ),
                  Style(
                    'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                    child: Text(
                      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus '
                      'consectetur eius quo ea ipsa illum eos amet velit assumenda.',
                    ),
                  ),
                ],
              ),
            ],
          ),
          Style(
            'flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700',
            children: [
              Style(
                'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                child: Style('size-6', child: CurrentColorIcon(_shieldSvg)),
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Style(
                    'text-lg font-semibold text-gray-900 dark:text-white',
                    child: Text('Enterprise security'),
                  ),
                  Style(
                    'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                    child: Text(
                      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Est optio fugit eos '
                      'quia ipsam ullam pariatur iusto accusantium possimus distinctio?',
                    ),
                  ),
                ],
              ),
            ],
          ),
          Style(
            'flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700',
            children: [
              Style(
                'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                child: Style('size-6', child: CurrentColorIcon(_slidersSvg)),
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Style(
                    'text-lg font-semibold text-gray-900 dark:text-white',
                    child: Text('Highly configurable'),
                  ),
                  Style(
                    'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                    child: Text(
                      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum '
                      'corporis debitis. Nobis officia dignissimos aliquam praesentium quod?',
                    ),
                  ),
                ],
              ),
            ],
          ),
          Style(
            'flex items-start gap-4 rounded-lg border border-gray-200 p-6 dark:border-gray-700',
            children: [
              Style(
                'inline-flex rounded-lg bg-gray-100 p-3 text-gray-700 dark:bg-gray-800 dark:text-gray-200',
                child: Style('size-6', child: CurrentColorIcon(_reportingSvg)),
              ),
              Column(
                mainAxisSize: MainAxisSize.min,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: const [
                  Style(
                    'text-lg font-semibold text-gray-900 dark:text-white',
                    child: Text('Advanced reporting'),
                  ),
                  Style(
                    'mt-2 text-pretty text-gray-700 dark:text-gray-200',
                    child: Text(
                      'Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum '
                      'corporis debitis. Nobis officia dignissimos aliquam praesentium quod?',
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Original HTML

<div class="mx-auto max-w-7xl px-4 py-8 sm:px-6 lg:px-8">
  <div class="grid grid-cols-1 gap-8 md:grid-cols-2">
    <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="m3.75 13.5 10.5-11.25L12 10.5h8.25L9.75 21.75 12 13.5H3.75Z"
          />
        </svg>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-gray-900">High performance</h3>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut accusamus consectetur
          eius quo ea ipsa illum eos amet velit assumenda.
        </p>
      </div>
    </div>

    <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M16.5 10.5V6.75a4.5 4.5 0 1 0-9 0v3.75m-.75 11.25h10.5a2.25 2.25 0 0 0 2.25-2.25v-6.75a2.25 2.25 0 0 0-2.25-2.25H6.75a2.25 2.25 0 0 0-2.25 2.25v6.75a2.25 2.25 0 0 0 2.25 2.25Z"
          />
        </svg>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-gray-900">Enterprise security</h3>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Est optio fugit eos quia
          ipsam ullam pariatur iusto accusantium possimus distinctio?
        </p>
      </div>
    </div>

    <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M6 13.5V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m12-3V3.75m0 9.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 3.75V16.5m-6-9V3.75m0 3.75a1.5 1.5 0 0 1 0 3m0-3a1.5 1.5 0 0 0 0 3m0 9.75V10.5"
          />
        </svg>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-gray-900">Highly configurable</h3>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
          debitis. Nobis officia dignissimos aliquam praesentium quod?
        </p>
      </div>
    </div>

    <div class="flex items-start gap-4 rounded-lg border border-gray-200 p-6">
      <div class="inline-flex rounded-lg bg-gray-100 p-3 text-gray-700">
        <svg
          aria-hidden="true"
          xmlns="http://www.w3.org/2000/svg"
          fill="none"
          viewBox="0 0 24 24"
          stroke-width="1.5"
          stroke="currentColor"
          class="size-6"
        >
          <path
            stroke-linecap="round"
            stroke-linejoin="round"
            d="M3.75 3v11.25A2.25 2.25 0 0 0 6 16.5h2.25M3.75 3h-1.5m1.5 0h16.5m0 0h1.5m-1.5 0v11.25A2.25 2.25 0 0 1 18 16.5h-2.25m-7.5 0h7.5m-7.5 0-1 3m8.5-3 1 3m0 0 .5 1.5m-.5-1.5h-9.5m0 0-.5 1.5M9 11.25v1.5M12 9v3.75m3-6v6"
          />
        </svg>
      </div>

      <div>
        <h3 class="text-lg font-semibold text-gray-900">Advanced reporting</h3>

        <p class="mt-2 text-pretty text-gray-700">
          Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis ea cum harum corporis
          debitis. Nobis officia dignissimos aliquam praesentium quod?
        </p>
      </div>
    </div>
  </div>
</div>