Tile Group

Aligns a list of zn-tile rows into shared, content-driven columns so values and actions line up across every row, with optional dividing borders.

A plain list of zn-tile rows lays each row out independently, so columns drift out of alignment whenever content widths differ (for example a wider “Manual Renewal” chip shifts that row). zn-tile-group wraps the rows in a shared grid: every tile becomes a row of the same columns, so captions, values and actions line up down the list.

<zn-tile-group divide>
  <zn-tile caption="Test" plain>
    <span slot="properties">Default</span>
    <span slot="properties">£9.99/mo</span>
    <zn-chip slot="actions" type="info">Auto Renewal</zn-chip>
    <zn-chip slot="actions" type="success">Active</zn-chip>
  </zn-tile>

  <zn-tile caption="Test" plain>
    <span slot="properties">Default</span>
    <span slot="properties">£9.99/mo</span>
    <zn-chip slot="actions" type="warning">Manual Renewal</zn-chip>
    <zn-chip slot="actions" type="success">Active</zn-chip>
  </zn-tile>

  <zn-tile caption="Test" plain>
    <span slot="properties">Default</span>
    <span slot="properties">£9.99/mo</span>
    <zn-chip slot="actions" type="info">Auto Renewal</zn-chip>
    <zn-chip slot="actions" type="success">Active</zn-chip>
  </zn-tile>
</zn-tile-group>

Examples

Dividers

Add the divide attribute to draw a border between rows.

<zn-tile-group divide>
  <zn-tile caption="Leslie Alexander" plain>
    <span slot="properties">Co-Founder / CEO</span>
    <zn-chip slot="actions" type="success">Active</zn-chip>
  </zn-tile>

  <zn-tile caption="Michael Foster" plain>
    <span slot="properties">Engineering Lead</span>
    <zn-chip slot="actions" type="success">Active</zn-chip>
  </zn-tile>

  <zn-tile caption="Emma Davis" plain>
    <span slot="properties">Product Manager</span>
    <zn-chip slot="actions">Away</zn-chip>
  </zn-tile>
</zn-tile-group>

Without Dividers

Omit divide for a borderless list.

<zn-tile-group>
  <zn-tile caption="Wireless Headphones" plain>
    <span slot="properties">In Stock</span>
    <span slot="properties">$299</span>
  </zn-tile>

  <zn-tile caption="Smart Watch" plain>
    <span slot="properties">Low Stock</span>
    <span slot="properties">$399</span>
  </zn-tile>
</zn-tile-group>

How It Works

The group is a CSS grid: a flexible caption column on the left, then one shared, content-sized column for each value/action. Each tile is rendered as a subgrid row spanning those columns, so a column is only as wide as its widest cell across the whole list and every row aligns to it. Value/action columns are right-aligned, so chips of differing widths (Auto vs Manual Renewal) still share a clean right edge.

The number of shared columns is detected automatically from the row with the most properties + actions, and published as the --zn-tile-cols custom property.

Usage Notes

• Use a consistent set of properties/actions across rows for the cleanest alignment; rows with fewer cells leave trailing columns empty.
• Captions render in the bold tile weight by default; add plain to the tiles for the regular table-content weight (as in the examples above).
• Dividers are drawn between rows and are inset by the group’s horizontal padding.

CSS Custom Properties

• --zn-tile-cols - The number of shared value/action columns. Set automatically; you normally don’t need to touch it.

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.0/dist/components/tile-group/tile-group.js"></script>

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.1.0/dist/components/tile-group/tile-group.js';

import '@kubex/zinc/dist/components/tile-group/tile-group.js';

Slots

Learn more about using slots.

Properties

Learn more about attributes and properties.

Custom Properties

Learn more about customizing CSS custom properties.

Parts

Learn more about customizing CSS parts.

Dependencies

This component automatically imports the following dependencies.

• <zn-example>
• <zn-tile>