Card
Updated: Aug 29, 2026
Cards group related content in visually distinct sections. They separate content from the background, which creates structure in a panel. The Meta VR UI Set SDK provides three card variants with different visual treatments.
- Content organization: Arranges content in a
ColumnScope with consistent padding, clipped to the card shape. - Visual hierarchy: Primary cards are elevated, secondary cards are filled and quieter, and outlined cards are transparent with a semantic outline.
- Theming: Container and content colors, shape, padding, border width, and elevation derive from
UiSetTheme. - Interaction: Passing
onClick makes the whole card interactive and keeps its minimum target size from the Android design requirements. Leave it out for a display-only card. - Padding control:
dimensions.contentPadding sets the space around card content.
- Composable:
PrimaryCard - Usage: The main content groups on a screen. High emphasis.
- Appearance: Elevated surface that separates the card from the background.
import metavrx.uiset.compose.Text
import metavrx.uiset.compose.card.PrimaryCard
PrimaryCard {
Text("Main content area")
}
PrimaryCard(onClick = { /* ... */ }) {
Text("Clickable content")
}
- Composable:
SecondaryCard - Usage: Supporting content next to a primary card. Medium emphasis.
- Appearance: Filled surface with no elevation.
import metavrx.uiset.compose.card.SecondaryCard
SecondaryCard {
Text("Supporting information")
}
- Composable:
OutlinedCard - Usage: Content that needs a clear boundary where a filled surface is already present behind it. Low emphasis.
- Appearance: Transparent container with a thin outline.
import metavrx.uiset.compose.card.OutlinedCard
OutlinedCard(onClick = { /* ... */ }) {
Text("Content with a clear boundary")
}
content: @Composable ColumnScope.() -> Unit: The content displayed inside the card.onClick: (() -> Unit)? = null: Click callback. A value of null creates a display-only card.enabled: Boolean = true: Controls interactivity of a clickable card.colors: CardColors: Paired container and content colors, plus the outline color. Defaults come from CardDefaults.dimensions: CardDimensions: Content padding, border width, and per-variant elevation.shape: Shape: Clipping and background shape.modifier: Modifier = Modifier: Applied to the card.
Choose the variant that matches the importance of the content and the surface behind it.