Features Grid

Showcase product or service features in a grid layout

npm run add FeaturesGrid

Use the FeaturesGrid component to showcase product or service features in a structured, visual grid layout with titles, descriptions, icons/images, and optional badges or links.

Free Components Get started quickly

Everything you need for your application from buttons and navigation elements to data tables and modals.

Blocks

Speed up development Preview ->

Speed up your development process with configurable, ready to use blocks of elements created from Webcore components.

Themes Dark/Light Themes

Use multiple themes out of the box, and you can easily create your own themes using CSS variables.

CLI Use command from your terminal

Bootstrap new projects, update your configurations or easily pull in new blocks.

Unlock code

---
import vscodeIcon from './icons/vscode.svg?raw'

const gridItems = [{
    badge: {
        text: 'Free Components',
        icon: vscodeIcon,
        small: true
    },
    title: 'Get started quickly',
    description: 'Everything you need for your app...',
    secondary: true,
    img: {
        src: '/img/get-started.png',
        alt: 'How to get started',
        width: 500,
        height: 250
    }
}, { ... }, { ... }, { ... }]
---

<FeaturesGrid items={gridItems} />

You can customize your FeaturesGrid component through a single items prop which accepts a number of properties. You can use Badge component specific-props within the badge property, and also define additional properties on your items using CardProps.

Secondary Layout

By default, the grid will start with a wide grid item followed by a smaller one. This order can be switched using the secondary prop on the component:

Free Components Get started quickly

Everything you need for your application from buttons and navigation elements to data tables and modals.

Blocks

Speed up development Preview ->

Speed up your development process with configurable, ready to use blocks of elements created from Webcore components.

Themes Dark/Light Themes

Use multiple themes out of the box, and you can easily create your own themes using CSS variables.

CLI Use command from your terminal

Bootstrap new projects, update your configurations or easily pull in new blocks.

Unlock code

<FeaturesGrid
    items={gridItems}
    secondary={true}
/>

API

Unlock code

type FeaturesGridProps = {
    items: ({
        badge?: {
            text: string
            icon?: string
        } & BadgeProps
        link?: {
            text: string
            href: string
            icon?: string
            target?: '_self'
                | '_blank'
                | '_parent'
                | '_top'
                | '_unfencedTop'
        }
        img: {
            src: string
            alt: string
            width: number
            height: number
            lazy?: boolean
        }
        title: string
        description: string
    } & Pick<CardProps, 'compact' | 'secondary'>)[]
    secondary?: boolean
    className?: string
}

Please see the documentation of the Badge component for the BadgeProps type. For CardProps, please consult the documentation of the Card component

Prop	Purpose
`items`	Sets the items for the features grid.
`items.badge.text`	Adds a badge on top of the grid item.
`items.badge.icon`	Sets an icon for the badge.
`items.link.text`	Sets a link next to the title.
`items.link.href`	Sets an anchor for the link.
`items.icon`	Sets an icon for the link.
`items.link.target`	Sets the target of the link.
`items.img.src`	Sets an image under the description.
`items.img.alt`	Sets an alternate text for the image.
`items.img.width`	Sets the width of the image.
`items.img.height`	Sets the height of the image.
`items.img.lazy`	Set to `true` to enable lazy loading for the image.
`items.title`	Sets the title of the grid item.
`items.description`	Sets the description of the grid item.
`secondary`	Sets the secondary layout for the grid.
`className`	Pass additional CSS classes for the `FeaturesGrid` component.