--- meta: title: Tile description: Tiles are flexible list items for displaying structured content with images, captions, descriptions, properties, and actions in a horizontal layout. layout: component --- Tiles are versatile components designed for building lists of structured content. They provide a consistent, responsive layout for displaying items with associated metadata, images, properties, and actions. Tiles can be clickable links or static containers, making them ideal for user lists, product catalogs, file browsers, and more. ```html:preview

Last seen 2h ago

Active now

Contact

Last seen 1d ago

``` ## Examples ### Basic Tile A basic tile displays a caption and description. Tiles automatically apply padding when they contain structured content. ```html:preview ``` ### Tile with Image Use the `image` slot to add an image or icon to the left side of the tile. This is commonly used for avatars, logos, or file icons. ```html:preview

``` ### Clickable Tiles Add the `href` attribute to make a tile clickable. The tile will render as an anchor tag and display hover effects. ```html:preview

``` ### Tiles with Properties Use the `properties` slot to display metadata on the right side of the tile. The `zn-tile-property` component provides consistent styling for property labels and values. ```html:preview

In Progress

Completed

``` ### Multiple Properties Add multiple `zn-tile-property` components to display several pieces of metadata in a horizontal layout. ```html:preview

2 hours ago

John Smith

5 people

``` ### Tiles with Actions Use the `actions` slot to add buttons or other interactive elements to the right side of the tile. ```html:preview

Run Now

``` ### Properties with Actions Combine both properties and actions for comprehensive tile layouts. ```html:preview

Marketing

Manager

Message

Engineering

Senior Dev

Message

``` ### User List A complete example showing a team member list with avatars, roles, and status information. ```html:preview

Last seen 2h ago

Active now

Last seen 1d ago

Last seen 3h ago

``` ### File Browser Example showing how to use tiles for a file browser interface. ```html:preview

Today

Yesterday

2 days ago

Last week

``` ### Inline Layout Use the `inline` attribute to display the caption and description on the same line, separated by a small gap. ```html:preview

``` ### Flush Tiles The `flush` attribute removes all padding from the tile, while `flush-x` and `flush-y` remove horizontal and vertical padding respectively. ```html:preview

``` ### Product Catalog Example showing tiles used for a product catalog with images and pricing. ```html:preview

$299

In Stock

Add to Cart

$399

Low Stock

Add to Cart

$79

In Stock

Add to Cart

``` ### Custom Slot Content Use the default slot for completely custom tile content when you don't need the structured layout. ```html:preview

Custom Content

You can put anything in the default slot

Active

``` ### Data URI Links Use the `data-uri` attribute instead of `href` for internal navigation or custom click handling. Combine with `data-target` and `gaid` for tracking and analytics. ```html:preview

``` ## Usage Notes ### Responsive Behavior Tiles are responsive and adapt to different screen sizes. On smaller screens (below `md` breakpoint): - Properties in the `properties` slot are hidden automatically - The tile maintains its core caption, description, and actions - This ensures tiles remain functional on mobile devices ### Layout Structure When using structured content (caption, description, properties, or actions), the tile automatically: - Applies padding (`var(--zn-spacing-large)`) - Creates a horizontal layout with left and right sections - The left section contains the image and content (max-width: 400px on desktop, 320px on tablet) - The right section contains properties and actions (50% width, grows to fill space) ### Hover Effects When a tile has an `href` or `data-uri` attribute: - The cursor changes to pointer - On hover, the background changes to `var(--zn-color-neutral-100)` - The entire tile area becomes clickable ### Slot Behavior The tile uses different rendering logic based on slot usage: - If only the default slot is used, it renders the slot content directly - If any named slots (caption, description, properties, actions, image) are used, it switches to structured layout mode - The caption can be provided via attribute or via the `caption` slot ### Content Overflow Text content in tiles uses ellipsis overflow handling: - Captions and descriptions are truncated with ellipsis if too long - Properties have a max-width of 150px and use ellipsis overflow - The properties container has horizontal scrolling on overflow ## Tile Property Component The `zn-tile-property` component is designed to work within the `properties` slot of tiles. It provides consistent formatting for metadata. ### Properties - `caption` - The label for the property (e.g., "Status", "Modified", "Owner") - `description` - Optional description text (can also use default slot) - `icon` - Optional icon to display next to the property ### Example ```html:preview

Active

High

Jan 30, 2024

``` ## CSS Parts The following CSS parts are available for styling: - `caption` - The tile caption text - `description` - The tile description text - `image` - The image slot container - `properties` - The properties slot container - `actions` - The actions slot container ## CSS Custom Properties Tiles use the following CSS custom properties from the Zinc design system: - `--zn-spacing-large` - Padding around tile content - `--zn-spacing-medium` - Gap between image and content - `--zn-spacing-small` - Gap between action buttons - `--zn-spacing-2x-small` - Margin above description text - `--zn-color-neutral-100` - Hover background color - `--zn-text-heading` - Caption text color - `--zn-text-color` - Description text color - `--zn-font-size-medium` - Description font size