Features is a component for displaying a grid of feature items with icons, descriptions, and optional images.
Features
import { Features } from '@lobehub/ui/awesome';Features is a component for displaying a grid of feature items with icons, descriptions, and optional images.
import { Features } from '@lobehub/ui/awesome';| Property | Description | Type | Default |
|---|---|---|---|
| items | Array of feature items to display | FeatureItemType[] | - |
| columns | Number of columns in the grid | number | - |
| gap | Gap between grid items | number | string | - |
| maxWidth | Maximum width of the content | number | - |
| itemClassName | Class name for each feature item | string | - |
| itemStyle | Style for each feature item | CSSProperties | - |
| Property | Description | Type | Default |
|---|---|---|---|
| title | Title of the feature | string | - |
| description | Description of the feature | string | - |
| icon | Icon for the feature | IconProps['icon'] | - |
| image | URL of the image | string | - |
| imageType | Type of image styling | 'light' | 'primary' | 'soon' | - |
| imageStyle | Custom style for the image | CSSProperties | - |
| link | URL to navigate to when clicked | string | - |
| openExternal | Whether to open link in new tab | boolean | - |
| hero | Whether this is a hero feature (larger) | boolean | - |
| column | Custom column span | number | - |
| row | Custom row span | number | - |