Tile

A versatile component used to display content in a card-like format, often used for selection or feature highlights.

Usage

The Tile component is used to present information or options in a structured, visually distinct container. It supports compound components for flexible layout.

import { Tile } from "@elemnts-ui/react";

<Tile>
  <Tile.Content>
    <Tile.Title>Settings</Tile.Title>
    <Tile.Description>...</Tile.Description>
  </Tile.Content>
</Tile>;

Variants

Change the visual appearance using the variant prop

Orientation

Tiles can be oriented horizontally or vertically.

API Reference

Root

Prop	Type	Default
variant	`"primary" \| "secondary" \| "tertiary"`	`"primary"`
size	`"xs" \| "sm" \| "md" \| "lg" \| "xl"`	`"md"`
orientation	`"horizontal" \| "vertical"`	`"horizontal"`
selected	`boolean`	`false`

Content

Prop	Type	Default
asChild	`boolean`	`false`

Title

Prop	Type	Default
asChild	`boolean`	`false`

Description

Prop	Type	Default
asChild	`boolean`	`false`

Indicator

Prop	Type	Default
asChild	`boolean`	`false`

Control

Prop	Type	Default
asChild	`boolean`	`false`