Stylish
A connected card that shares edges and corner radii with adjacent cards, forming a visually continuous group. Supports tap and long-press interactions; long-press triggers haptic feedback. When neither onClick nor onLongClick is provided, the card renders flat (zero elevation) and ignores pointer input.
Use StylishConnectedCardRow, StylishConnectedCardColumn, or StylishConnectedCardGrid to lay out multiple connected cards — those layouts compute outlineEdges and outlineCorners automatically.
Two rendering modes
Structured mode (default) — when content is null, the card renders a fixed three-slot row: leadingContent | title column (title + supportingText) | trailingContent. The title column occupies the remaining width via weight(1f).
Content mode — when content is non-null, it completely replaces the structured row. The caller has full control over the card's inner layout; title, supportingText, leadingContent, trailingContent, and their style parameters (titleStyle, titleMaxLines, titleOverflow, supportingTextStyle, supportingTextMaxLines, supportingTextOverflow, contentSpacing, titleSpacing) are ignored. Container-level parameters (minHeight, horizontalPadding, verticalPadding, shape, containerColor, contentColor, disabledContainerColor, disabledContentColor) still apply in both modes.
Parameters
Primary text displayed in the card body in structured mode. Ignored in content mode. Defaults to "".
Secondary text below the title in structured mode. Omitted when blank. Ignored in content mode.
Modifier applied to the card root.
Shape of the card surface. Defaults to connectedShape with ConnectedCorners.Standalone.
Which edges of the hairline outline to draw. Defaults to ConnectedEdges.All.
Which corners use the large (outer) radius. Defaults to ConnectedCorners.Standalone.
Background color. Defaults to stylishComponentColors.groupedContainer. Ignored when enabled is false.
Default content color. Defaults to MaterialTheme.colorScheme.onSurface. Ignored when enabled is false.
Background color used when enabled is false, visually dimming the card. Defaults to MaterialTheme.colorScheme.surfaceVariant.
Content color used when enabled is false, visually dimming the card. Defaults to MaterialTheme.colorScheme.onSurfaceVariant.
Text style for title in structured mode.
Text style for supportingText in structured mode.
Color for supportingText in structured mode. Defaults to MaterialTheme.colorScheme.onSurfaceVariant.
Minimum height of the card body. Defaults to 77.dp. Applies in both modes.
Horizontal padding inside the card. Defaults to 16.dp. Applies in both modes.
Vertical padding inside the card. Defaults to 12.dp. Applies in both modes.
Horizontal gap between slots in structured mode. Ignored in content mode.
Vertical gap between title and supportingText in structured mode. Ignored in content mode.
When false, the card ignores pointer input, renders at zero elevation regardless of onClick, is announced as disabled via semantics, and is visually dimmed with disabledContainerColor and disabledContentColor.
Called when the card is tapped. null (default) makes the card display-only.
Called when the card is long-pressed. Triggers HapticFeedbackType.LongPress before invocation.
Maximum lines for title in structured mode.
Overflow strategy for title in structured mode.
Maximum lines for supportingText in structured mode.
Overflow strategy for supportingText in structured mode.
The visual style of the card (see StylishCardVariant). Defaults to StylishCardVariant.Elevated, preserving the classic Stylish look.
Border stroke drawn around the card, in addition to the connected outline. When null (default), resolved from variant: a hairline of StylishTheme.dimensions.outlineWidth using MaterialTheme.colorScheme.outlineVariant for StylishCardVariant.Outlined, and no border otherwise. Pass an explicit BorderStroke to override.
The MutableInteractionSource for the card, used to observe press/focus/hover interactions. When null, an internal one is remembered.
Content before the title column in structured mode. Ignored in content mode.
Content after the title column in structured mode. Ignored in content mode.
When non-null, replaces the entire structured row with caller-supplied content, enabling fully custom card layouts. The content is placed inside a Box constrained by minHeight, horizontalPadding, and verticalPadding. When null (default), the structured three-slot row is rendered.