Card

The props worth knowing sit on the sub-components rather than on Card:

CardContent takes linearGradientColors, which lays a gradient between a CardImage and the text so copy stays legible over any photograph.
CardFooter takes iosBlurIntensity and blurs what is behind it on iOS; Android and web fall back to a solid fill.
CardBadge positions itself against the card, not the content.

<Card rootClassName="w-80" className="h-56">
  <CardContent className="gap-2 p-5">
    <CardSubtitle>Subtitle</CardSubtitle>
    <CardTitle>Item title</CardTitle>
    <CardDescription>
      Supporting description text, long enough to wrap onto a second line.
    </CardDescription>
  </CardContent>
</Card>

Import

import { Card } from '@simal/ui/nativewindui';

Props

Prop	Values	Default	Description
`rootClassName`	—	—	The outer box — width lives here. `className` styles the inner surface, so a width set there will not size the card.

Examples

With Image

The full composition: CardImage fills the card, CardContent lays a gradient over it so the text stays legible, and CardFooter blurs on iOS.

Open interactive workbenchWorkbench ↗

<Card rootClassName="w-80" className="h-96">
  <CardImage source={{ uri: COVER }} />
  <CardBadge>
    <Text>Approved</Text>
  </CardBadge>
  <CardContent
    className="gap-1 p-5"
    linearGradientColors={['transparent', 'rgba(0,0,0,0.75)']}
  >
    <CardSubtitle>Subtitle</CardSubtitle>
    <CardTitle className="text-white">Item title</CardTitle>
    <CardDescription className="text-white/80">
      Supporting description text · Detail
    </CardDescription>
  </CardContent>
  <CardFooter>
    <Button size="sm" variant="tonal">
      <Text>View details</Text>
    </Button>
  </CardFooter>
</Card>

Grid