Stylish
A standalone card for presenting a single piece of grouped content. 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.
This is the standalone card — it carries no connected-group geometry. Use StylishConnectedCard, StylishConnectedCardRow, StylishConnectedCardColumn, or StylishConnectedCardGrid when multiple cards should share edges and corner radii as a visually continuous group.
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) still apply in both modes.
Testing
The root carries the default test tag stylish_card for UI tests. Callers can override it by passing their own Modifier.testTag(...) in modifier.
Parameters
Modifier applied to the Card root.
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.
When false, the card ignores pointer input, renders at zero elevation regardless of onClick, and is announced as disabled via semantics.
The visual style of the card (see StylishCardVariant). Defaults to StylishCardVariant.Elevated, preserving the classic Stylish look.
Shape of the card surface. Defaults to RoundedCornerShape with StylishTheme.dimensions.connectedCornerRadius.
Background color. Defaults to stylishComponentColors.groupedContainer.
Default content color. Defaults to MaterialTheme.colorScheme.onSurface.
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.
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.
Text style for title in structured mode.
Maximum lines for title in structured mode.
Overflow strategy for title in structured mode.
Text style for supportingText in structured mode.
Maximum lines for supportingText in structured mode.
Overflow strategy for supportingText in structured mode.
Horizontal gap between slots in structured mode. Ignored in content mode.
Vertical gap between title and supportingText in structured mode. Ignored in content mode.
Border stroke drawn around the card. 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.