Card — componente React Native

Instalación

Instala solo este componente (copia el código fuente a tu proyecto, sin dependencia npm)

npx orn-ui add card

O instala el paquete completo e impórtalo

pnpm add orn-ui
import { Card } from 'orn-ui/card';

Depende de:core (theme + icons)

Uso

cuándo usarlo — Agrupar contenido relacionado en una superficie: un resumen, un ítem de lista con varias líneas, un bloque de formulario.
composición — Aporta padding, radio y elevación, nada más — el contenido de adentro es libre.
style — Los ajustes de espaciado o ancho van aquí, no en un View que envuelva la Card.

Clip del demo todavía sin grabar — ver MEDIA.md

Variantes

Default

<Card>
  <Title>Invoice #1042</Title>
  <Body>Due in 5 days · $340.00</Body>
</Card>

Composed

<Card>
  <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
    <Title>Invoice #1043</Title>
    <Badge label="PAID" variant="success" />
  </View>
  <KeyValueRow label="Total" value="$1,240.00" />
</Card>

Custom style

<Card style={{ backgroundColor: '#004cef', borderRadius: 24 }}>
  <Title style={{ color: '#fff' }}>Highlighted card</Title>
</Card>

Código completo del demo

const variants: VariantDef[] = [
  {
    label: 'Default',
    content: (
      <Card>
        <Title>Invoice #1042</Title>
        <Body>Due in 5 days · $340.00</Body>
      </Card>
    ),
  },
  {
    label: 'Composed',
    content: (
      <Card>
        <View style={{ flexDirection: 'row', justifyContent: 'space-between', marginBottom: 8 }}>
          <Title>Invoice #1043</Title>
          <Badge label="PAID" variant="success" />
        </View>
        <KeyValueRow label="Total" value="$1,240.00" />
      </Card>
    ),
  },
  {
    label: 'Custom style',
    content: (
      <Card style={{ backgroundColor: '#004cef', borderRadius: 24 }}>
        <Title style={{ color: '#fff' }}>Highlighted card</Title>
      </Card>
    ),
  },
];
return <VariantList variants={variants} />;

Props

Nombre	Tipo	Por defecto	Descripción
`style?`	`ViewStyle`	—	—