LayoutReact Native

Card

Group related native content on a bordered semantic surface with optional card-level action.

Public APILumenCardReact Native

Native example

Use Card

Use default and muted cards for grouped content, and restrained semantic variants when the surface conveys a real state. Provide a card-level action only when the entire card performs one action.

View verified React Native runtime capture

Card rendered in the Expo web renderer Lumen playground — Verified runtime captureExpo web renderer

<LumenCard variant="muted">
  <LumenText>Team workspace</LumenText>
</LumenCard>

Reference

Public API

The primary shared and platform-specific options exposed by LumenCard.

API	Values or type	Default	Description
variant	`default · muted · accent · success · warning · destructive`	`default`	Selects the native surface treatment.
onPress	`Optional callback`	`nil`	Makes the whole card interactive.
children	`Native content`	`Required`	Composes the card body.
style	`Native layout API`	`—`	Controls card placement and sizing.

Native behavior

Design and accessibility

When to use it

Use default and muted cards for grouped content, and restrained semantic variants when the surface conveys a real state. Provide a card-level action only when the entire card performs one action.

Accessibility

Supplying an action gives the card native button semantics. Avoid nesting an interactive card inside another control.

Shared component

Available on other platforms

Apple / SwiftUI Android / Compose