Card

Card contains content and actions about a single subject. It supports a header, footer, status color stripe, and press interaction.

Import

import { Card } from '@ui-kitten/components';

Basic Usage

import React from 'react';
import { Layout, Card, Text } from '@ui-kitten/components';

const Header = (props) => (
  <Layout {...props}>
    <Text category="h6">Card Title</Text>
    <Text category="s1">Subtitle</Text>
  </Layout>
);

const Footer = (props) => (
  <Layout {...props}>
    <Text category="c1">Footer content</Text>
  </Layout>
);

const CardExample = () => (
  <Layout style={{ flex: 1, padding: 16 }}>
    <Card
      status="primary"
      header={Header}
      footer={Footer}
      onPress={() => console.log('Card pressed')}
    >
      <Text>This is the card body content.</Text>
    </Card>
  </Layout>
);

Props

Property	Type	Default	Description
status	'basic' | 'primary' | 'success' | 'info' | 'warning' | 'danger' | 'control'	'basic'	Status color stripe displayed at the top of the card.
appearance	'filled' | 'outline'	'outline'	Visual style variant.
header	(props) => ReactElement	undefined	Render function for the card header.
footer	(props) => ReactElement	undefined	Render function for the card footer.
accent	(props) => ReactElement	undefined	Render function for the accent strip above the card. Its color follows status.
children	ReactNode	-	Body content of the card.
contentContainerStyle	StyleProp<ViewStyle>	undefined	Style of the view that wraps children. Overrides the body padding from the mapping and takes flex properties such as flexDirection.

Card also accepts all standard React Native TouchableOpacity props, including onPress and disabled.

Storybook

Live examples coming soon via Storybook.