Tiles with Icons

Display links in a grid format

Use the Tiles component to display navigation links in a grid format to structure information clearly, allowing users to scan and find content quickly. Tiles are response, but their column count can also be set explicitly. They can be created with or without icons:

<Tiles
    items={[
        { icon: astro, label: 'Astro', href: '' },
        { icon: svelte, label: 'Svelte', href: '' },
        { icon: react, label: 'React', href: '' },
        { icon: terminal, label: 'CLI', href: '' }
    ]}
/>

The Tiles component expects an items prop that defines the links in the form of an array of objects. Each object can have the following properties:

• icon: To specify an icon, either import an SVG string and pass it to the icon property, or use an existing icon type in Astro as a string. For available icon types, see the API documentation of the Icons component. Icons are optional.
• label: Sets a label for the tile.
• href: Sets the link for the tile.
• target: Sets the target of the link. Can be a valid a tag target.

Columns

By default, the Tiles component will use a two column layout. The exceptions from this is if the tiles has 1 or 3 items. If there is only one element, it’ll display the tile using a single column. For exactly 3 items, it’ll display the tiles in a 3 column layout. An explicit column can also be specified using the columns prop:

<Tiles
    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 Tiles component:

@use 'webcoreui/config' as *;

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

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

import type { ButtonProps, IconProps } from 'webcoreui/astro'

export type TilesProps = {
   columns?: 0 | 1 | 2 | 3 | 4
   columns?: 0 | 1 | 2 | 3 | 4 | 6
    items: {
        label: string
        href: string
        target?: ButtonProps['target']
        icon?: IconProps['type'] | string
    }[]
}

API

type TilesProps = {
    columns?: number
    items: {
        label: string
        href: string
        target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
        icon?: IconProps['type'] | string
    }[]
}