Tile

Class names

The width class names start with tile. They can be used for creating tile-like elements for dashboards.

Class	Description
tile-sm	Small size container.
tile-md	Medium size container.
tile-lg	Large size container.
tile-xl	Extra large size container.
tile-double-sm	Small size, double width container.
tile-double-md	Medium size, double width container.
tile-double-lg	Large size, double width container.
tile-double-xl	Extra large, double width size container.
tile-auto-sm	Small size, auto width container.
tile-auto-md	Medium size, auto width container.
tile-auto-lg	Large size, auto width container.
tile-auto-xl	Extra large, auto width size container.

Examples

<div class="tile-sm bg-primary text-primary-foreground">Small</div>
<div class="tile-md bg-primary text-primary-foreground">Medium</div>
<div class="tile-lg bg-primary text-primary-foreground">Large</div>
<div class="tile-xl bg-primary text-primary-foreground">Extra Large</div>

Double width

<div class="tile-double-sm bg-primary text-primary-foreground">Small Double</div>
<div class="tile-double-md bg-primary text-primary-foreground">Medium Double</div>
<div class="tile-double-lg bg-primary text-primary-foreground">Large Double</div>
<div class="tile-double-xl bg-primary text-primary-foreground">Extra Large Double</div>

Auto width

<div class="tile-auto-sm bg-primary text-primary-foreground">Small Auto</div>
<div class="tile-auto-md bg-primary text-primary-foreground">Medium Auto</div>
<div class="tile-auto-lg bg-primary text-primary-foreground">Large Auto</div>
<div class="tile-auto-xl bg-primary text-primary-foreground">Extra Large Auto</div>