CardContent

Provides an instrument structure with title, right content, and body text. The text renderer will get contentSize minus the title and margins, which can be used to arrange figures, graphs, or charts.

Example

function main() {
  return (
    <CardContent
      title="Speed"
      trailing="GPS"
      renderer={(metrics) => (
        <Text width={metrics.contentSize.width} fontSize={48}>
          78
        </Text>
      )}
    />
  );
}

Usage

renderer receives metrics after the header is measured and returns body content. Use contentSize instead of guessing a header height. inset reserves header and padding space; full gives content the entire card, including behind the header.
Numeric sizes use points. auto measures content; fill uses the space allocated by the parent. Size the container before tuning children. fill creates no extra space, and long text cannot enlarge a fixed parent.

Properties

title?string | View | null

Header text or a View.

Example""

renderer?(metrics: CardContentMetrics) => ViewContent

Build content using measured header metrics.

Examplemetrics => <Group/>

children?ViewContent

Child drawing content.

trailing?string | View | null

Trailing header text or a View.

Example""

contentMode?"inset" | "full"

inset keeps content below the header with padding; full gives content the entire card area.

Example"inset"

headerBackground?View | null

View drawn behind the header; null removes it. It does not become body content.

Example<Material type="frosted"/>

Common properties

width?number | "auto" | "fill"

Width in points, auto sizing or parent fill.

Example100

height?number | "auto" | "fill"

Height in points, auto sizing or parent fill.

Example80

padding?number

Content padding in points.

Example0

x?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

y?number

Visual offset in points: x moves right, y moves down. Does not change layout space.

Example0

transform?ViewTransform

Transform the whole View without changing layout. Translation uses points; rotation/skew use degrees; scale 1 is unchanged; anchors use 0–1.

Example{rotation: 0}

background?Paint

Background paint; accepts a color or gradient. Use clear for transparency.

Example"clear"

opacity?number

Opacity of the whole View: 0 is transparent, 1 is opaque.

Example1

cornerRadius?number

Corner radius in points.

Example0

clipped?boolean

Clip drawing that extends beyond the View bounds.

Examplefalse

clip?"rectangle" | "ellipse"

Clipping shape: rectangle or ellipse. Material also accepts false to disable clipping.

Example"rectangle"

mask?View | null

Alpha mask View. Centered without affecting layout; null disables masking.

Example<Circle width="fill" height="fill" background="white"/>

zIndex?number

Drawing order among siblings; larger values appear in front.

Example0

blur?number

Blur radius in points; 0 disables blur.

Example4

innerShadow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}

glow?DrawingEffect

Effect color, opacity, blur radius and x/y offset. Distances are in points.

Example{color: HDR("cyan"), radius: 8, opacity: 0.8}

shadowColor?Color

Color of the outer shadow.

ExampleHDR("black")

shadowOpacity?number

Outer shadow opacity from 0 to 1; 0 hides it.

Example0

shadowRadius?number

Outer shadow blur radius in points.

Example4

shadowX?number

Outer shadow offset in points: x right, y down.

Example0

shadowY?number

Outer shadow offset in points: x right, y down.

Example2

animations?Animation[]

Animate a supported property when it changes. duration/delay use seconds; from/to set endpoints; repeat and autoreverse control repetition; wrap sets a periodic range.

Example[{property: "opacity", duration: 0.25, curve: "easeInOut"}]

key?string | number

Stable identity among siblings.

Practical example

function main() {
  return (
    <CardContent
      title="Speed"
      trailing={<Symbol name="location.fill" />}
      contentMode="inset"
      renderer={(metrics) => (
        <VStack
          width={metrics.contentSize.width}
          height={metrics.contentSize.height}
          spacing={4}
        >
          <Text fontSize={Math.min(64, metrics.contentSize.height * 0.55)}>
            78
          </Text>
          <Text fontSize={14}>km/h</Text>
        </VStack>
      )}
    />
  );
}

Animation

widthheightpaddingxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorY

When omitted

The table lists omission behavior verified against implementation. Property examples are copyable syntax, not defaults. Pass explicit values for a fixed result; contextual dimensions and theme colors are not fixed constants.

Properties	When omitted
`contentMode`	`"inset"`

Example

Usage

Properties

Practical example

Animation

When omitted

Related APIs

VStack

Material

On this page