Citizen support
Citizen services
Report incidents, request certificates, and find safety information.
Layout component
Feature Grid
Arrange feature cards, services, solutions, or benefits in a responsive equal-height grid.
14 props1 slots0 outputsTheme readyResponsive
Interactive playground
Configure Feature Grid
Change any prop and inspect the server-rendered component immediately.
Live preview
Directory
Station directory
Locate offices, jurisdictions, contacts, and public service hours.
Verified
Public updates
Publish official alerts, notices, advisories, and verified information.
<FeatureGrid
items='[
{
"id": "feature-grid-0-1",
"key": "feature-grid-0-1",
"value": "primary",
"label": "Primary workflow",
"title": "Primary workflow",
"description": "A clean default configuration for everyday product interfaces.",
"text": "A configurable sample message.",
"href": "#feature-grid-demo",
"actionHref": "#feature-grid-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": true,
"selected": true,
"checked": true,
"disabled": false,
"outgoing": false,
"open": true,
"number": 1,
"count": 16,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 1",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
},
{
"id": "feature-grid-0-2",
"key": "feature-grid-0-2",
"value": "secondary",
"label": "Additional option",
"title": "Supporting example",
"description": "A clean default configuration for everyday product interfaces.",
"text": "Another configurable message.",
"href": "#feature-grid-demo",
"actionHref": "#feature-grid-demo",
"actionLabel": "View details",
"icon": "icon-[lucide--sparkles]",
"iconClass": "icon-[lucide--sparkles]",
"variant": "primary",
"status": "Active",
"time": "09:30",
"current": false,
"selected": false,
"checked": false,
"disabled": false,
"outgoing": true,
"open": true,
"number": 2,
"count": 32,
"percentage": 72,
"color": "#7c3aed",
"target": "_self",
"ariaLabel": "Open primary workflow 2",
"items": [
{
"label": "Nested option A",
"value": "nested-a"
},
{
"label": "Nested option B",
"value": "nested-b"
}
],
"links": [
{
"label": "Documentation",
"href": "#documentation"
},
{
"label": "API reference",
"href": "#api-reference"
}
],
"values": [
"Included",
"Standard"
]
}
]'
align="start"
label="Feature Grid"
/>Live examples
Designed for real product surfaces
Compare configurations and resize the browser to check responsive behavior.
Recommended
01
Three-column service grid
Arrange services or capabilities as equal-height responsive cards.
Live preview
Citizen support
Citizen services
Report incidents, request certificates, and find safety information.
Directory
Station directory
Locate offices, jurisdictions, contacts, and public service hours.
Verified
Public updates
Publish official alerts, notices, advisories, and verified information.
<FeatureGrid
items='[
{
"icon": "icon-[lucide--shield-check]",
"eyebrow": "Citizen support",
"title": "Citizen services",
"description": "Report incidents, request certificates, and find safety information.",
"href": "#citizen-services",
"actionLabel": "Explore services",
"badge": "Public",
"color": "primary",
"variant": "default",
"hover": "lift"
},
{
"icon": "icon-[lucide--map-pin]",
"eyebrow": "Directory",
"title": "Station directory",
"description": "Locate offices, jurisdictions, contacts, and public service hours.",
"href": "#station-directory",
"actionLabel": "Find a station",
"badge": "Directory",
"color": "info",
"variant": "soft",
"hover": "border"
},
{
"icon": "icon-[lucide--radio-tower]",
"eyebrow": "Verified",
"title": "Public updates",
"description": "Publish official alerts, notices, advisories, and verified information.",
"href": "#public-updates",
"actionLabel": "View updates",
"badge": "Live",
"color": "success",
"variant": "gradient",
"hover": "glow"
}
]'
gap="lg"
align="start"
label="Feature Grid"
/>Compact
02
Compact four-column grid
Use smaller gaps and four columns for short benefit or capability cards.
Live preview
Citizen support
Citizen services
Report incidents, request certificates, and find safety information.
Directory
Station directory
Locate offices, jurisdictions, contacts, and public service hours.
Verified
Public updates
Publish official alerts, notices, advisories, and verified information.
Certificates
Request and track certificates online.
<FeatureGrid
size="sm"
items='[
{
"icon": "icon-[lucide--shield-check]",
"eyebrow": "Citizen support",
"title": "Citizen services",
"description": "Report incidents, request certificates, and find safety information.",
"href": "#citizen-services",
"actionLabel": "Explore services",
"badge": "Public",
"color": "primary",
"variant": "default",
"hover": "lift"
},
{
"icon": "icon-[lucide--map-pin]",
"eyebrow": "Directory",
"title": "Station directory",
"description": "Locate offices, jurisdictions, contacts, and public service hours.",
"href": "#station-directory",
"actionLabel": "Find a station",
"badge": "Directory",
"color": "info",
"variant": "soft",
"hover": "border"
},
{
"icon": "icon-[lucide--radio-tower]",
"eyebrow": "Verified",
"title": "Public updates",
"description": "Publish official alerts, notices, advisories, and verified information.",
"href": "#public-updates",
"actionLabel": "View updates",
"badge": "Live",
"color": "success",
"variant": "gradient",
"hover": "glow"
},
{
"icon": "icon-[lucide--file-check-2]",
"title": "Certificates",
"description": "Request and track certificates online.",
"href": "#certificates",
"color": "warning"
}
]'
columns="4"
gap="sm"
align="center"
variant="soft"
label="Compact example"
/>Advanced
03
Auto-fit feature collection
Let cards wrap automatically according to a minimum useful width.
Live preview
Citizen support
Citizen services
Report incidents, request certificates, and find safety information.
Directory
Station directory
Locate offices, jurisdictions, contacts, and public service hours.
Verified
Public updates
Publish official alerts, notices, advisories, and verified information.
<FeatureGrid
size="lg"
items='[
{
"icon": "icon-[lucide--shield-check]",
"eyebrow": "Citizen support",
"title": "Citizen services",
"description": "Report incidents, request certificates, and find safety information.",
"href": "#citizen-services",
"actionLabel": "Explore services",
"badge": "Public",
"color": "primary",
"variant": "default",
"hover": "lift"
},
{
"icon": "icon-[lucide--map-pin]",
"eyebrow": "Directory",
"title": "Station directory",
"description": "Locate offices, jurisdictions, contacts, and public service hours.",
"href": "#station-directory",
"actionLabel": "Find a station",
"badge": "Directory",
"color": "info",
"variant": "soft",
"hover": "border"
},
{
"icon": "icon-[lucide--radio-tower]",
"eyebrow": "Verified",
"title": "Public updates",
"description": "Publish official alerts, notices, advisories, and verified information.",
"href": "#public-updates",
"actionLabel": "View updates",
"badge": "Live",
"color": "success",
"variant": "gradient",
"hover": "glow"
}
]'
gap="xl"
minItemWidth="18rem"
align="end"
maxWidth="wide"
variant="panel"
label="Advanced example"
/>Component API
Props and configuration
All content and behavior shown above is supplied through these props and slots.
| Prop | Type | Default | Required |
|---|---|---|---|
size | string | "default" | No |
color | string | "primary" | No |
items | unknown[] | [] | No |
columns | number | 3 | No |
tabletColumns | number | 2 | No |
mobileColumns | number | 1 | No |
gap | string | "md" | No |
minItemWidth | string | "" | No |
equalHeight | boolean | true | No |
align | string | "stretch" | No |
maxWidth | string | "full" | No |
variant | string | "default" | No |
label | string | "Features" | No |
class | string | "" | No |