# Tile Group

> Entry tiles in a ruled grid on a sky band: a headline, a line of supporting text and an arrow to the destination, with no cards or gaps between them.

Source: https://ritla.app/ui/tile-group

## Installation

Installing from the registry is coming soon. Until then, these are the commands you will run.

```bash
npx ritla add tile-group
```

With the shadcn CLI instead:

```bash
npx shadcn@latest add @ritla/tile-group
```

## Usage

```tsx
import { ButtonCard } from "@/components/ui/button-card";
import { TileGroup } from "@/components/ui/tile-group";

<TileGroup label="Start here">
  <ButtonCard variant="tile" headline="Browse components" supportingText="Ready for both directions." render={<a href="/components" />} />
  <ButtonCard variant="tile" headline="Design in Figma" supportingText="The same tokens, on your canvas." render={<a href="/figma" />} />
  <ButtonCard variant="tile" headline="Scan your site free" supportingText="Find what mirroring leaves behind." render={<a href="/scan" />} />
</TileGroup>
```

## Examples

### Two columns, two rows

`columns={2}` with four tiles: a rule between the rows and between the tiles in a row. When narrow, one column with a rule above each tile after the first.

Live preview: https://ritla.app/_kanz/preview/ltr/tile-group-columns

## API reference

### `TileGroup`

The tiles are `ButtonCard variant="tile"`, each a link.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` | `string` | None | Names the group for screen readers (“Start here”). The group is a navigation landmark. |
| `columns` | `2 \| 3 \| 4` | `3` | Figma's Columns: the number of columns once the group is 768px wide, one column below that. |
| `children` | `ReactNode` | None | The tiles. |

## Accessibility

Keyboard (keys as in left-to-right; arrows swap in right-to-left):

- `Tab`: From one tile to the next, in reading order.

ARIA:

- The group is a `nav` named by `label`; each tile is a link named by its headline and described by its supporting text.
- The focus ring is drawn inside the tile, so the neighbouring tile never covers it.

## Arabic and RTL notes

Mirrors:

- The first tile sits on the right, and the rules between tiles sit at their inline start.
- The arrow at the start of the tile's foot points left and nudges that way on hover or focus.

Does not mirror:

- The rows still run top to bottom.

Numerals: The tile itself shows no digits; your text follows the numerals setting.

Arabic typography: Headline `body-20` Medium, supporting text `body-14`.

Mixed-direction text: Headline and text in the page language; isolate Latin identifiers inside Arabic text.