Stylish
A grid of connected cards laid out in equal-width cells across a fixed number of columns, with shared outlines and corner radii — suited for statistics dashboards or tile galleries.
This is the Finish-layer component: it supplies the Stylish card rendering (DefaultStylishConnectedCardItem) to the headless Structure layout ConnectedCardGrid, which owns arrangement and connection geometry. Items are chunked into rows of columns cards; within each row every card receives equal weight and stretches to the tallest sibling. Outline edges are drawn on all four sides of every cell; corner radii are computed automatically from each item's absolute index so that only the four outer corners of the entire grid are rounded. When the final row has fewer items than columns, the remaining cards stretch via equal weight to fill the full row width. Pass a custom card to override the Stylish rendering while keeping the connected geometry.
Parameters
The list of StylishConnectedCardItem data objects that describe each card's title, supporting text, click actions, and slot content.
The number of equal-width columns in the grid. Must be greater than zero.
The gap between adjacent cards both horizontally and vertically. Defaults to StylishTheme.dimensions.connectedSpacing (3 dp).
Background color of each card. When null, defaults to MaterialTheme.stylishComponentColors.groupedContainer.
Content color of each card. When null, defaults to an enabled/disabled-aware color.
Background color of each card when its StylishConnectedCardItem.enabled is false.
Content color of each card when its StylishConnectedCardItem.enabled is false.
The TextStyle applied to each card's title.
The TextStyle applied to each card's supporting text.
Maximum number of lines for each card's title. Defaults to 1.
The TextOverflow strategy for each card's title. Defaults to TextOverflow.Ellipsis.
Maximum number of lines for each card's supporting text. Defaults to 1.
The TextOverflow strategy for each card's supporting text. Defaults to TextOverflow.Ellipsis.
Minimum height of each card body. Defaults to DefaultStylishDimensions.cardMinHeight (77 dp).
Horizontal padding inside each card. Defaults to DefaultStylishDimensions.controlPadding (16 dp).
Vertical padding inside each card. Defaults to DefaultStylishDimensions.controlVerticalPadding (12 dp).
Horizontal gap between slots inside each card. Defaults to StylishTheme.dimensions.itemSpacing (8 dp).
Vertical gap between title and supporting text inside each card. Defaults to StylishTheme.dimensions.inlineSpacing (4 dp).
A composable lambda that renders a single card. Receives the item data, a modifier (including weight and fill-max-height), the connected Shape, the outline ConnectedEdges, and the outline ConnectedCorners. Defaults to DefaultStylishConnectedCardItem, which delegates to the StylishConnectedCard atom with the styling parameters above.