WaffleGrid

Library

Allium Design Systemweb-only

Repository

github.com/telus/allium-design-system

Package

npmjs.com/package/@telus-uds/ds-allium

Package version

1.14.0

Loading...

<WaffleGrid items={[1, 2, 3, 4, 5, 6].map((_, i) => ({ image: 'https://images.ctfassets.net/3cqlnin176yn/6fbpuI7xGEQwM0sueuEMmy/8768c289e22006227aa1ebf64bd05cf4/stevie.jpg', imageAltText: 'The image alt text', href: `//telus.com?item=${i}`, text: 'TELUS' }))} />

<WaffleGrid
  items={[1, 2, 3, 4, 5, 6].map((_, i) => ({
    image:
      'https://images.ctfassets.net/3cqlnin176yn/6fbpuI7xGEQwM0sueuEMmy/8768c289e22006227aa1ebf64bd05cf4/stevie.jpg',
    imageAltText: 'The image alt text',
    href: `//telus.com?item=${i}`,
    text: 'TELUS'
  }))}
/>

Introduction

import { WaffleGrid } from '@telus-uds/ds-allium'

A WaffleGrid is used to show items in a waffle-like manner with borders surrounding the element.

Guidance

info

This component is still in beta, it may change in the future.

Use when you want an image and a text displayed under the image, as a link, to have a separating border either on the right or left and/or under the image/text

• Desktop/large view will have 6 items in a row
• Tablet/medium view will have 3 items in a row
• Mobile/small view will have 2 items in a row

Using custom image content

Note that you can use custom image components by passing arbitrary JSX (e.g. NextJS Image) in the item image property instead of a string URL:

Loading...

<WaffleGrid items={[1, 2, 3, 4, 5, 6].map((_, i) => ({ image: ( <OptimizeImage contentfulAssetUrl="https://images.ctfassets.net/3cqlnin176yn/1GfIHDOb3n3uO3wVnKjHZ2/3a3c59c5caa91a315da1b3804cdf0b1b/Alpaca-lets-make-the-future-friendly-Hero-Banner-Tile.jpg" alt="alpacas" /> ), imageAltText: 'The image alt text', href: `//telus.com?item=${i}`, text: 'TELUS' }))} />

<WaffleGrid
  items={[1, 2, 3, 4, 5, 6].map((_, i) => ({
    image: (
      <OptimizeImage
        contentfulAssetUrl="https://images.ctfassets.net/3cqlnin176yn/1GfIHDOb3n3uO3wVnKjHZ2/3a3c59c5caa91a315da1b3804cdf0b1b/Alpaca-lets-make-the-future-friendly-Hero-Banner-Tile.jpg"
        alt="alpacas"
      />
    ),
    imageAltText: 'The image alt text',
    href: `//telus.com?item=${i}`,
    text: 'TELUS'
  }))}
/>

Future iterations

• Consider what should happen given a very long text to display
• Consider accepting "node" properties to be flexible to display more than just a link

Accessibility

Currently this component does not apply any semantic roles to the members or container of the grid.

Platform considerations

This component is currently only supported on web.

Props

Name	Type	Default	Description
items*	Array<{ image: union, imageAltText: string, text: string, href: string }>		The image and the link to display. 'items' should be an array of objects with the following keys:

Figma

Variants

This component does not have any stylistic variants.

Feedback

• Spotted a problem with this component? Raise an issue on GitHub
• See any existing issues for this component
• Contact the team on slack in #ds-allium-support