CardUse cards to create layouts and hierarchy in screens. Cards come in many shapes and sizes depending on the contents inside.

Overview

Usage Examples

States

Property	Component
Default BG Color: $backgroundElevated Shadow: sh10 Border: 1px, $outlineDefault
Pressed BG Color: $backgroundNeutral Shadow: sh10 Border: 1px, $outlineDefault
Selected BG Color: $backgroundElevated Shadow: sh10 Border: 2px, $outlinePrimary

Spec

Spacing & StylingInner Padding: S5 Spacing between cards: S4 Border Radius: br40 (default)

Dev

PlaygroundCode Example

INFO

This component support margin, padding modifiers.

TIP

This component extends the basic/TouchableOpacity props.

APIThis is the list of additional props for the component

blurOptions

object

Blur options for blur effect according to @react-native-community/blur lib (make sure enableBlur is on)

borderRadius

number

Card border radius (will be passed to inner Card.Image component)

containerStyle

ViewStyle

Additional styles for the card container

elevation

number

Elevation valueAndroid only

enableBlur

boolean

Enable blur effectiOS only

enableShadow

boolean

Whether the card should have shadow or not. Default is true

height

number | string

Card custom height

onPress

function

Callback function for card press event

row

boolean

Should inner card flow direction be horizontal

selected

boolean

Adds visual indication that the card is selected

selectionOptions

CardSelectionOptions

Custom options for styling the selection indication

useDarkTheme

boolean

Whether to use dark theme

width

number | string

Card custom width