Develop

Card

Updated: Aug 29, 2026

Overview

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.

Common features

  • 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.

Card variants

Primary card

  • 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")
}

Secondary card

  • 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")
}

Outlined card

  • 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")
}

Common parameters

  • 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.