Tile is a fundamental layout component used as a generic container to build the base of panels, cards, lists and other content components that group information.
Tiles can include images, text, buttons, links, badges, icons, etc. Tile has styles but no functional logic in itself, and it is also used to provide common styles for TileInteractive and TileToggleGroup which are interactive elements.
Border
<div className="flex gap-3 justify-center bg-grey-100 p-3 w-full">
<Tile className="size-25" />
<Tile className="size-25" border />
</div>
Border Radius
<div className="flex gap-3">
<Tile className="size-25" border />
<Tile borderRadius="sm" className="size-25" border />
<Tile borderRadius="md" className="size-25" border />
<Tile borderRadius="lg" className="size-25" border />
</div>
Color Scheme
You can pass in a colorScheme object to the Tile to customise the colours of the component. Defaults to { base: "grey1", accent: "blue2", interactive: "loContrast"}
ColorScheme is experimental and has been implemented only locally but you can read more about how it currently works and available options on the repository's github.
<div className="flex gap-3">
<Tile className="size-25" border colorScheme={{ base: 'blue1' }} />
<Tile className="size-25" border colorScheme={{ base: 'blue2' }} />
<Tile className="size-25" border colorScheme={{ base: 'purple2' }} />
<Tile className="size-25" border colorScheme={{ base: 'grey2' }} />
</div>
Example use case (Card)
<Tile
border
borderRadius='md'
className="w-80"
>
<article>
<Image src="https://picsum.photos/id/919/320/200" alt="Pine Forest" />
<div className="flex flex-col gap-4 px-3 py-4">
<Heading as="h2" size="xs">
Pine Forest
</Heading>
<Text>
Tall pine trees with slender trunks rise from a lush green forest floor.
</Text>
</div>
</article>
</Tile>