# Tiles

The Tiles component creates a responsive layout of fixed-width elements that
automatically wrap based on available space. It's perfect for displaying a
collection of similarly-sized items in a grid format.

## Design & usage guidelines

Use Tiles when you need to:

* Display a collection of similar content (like cards, images, or content
  blocks)
* Create a responsive grid that adapts to different screen sizes
* Maintain consistent sizing across items while maximizing space usage

### When to use

* Photo galleries or image collections
* Card-based layouts
* Feature showcases
* Product grids
* Dashboard widgets

### When not to use

* For single-column layouts (use [Stack](../Stack/Stack.md) instead)
* For when you want items to be their natural size (use
  [Cluster](../Cluster/Cluster.md) instead)

## Content guidelines

Content within Tiles should:

* Be consistent in structure across tiles
* Have similar visual weight
* Be self-contained within each tile
* Not rely on specific positioning relative to other tiles

## Implementation

The Tiles component provides two key properties to control its layout:

### minSize

Controls the minimum width of each tile. Tiles will automatically flow to the
next row when they can't maintain this minimum width.

```tsx
import React from "react";
import { Tiles } from "@jobber/components/Tiles";
import { Card } from "@jobber/components/Card";
import { Text } from "@jobber/components/Text";
import { Box } from "@jobber/components/Box";
import { ContentBlock } from "@jobber/components/ContentBlock";

export function TilesMinSizeExample() {
  return (
    <ContentBlock maxWidth="100%">
      <Tiles minSize="30ch">
        <Box>
          <Card>
            <Box padding="base">
              <Text>First tile</Text>
            </Box>
          </Card>
        </Box>
        <Box>
          <Card>
            <Box padding="base">
              <Text>Second tile</Text>
            </Box>
          </Card>
        </Box>
      </Tiles>
    </ContentBlock>
  );
}
```

### space

Controls the gap between tiles. Uses Jobber's spacing scale:

```tsx
import React from "react";
import { Tiles } from "@jobber/components/Tiles";
import { Card } from "@jobber/components/Card";
import { Text } from "@jobber/components/Text";
import { Box } from "@jobber/components/Box";
import { ContentBlock } from "@jobber/components/ContentBlock";

export function TilesGapExample() {
  return (
    <ContentBlock maxWidth="100%">
      <Tiles gap="largest">
        <Box>
          <Card>
            <Box padding="base">
              <Text>First tile</Text>
            </Box>
          </Card>
        </Box>
        <Box>
          <Card>
            <Box padding="base">
              <Text>Second tile</Text>
            </Box>
          </Card>
        </Box>
      </Tiles>
    </ContentBlock>
  );
}
```

### Alignment

The Tiles component supports vertically aligning the tiles within the container.

```tsx
import React from "react";
import { Tiles } from "@jobber/components/Tiles";
import { Card } from "@jobber/components/Card";
import { Text } from "@jobber/components/Text";
import { Box } from "@jobber/components/Box";
import { ContentBlock } from "@jobber/components/ContentBlock";

export function TilesAlignmentExample() {
  return (
    <ContentBlock maxWidth="100%">
      <Box border="base" borderColor="border" padding="small">
        <Tiles gap="small" align="center" minSize="15ch">
          <Card>
            <Box height={150} width={90} padding="base" justifyContent="center">
              <Text>First tile</Text>
            </Box>
          </Card>
          <Card>
            <Box height={50} width={90} padding="base" justifyContent="center">
              <Text>Second tile</Text>
            </Box>
          </Card>
          <Card>
            <Box height={20} width={90} padding="base" justifyContent="center">
              <Text>Third tile</Text>
            </Box>
          </Card>
          <Card>
            <Box height={35} width={90} padding="base" justifyContent="center">
              <Text>Forth tile</Text>
            </Box>
          </Card>
        </Tiles>
      </Box>
    </ContentBlock>
  );
}
```

## Accessibility

The Tiles component:

* Maintains a logical reading order for screen readers
* Preserves content structure within each tile
* Allows keyboard navigation through tile content

## Related components

* [Stack](../Stack/Stack.md) - For vertical stacking of elements


## Props

### Web

| Prop | Type | Required | Default | Description |
|------|------|----------|---------|-------------|
| `align` | `"center" | "end" | "start"` | No | `start` | The vertical alignment  of the tiles within the container. |
| `ariaAttributes` | `AriaAttributes` | No | — | Standard HTML aria attributes. Accepts all standard HTML aria attributes. |
| `as` | `CommonAllowedElements` | No | `div` | The HTML tag to render the container as. Defaults to `div`. |
| `autoWidth` | `boolean` | No | `false` | Whether to allow the tiles to take the width of the content. Defaults to 100% |
| `dataAttributes` | `{ [key: `data-${string}`]: string; }` | No | — | Standard HTML data attributes. Accepts anything in a {{"data-key":"value"}} format. |
| `gap` | `GapSpacing` | No | `base` | The amount of space between the tiles. Semantic tokens are available. |
| `id` | `string` | No | — | Standard HTML id attribute. |
| `minSize` | `string` | No | `30ch` | The minimum size of the tiles. |
| `role` | `AriaRole` | No | — | Standard HTML role attribute. |
| `UNSAFE_className` | `{ container?: string; }` | No | — | **Use at your own risk:** Custom class names for specific elements. This should only be used as a **last resort**. Us... |
| `UNSAFE_style` | `{ container?: CSSProperties; }` | No | — | **Use at your own risk:** Custom style for specific elements. This should only be used as a **last resort**. Using th... |