Tiles with Icons

Display links in a grid format

npm create webcore@latest add Tiles

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 an optional link for the tile. In case there is no link, the tile will be rendered as a static element without hover effect.
• target: Sets the target of the link. Can be a valid a tag target.

Subtext

The tile can be accompanied by a subtext, displayed below the label. The subtext can be set using the subText property on each tile:

<Tiles
    items={[{
        icon: 'home',
        label: 'Home',
        subText: 'Explore latest'
        href: '#'
    }, { ... }, { ... }, { ... }]}
/>

Badges

You can also optionally add badges to tiles. Badges will be displayed at the top-right corner of each tile. The badge can be set using the badge property:

<Tiles
    items={[{
        icon: 'github',
        label: 'GitHub',
        subText: 'Star us on GitHub'
        href: 'github.com/Frontendland/webcoreui',
        badge: {
            text: '★ 123 stars',
            theme: 'warning',
            transparent: true
        }
    }, { ... }, { ... }, { ... }]}
/>

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?: 0 | 1 | 2 | 3 | 4
    items: {
        label: string
        subText?: string
        href?: string
        target?: '_self'
            | '_blank'
            | '_parent'
            | '_top'
            | '_unfencedTop'
        icon?: string
        badge?: {
            text: string
            icon?: string
        } & BadgeProps
    }[]
}