Components

Card

Card is a container that presents content on a card. Card is a container with elevated styling, typically used to display related content.

Examples

Basic Usage

Preview unavailable for this example in the static docs build.

Show code

<Card>{(
      <VStack spacing={10} style={{ padding: '20px' }}>
        <Text style={{ fontSize: '20px', fontWeight: 'bold' }}>Card Title</Text>
        <Text>Card content goes here</Text>
      </VStack>
    )}</Card>

With Image

Preview unavailable for this example in the static docs build.

Show code

<Card>
      <VStack spacing={10}>
        <Image src="https://via.placeholder.com/300x200" alt="Card image" />
        <VStack spacing={5} style={{ padding: '15px' }}>
          <Text style={{ fontSize: '18px', fontWeight: 'bold' }}>Card with Image</Text>
          <Text>This card contains an image and text content.</Text>
        </VStack>
      </VStack>
    </Card>

With Buttons

Preview unavailable for this example in the static docs build.

Show code

<Card>
      <VStack spacing={15} style={{ padding: '20px' }}>
        <Text style={{ fontSize: '20px', fontWeight: 'bold' }}>Action Card</Text>
        <Text>This card contains action buttons.</Text>
        <HStack spacing={10}>
          <Button>Primary</Button>
          <Button>Secondary</Button>
        </HStack>
      </VStack>
    </Card>

Multiple Cards

Preview unavailable for this example in the static docs build.

Show code

<VStack spacing={15}>
      <Card>
        <VStack spacing={10} style={{ padding: '20px' }}>
          <Text style={{ fontSize: '18px', fontWeight: 'bold' }}>Card 1</Text>
          <Text>First card content</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={10} style={{ padding: '20px' }}>
          <Text style={{ fontSize: '18px', fontWeight: 'bold' }}>Card 2</Text>
          <Text>Second card content</Text>
        </VStack>
      </Card>
      <Card>
        <VStack spacing={10} style={{ padding: '20px' }}>
          <Text style={{ fontSize: '18px', fontWeight: 'bold' }}>Card 3</Text>
          <Text>Third card content</Text>
        </VStack>
      </Card>
    </VStack>

Custom Styling

Preview unavailable for this example in the static docs build.

Show code

<Card style={{ padding: '25px', borderRadius: '12px', backgroundColor: '#f5f5f5' }}>
      <VStack spacing={10}>
        <Text style={{ fontSize: '20px', fontWeight: 'bold' }}>Custom Styled Card</Text>
        <Text>This card has custom styling applied.</Text>
      </VStack>
    </Card>

API

This component currently relies on inherited element props.

Inherits additional props from IBaseComponent.

Overview

Card is a container that presents content on a card. Card is a container with elevated styling, typically used to display related content.

SwiftUI Correspondence: Similar to SwiftUI's card styling.

Notes

Card provides elevated styling for content
Card can contain any React children
Card supports custom styling via style prop
Cards are commonly used in lists and grids
Cards provide visual separation and hierarchy

Best Practices

Content grouping: Use cards to group related content
Consistent styling: Maintain consistent card styling
Spacing: Provide appropriate padding for card content
Visual hierarchy: Use cards to create visual hierarchy
Accessibility: Ensure card content is accessible

Canvas

Canvas exposes the browser's drawing surface with a SwiftUI-style dedicated component wrapper.

Chart

Chart presents numeric series as either bar or line marks.

Card

Examples

API

Overview

Notes

Best Practices

On this page