Tile
An interactive, card-like surface that navigates to a destination or triggers a single action.
Overview
Tile is a single, self-contained interactive surface — think of it as a clickable card. It pairs a leading media slot with a title, an optional description, and a trailing icon, and it exposes the full hover / focus / pressed states you'd expect from a control.
It is built on the button primitive, so by default it renders a real <button> (keyboard focus, Enter/Space activation, and disabled all come for free). Use asChild to render it as a link instead.
One control, one action
The whole Tile is a single interactive element, so the title and description
are plain text (not headings) and together form its accessible name. Use a
Tile only when the entire surface maps to one action or destination — for a
surface with several independent actions, use a Card instead.
Anatomy & responsive shape
A Tile changes shape with the viewport:
- Above 768px it is a horizontal rectangle that grows to a max width of 856px and up to 140px tall.
- At 768px and below it stacks to 288px wide (media becomes a full-width banner, with the title/description and chevron on the row below) and grows with its content up to 400px tall.
In both layouts the height grows with content up to that cap, then clips — see Content limits.
Examples
Default
Leading media, a title, a description, and a trailing chevron. Hover, tab to, and press it to see the live states.
Media outline
mediaOutline swaps the media box's tinted fill for a white fill with a hairline border. It only affects the media box, never the Tile itself.
Without leading media
Omit leadingMedia and the media slot is not rendered — it reserves no space.
Title only
description is optional.
Without the trailing chevron
Pass trailingIcon={null} to hide it.
As a link
Pass asChild with an anchor (or a Next.js Link). The Tile's layout is injected into that element, so the whole surface becomes one navigable link.
Disabled
The button variant supports the native disabled attribute; a disabled Tile drops its hover and press effects.
Content limits
To keep a Tile within its capped height, the title is capped at 40 characters and the description at 90 characters. Longer text is truncated with an ellipsis rather than growing the Tile. Author content within these limits so nothing is unexpectedly cut.
Props
Prop
Type
Import
import { Tile } from '@im/integral/components/styled';