Tile

Alternatives

Usage

The Tile component can be used by itself or inside a TileStack. Content is passed to the tile as children.

The tile component does not have an opinion on how text is rendered, it is the consumers responsibility.

<Tile>
  <Text>Simple tile</Text>
</Tile>

A tile will fill the container it's in so it's the consumer's responsibility to allocate containers with approriate widths and heights.

Interactivity

The interactivity of a tile depends on whether it's displaying contextual information or acting as an entry point for a more detailed interaction.

By default tiles are not interactive. The onClick or href props can be used to make them behave interactively.

InteractiveText

When a tile is interactive, the entire tile surface responsds to hover/active events. In addition to that, the Tile.InteractiveText primitive can be used inside the tile to responsd to these events.

<Tile>
  <Tile.InteractiveText>Interactive text</Tile.InteractiveText>
</Tile>

For convenience, the InteractiveText component takes all the props a normal Text component does. See below examples on how to compose a tile using InteractiveText.

onClick

The onClick prop makes the entire tile surface a clickable target.

<Tile onClick={() => alert('Clicked')}>
  <Stack gap="large">
    <Stack>
      <Text color="muted">Twitter handle</Text>
      <Text weight="medium">@david_batman</Text>
    </Stack>
    <Tile.InteractiveText>Update</Tile.InteractiveText>
  </Stack>
</Tile>

href

The href prop makes the entire tile surface a clickable target.

<Tile href="#">
  <Stack gap="large">
    <Stack>
      <Text color="muted">Twitter handle</Text>
      <Text weight="medium">@david_batman</Text>
    </Stack>
    <Tile.InteractiveText>Go to profile</Tile.InteractiveText>
  </Stack>
</Tile>

A link tile supports all the usual anchor props. For example the target prop:

<Tile href="#" target="_blank">
  <Tile.InteractiveText>Opens link in a new tab</Tile.InteractiveText>
</Tile>

A tile can either be clickable or be a link, not both.

Density

The density of a tile is defined as the white space between the border and the content area. It's set through the density prop and supports three values: compact, regular, spacious.

The default density of a tile is regular.

<Stack gap="large">
  <Tile density="compact">Compact</Tile>
  <Tile>Regular</Tile>
  <Tile density="spacious">Spacious</Tile>
</Stack>

All tiles in a stack should have the same density.

Tile stack

A group of related tiles can be renderred together inside a TileStack.

<TileStack>
  <Tile>Tile 1</Tile>
  <Tile>Tile 2</Tile>
  <Tile>Tile 3</Tile>
</TileStack>

Interactive tiles can also be used in a TileStack.

<TileStack>
  <Tile href="#">
    <Tile.InteractiveText>Tile 1</Tile.InteractiveText>
  </Tile>
  <Tile href="#">
    <Tile.InteractiveText>Tile 2</Tile.InteractiveText>
  </Tile>
  <Tile href="#">
    <Tile.InteractiveText>Tile 3</Tile.InteractiveText>
  </Tile>
</TileStack>