--- 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 compact, single-line rows (48px tall) that inherit table content typography, making them ideal for building structured lists: a leading value, optional inline values, and an optional chip or action on the right. The same flexible component covers everything from a plain phone number to a multi-value transaction row. ```html:preview Professional $9.95/mo Active Android In Use ``` ## Tile Row Variants A single tile adapts to a wide range of content. The leading `caption` is bold by default; add the `plain` attribute for the normal table-content weight. Values placed in the `properties` slot align to the right, and a chip or button in the `actions` slot pins to the far right. ```html:preview Row value Row value Row value Chip Professional $9.95/mo Active $9.95/mo Capture Auth [paypal-connector] Completed Capture Auth BrightCloud Android In Use ``` ### Emphasised Caption The leading caption renders bold by default to lead the row. Add `plain` when the first value should match the regular table-content weight (most data rows). ```html:preview BrightCloud BrightCloud ``` ## 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: - Renders as a single-line row with a minimum height of `48px`, vertically centred - Inherits the table content typography (`--zn-text-table-content-*`) - Applies horizontal padding (`var(--zn-base-gap)`) - Creates a horizontal layout: the leading image, caption and description sit on the left; properties and actions align to the right ### 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 kept on a single line and truncated with ellipsis if too long - The properties container hides its overflow to keep the row on a single line ## 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-text-table-content-*` - Row typography (font-size, line-height, weight, color) - `--zn-base-gap` - Horizontal padding around tile content - `--zn-spacing-large` - Gap between properties and between left/right sections - `--zn-spacing-small` - Gap between action buttons and image/content - `--zn-color-neutral-100` - Hover background color - `--zn-text-heading` - Bold caption text color