Card

A flexible container component with built-in shadows and styling

A lightweight, composable container component perfect for grouping related content. The Card component provides consistent styling, shadows, and borders out of the box.

Overview

The Card component is a simple but powerful building block. It wraps content with predefined styling and spacing, making it easy to create visually consistent layouts.

Use it for:

Content containers
List items
Grouped information sections
Cards in grid layouts
Composable layouts

Basic Usage

import { Card } from 'prizmux'
import { View, Text } from 'react-native'

export default function App() {
  return (
    <Card>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
        Hello, World!
      </Text>
      <Text style={{ marginTop: 8, color: '#666' }}>
        This is a Card component.
      </Text>
    </Card>
  )
}

import { Card } from 'prizmux'
import { View, Text } from 'react-native'

export default function App() {
  return (
    <Card>
      <Text style={{ fontSize: 18, fontWeight: 'bold' }}>
        Hello, World!
      </Text>
      <Text style={{ marginTop: 8, color: '#666' }}>
        This is a Card component.
      </Text>
    </Card>
  )
}

With Complex Content

Cards work perfectly with other components:

import { Card, Button } from 'prizmux'
import { View, Text, Image } from 'react-native'

export default function ProductCard() {
  return (
    <Card>
      <Image 
        source={{ uri: 'https://example.com/product.jpg' }}
        style={{ width: '100%', height: 200, borderRadius: 8 }}
      />
      
      <View style={{ marginTop: 12 }}>
        <Text style={{ fontSize: 16, fontWeight: '600' }}>
          Amazing Product
        </Text>
        <Text style={{ marginTop: 8, color: '#666' }}>
          $19.99
        </Text>
      </View>
      
      <Button 
        title="Add to Cart"
        fullWidth={true}
        style={{ marginTop: 16 }}
        onPress={() => {}}
      />
    </Card>
  )
}

import { Card, Button } from 'prizmux'
import { View, Text, Image } from 'react-native'

export default function ProductCard() {
  return (
    <Card>
      <Image 
        source={{ uri: 'https://example.com/product.jpg' }}
        style={{ width: '100%', height: 200, borderRadius: 8 }}
      />
      
      <View style={{ marginTop: 12 }}>
        <Text style={{ fontSize: 16, fontWeight: '600' }}>
          Amazing Product
        </Text>
        <Text style={{ marginTop: 8, color: '#666' }}>
          $19.99
        </Text>
      </View>
      
      <Button 
        title="Add to Cart"
        fullWidth={true}
        style={{ marginTop: 16 }}
        onPress={() => {}}
      />
    </Card>
  )
}

Multiple Cards

Perfect for creating lists and grids:

import { Card } from 'prizmux'
import { ScrollView, Text, View } from 'react-native'

const items = [
  { id: 1, title: 'Item 1', description: 'First item' },
  { id: 2, title: 'Item 2', description: 'Second item' },
  { id: 3, title: 'Item 3', description: 'Third item' },
]

export default function App() {
  return (
    <ScrollView style={{ padding: 16 }}>
      <View style={{ gap: 12 }}>
        {items.map(item => (
          <Card key={item.id}>
            <Text style={{ fontSize: 16, fontWeight: '600' }}>
              {item.title}
            </Text>
            <Text style={{ marginTop: 8, color: '#666' }}>
              {item.description}
            </Text>
          </Card>
        ))}
      </View>
    </ScrollView>
  )
}

import { Card } from 'prizmux'
import { ScrollView, Text, View } from 'react-native'

const items = [
  { id: 1, title: 'Item 1', description: 'First item' },
  { id: 2, title: 'Item 2', description: 'Second item' },
  { id: 3, title: 'Item 3', description: 'Third item' },
]

export default function App() {
  return (
    <ScrollView style={{ padding: 16 }}>
      <View style={{ gap: 12 }}>
        {items.map(item => (
          <Card key={item.id}>
            <Text style={{ fontSize: 16, fontWeight: '600' }}>
              {item.title}
            </Text>
            <Text style={{ marginTop: 8, color: '#666' }}>
              {item.description}
            </Text>
          </Card>
        ))}
      </View>
    </ScrollView>
  )
}

Custom Styling

Override the default Card styling as needed:

import { Card } from 'prizmux'
import { Text } from 'react-native'

export default function App() {
  return (
    <Card
      style={{
        backgroundColor: '#f0f0f0',
        borderRadius: 8,
        padding: 20,
      }}
    >
      <Text>Custom styled card</Text>
    </Card>
  )
}

import { Card } from 'prizmux'
import { Text } from 'react-native'

export default function App() {
  return (
    <Card
      style={{
        backgroundColor: '#f0f0f0',
        borderRadius: 8,
        padding: 20,
      }}
    >
      <Text>Custom styled card</Text>
    </Card>
  )
}

Props Reference

Prop	Type	Default	Description
`children`	`ReactNode`	Required	Card content
`style`	`StyleProp<ViewStyle>`	-	Custom container styles
`...props`	`ViewProps`	-	Any React Native View props

Styling Details

The Card component includes:

Background: White (#FFFFFF)
Border Radius: 12px
Padding: 16px
Shadow: Subtle shadow for depth
Elevation: Android elevation level 3

Best Practices

✅ Do:

Use Cards to group related content
Combine with other components for rich layouts
Customize styling when needed
Use consistent spacing between Cards

❌ Don't:

Nest Cards unnecessarily
Use Cards as page backgrounds
Override all default styles unnecessarily