Grid with Icons

Organize content into a grid layout with icons

Use the GridWithIcons component to organize content into a grid layout, pairing each item with an icon to enhance clarity and visual appeal. They improve visual hierarchy, and can help structure information. Use them to showcase product features, services, or categories.

---
const items = [{
    icon: 'components',
    title: 'Grid with Icons',
    text: 'Use the <code>GridWithIcons</code> block...'
}, { ... }, { ... }]
---

<GridWithIcons items={items} />

The GridWithIcons component expects an items prop that defines the grid items as an array of objects in the following format:

• icon: Sets an optional icon for the grid item. It can be an icon type for the Astro component, or an SVG string for Svelte/React components. For available icon types, visit the documentation of the Icon component.
• title: Sets an optional title for the grid item.
• text: Sets the text of the grid item. The text supports HTML tags.

Columns

By default, the GridWithIcons component will use a three column layout. This can be changed by specifying the number of columns using the columns prop:

<GridWithIcons
    columns={4}
    items={[ ... ]}
/>

Column can go up to a maximum of 4. If you need to have more columns, you can add the following css rules to your grid-with-icons.module.scss file:

@use 'webcoreui/config' as *;

@include media(sm) {
    // For a six column layout, add the following:
    .sm-6 {
        grid-template-columns: repeat(6, minmax(0, 1fr));
    }
}

You’ll also need to update your type definitions in gridWithIcons.ts to avoid type errors:

export type GridWithIconsProps = {
    items: {
        icon?: IconProps['type'] | string
        title?: string
        text: string
    }[]
   columns?: 1 | 2 | 3 | 4 | null
   columns?: 1 | 2 | 3 | 4 | 6 | null
    alignment?: 'center' | 'right' | null
    iconWithBackground?: boolean
    secondary?: boolean
    className?: string
}

Alignments

The component also supports center and right alignments. To change the alignment, set the alignment prop to center or right:

<GridWithIcons
    items={items}
    alignment="center"
/>

<GridWithIcons
    items={items}
    alignment="right"
/>

Types

You can further customize the appearance of your GridWithIcons component using two additional props:

• iconWithBackground: Sets a solid background for the icons.
• secondary: Displays icons next to the grid item titles.

<GridWithIcons
    items={items}
    iconWithBackground={true}
/>

<GridWithIcons
    items={items}
    secondary={true}
/>

API

type GridWithIconsProps = {
    items: {
        icon?: string
        title?: string
        text: string
    }[]
    columns?: 1 | 2 | 3 | 4
    alignment?: 'center' | 'right'
    iconWithBackground?: boolean
    secondary?: boolean
    className?: string
}