Card

A flexible container component that groups related content with consistent styling across platforms.

Features

• Customizable padding and spacing
• Border and shadow variants
• Header, body, footer sections
• Interactive and static modes
• Responsive layouts

Usage

Web (React)

import { Card, CardHeader, CardBody, CardFooter } from '@cuppa/ui'

function MyComponent() {
  return (
    <Card>
      <CardHeader>
        <h3>Card Title</h3>
        <p>Subtitle</p>
      </CardHeader>
      <CardBody>
        <p>Card content goes here...</p>
      </CardBody>
      <CardFooter>
        <Button>Action</Button>
      </CardFooter>
    </Card>
  )
}

iOS (SwiftUI)

import CuppaUI

struct MyView: View {
  var body: some View {
    CuppaCard {
      VStack(alignment: .leading, spacing: 12) {
        Text("Card Title")
          .font(.headline)
        Text("Card content goes here...")
          .font(.body)
        CuppaButton("Action", variant: .primary)
      }
    }
  }
}

Android (Jetpack Compose)

import com.cuppa.ui.components.CuppaCard

@Composable
fun MyScreen() {
  CuppaCard {
    Column(
      modifier = Modifier.padding(16.dp),
      verticalArrangement = Arrangement.spacedBy(12.dp)
    ) {
      Text("Card Title", style = MaterialTheme.typography.h6)
      Text("Card content goes here...")
      CuppaButton("Action", variant = ButtonVariant.Primary)
    }
  }
}

Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | variant | string | 'elevated' | Card style (elevated, outlined, filled) | | padding | string | 'md' | Internal padding (sm, md, lg) | | interactive | boolean | false | Enable hover/press effects | | onClick | function | - | Click/tap handler |

Variants

Elevated

Default variant with shadow elevation.

Outlined

Border-only variant, no shadow.

Filled

Subtle background color, no border or shadow.

Examples

Interactive Card

<Card interactive onClick={() => navigate('/details')}>
  <CardBody>
    <h3>Clickable Card</h3>
    <p>Click to view details</p>
  </CardBody>
</Card>

Image Card

<Card>
  <img src="/image.jpg" alt="Preview" />
  <CardBody>
    <h3>Image Card</h3>
    <p>Card with image</p>
  </CardBody>
</Card>

Best Practices

1. Use cards to group related information
2. Keep card content concise
3. Use interactive cards for navigation
4. Maintain consistent spacing between cards
5. Avoid nesting cards too deeply