Card

Card is a versatile container component for grouping related content. It supports multiple visual variants and can be made interactive with press handlers.

Preview

Hexagram 1

The Creative

Heaven over Heaven. Pure yang energy representing creative power and initiative.

Variants

Elevated

Default variant with subtle background distinction from the page.

Elevated Card

Subtle surface elevation for visual hierarchy.

<Card variant="elevated">
  <Text style={styles.title}>Elevated Card</Text>
  <Text>Subtle surface elevation for visual hierarchy.</Text>
</Card>

Outlined

Card with visible border, useful for forms and interactive lists.

Outlined Card

Clear boundary with transparent background.

<Card variant="outlined">
  <Text style={styles.title}>Outlined Card</Text>
  <Text>Clear boundary with transparent background.</Text>
</Card>

Filled

Solid background, ideal for call-to-action sections.

Filled Card

Stronger visual presence for emphasis.

<Card variant="filled">
  <Text style={styles.title}>Filled Card</Text>
  <Text>Stronger visual presence for emphasis.</Text>
</Card>

Padding

Padding	Value	Usage
`none`	0	Custom internal layouts
`sm`	8px	Compact cards, lists
`md`	16px	Default, most cases
`lg`	24px	Feature cards, modals

Radius

Radius	Value	Usage
`sm`	8px	Compact, inline cards
`md`	12px	Default container style
`lg`	16px	Feature cards, modals

Interactive Cards

Cards can be made pressable with visual feedback.

Tap to Select

This card responds to press interactions.

<Card
  variant="elevated"
  onPress={() => navigation.navigate('Detail', { id })}
  accessibilityLabel="View hexagram details"
>
  <Text style={styles.title}>Tap to Select</Text>
  <Text>This card responds to press interactions.</Text>
</Card>

API Reference

Props

Prop	Type	Default	Description
`variant`	`'elevated' \| 'outlined' \| 'filled'`	`'elevated'`	Visual style
`padding`	`'none' \| 'sm' \| 'md' \| 'lg'`	`'md'`	Internal padding
`radius`	`'sm' \| 'md' \| 'lg'`	`'md'`	Border radius
`onPress`	`() => void`	-	Press handler (makes card interactive)
`accessibilityLabel`	`string`	-	Required for pressable cards
`style`	`ViewStyle`	-	Custom style overrides
`children`	`ReactNode`	-	Card content

Complete Example

import { Card } from '@synchronicity/react-native';
import { View, Text } from 'react-native';

function HexagramCard({ hexagram, onPress }) {
  return (
    <Card
      variant="elevated"
      padding="md"
      radius="lg"
      onPress={onPress}
      accessibilityLabel={`View ${hexagram.name}`}
    >
      <View style={styles.header}>
        <Text style={styles.number}>{hexagram.number}</Text>
        <Text style={styles.symbol}>{hexagram.symbol}</Text>
      </View>
      <Text style={styles.title}>{hexagram.name}</Text>
      <Text style={styles.subtitle}>{hexagram.chinese}</Text>
      <Text style={styles.body}>{hexagram.description}</Text>
    </Card>
  );
}