FeatureGrid

Overview

FeatureGrid renders a configurable grid of FeatureItem cards. Each card can display an icon, an image, or a full-bleed background image. The grid supports 1--4 columns, four gap sizes, optional borders, and per-card column spanning for bento-style layouts.

Usage

import { FeatureGrid } from '@leanicon/web-builder-library'

Default (three columns)

Lightning fast

Optimized builds ship in seconds, not minutes.

Secure by default

End-to-end encryption on every request.

Composable

Mix and match blocks to build any page layout.

With heading and description

Everything you need to ship

A complete set of building blocks for modern marketing sites.

Lightning fast

Optimized builds ship in seconds, not minutes.

Secure by default

End-to-end encryption on every request.

Composable

Mix and match blocks to build any page layout.

Two columns

Lightning fast

Optimized builds ship in seconds, not minutes.

Secure by default

End-to-end encryption on every request.

Four columns with small gap

Lightning fast

Optimized builds ship in seconds.

Secure

End-to-end encryption.

Composable

Mix and match blocks.

Extensible

Add custom components.

Bordered cards

Set bordered to wrap each card in a border with padding.

Lightning fast

Optimized builds ship in seconds, not minutes.

Secure by default

End-to-end encryption on every request.

Composable

Mix and match blocks to build any page layout.

Cards with images

Real-time analytics

Track performance across all your campaigns.

Team collaboration

Work together in real time with your entire team.

Advanced insights

Understand user behaviour and optimize for growth.

With links

Each card can have a link at the bottom.

Scalability

Supercharge your team's ability to get more done with customizable AI agents and automated workflows.

Learn more →

Productivity

Get instant, context-aware answers and generate reports securely grounded in your internal sources of truth.

Learn more →

Security

Protect your business with private deployment options, as well as industry-leading security and data protection.

Learn more →

Background image cards (bento layout)

Use backgroundImage with textColor: "light" for legibility. Use colSpan for asymmetric layouts.

Secure by design

Safeguard sensitive data with a zero-trust security framework, precise access controls, and audit-ready visibility.

Learn more →

Fully customizable

Design and deploy agent-powered workflows tailored to your team's tools, processes, and objectives.

Bento grid — bordered, no gap

Seamless bento layout with gap="none", transparent borders, and no border radius.

Secure by design

Safeguard sensitive data with a zero-trust security framework.

Learn more →

Fully customizable

Design and deploy agent-powered workflows tailored to your team's tools and processes.

Natively interoperable

Connect to existing tools, data, and monitoring systems with flexible APIs and built-in connectors.

Privately deployable

Run in your own VPC, on-prem environment, or through a secure inference platform.

Learn more →

With heading and links

More mindspace, less mayhem

North sets the standard for business performance by helping teams automate work and accelerate decisions that drive results.

Dark mode

Why teams choose us

Lightning fast

Optimized builds ship in seconds, not minutes.

Secure by default

End-to-end encryption on every request.

Composable

Mix and match blocks to build any page layout.

Bordered — dark mode

Lightning fast

Optimized builds ship in seconds, not minutes.

Secure by default

End-to-end encryption on every request.

Composable

Mix and match blocks to build any page layout.

With images — dark mode

Real-time analytics

Track performance across all your campaigns.

Team collaboration

Work together in real time with your entire team.

Advanced insights

Understand user behaviour and optimize for growth.

Bento grid — dark mode

Private. Secure. Compliant. This is what enterprise-ready AI looks like

Secure by design

Safeguard sensitive data with a zero-trust security framework.

Learn more →

Fully customizable

Design and deploy agent-powered workflows tailored to your team's tools and processes.

Natively interoperable

Connect to existing tools, data, and monitoring systems with flexible APIs.

Privately deployable

Run in your own VPC, on-prem environment, or secure inference platform.

Learn more →

Props

Prop	Type	Default	Description
`features`	`FeatureItem[]`	—	Array of feature cards (required)
`heading`	`string?`	—	Optional heading above the grid
`description`	`string?`	—	Optional description below the heading
`columns`	`1 \| 2 \| 3 \| 4`	`3`	Number of grid columns
`gap`	`"none" \| "sm" \| "md" \| "lg"`	`"md"`	Gap between cards
`bordered`	`boolean`	`false`	Wrap each card in a border with padding
`cardRadius`	`string`	`""`	Tailwind border-radius class for cards
`borderColor`	`string`	`"border-border"`	Tailwind border-color class for cards
`animation`	`FeatureGridAnimation?`	—	Animation config for heading and cards
`colorScheme`	`"light" \| "dark"`	—	Force light or dark mode
`className`	`string`	—	Additional CSS classes on root

FeatureItem

Field	Type	Description
`title`	`string`	Card title (required)
`description`	`string`	Card description (required)
`icon`	`React.ReactNode?`	Icon element (10x10 container)
`image`	`ImageProps?`	Card image
`backgroundImage`	`string?`	Full-bleed background image URL
`link`	`{ label: string; href: string }?`	Optional link at the bottom
`colSpan`	`1 \| 2 \| 3`	Column span for bento layouts (md+ breakpoint)
`textColor`	`"light" \| "dark"`	Override text color (use `"light"` over dark images)

FeatureGridAnimation

Field	Type	Description
`heading`	`AnimationConfig?`	Animation for heading block
`cards`	`AnimationConfig?`	Stagger animation for cards

Notes

icon and image are mutually rendered — use one per card.
backgroundImage takes priority — the card switches to a full-bleed flex-end layout.
colSpan applies at the md breakpoint and above; on mobile all cards are single column.
textColor: "light" overrides text to white for legibility over dark background images.
Dark mode: pass colorScheme="dark" or place inside a .dark ancestor.