Balance Logo
Balance
Reckon Design System

Tile

Tiles are highly flexible component to display single piece of information of a subject.
Install
pnpm add @reckon-web/tile
Import usage
import {
Tile,
TileStack
} from '@reckon-web/tile';
  • Code
  • API

Tiles are used to display context information to help user complete a task or act as an entry point for more detail. They can also be used to display a list of loosely connected options to help the user gather information quickly at a glance.

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.

Edit in Playroom

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.

href

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

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

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.

All tiles in a stack should have the same density.

Tile stack

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

Interactive tiles can also be used in a TileStack.

Copyright © 2022 Reckon. Designed and developed in partnership with Thinkmill.
Bitbucket logoJira software logoConfluence logo