Skip to main content

Card

The Card component is intended to be used for vertically aligned related content. It is a container that can hold a heading, content, and footer. It can also hold a left and right component that will be aligned to the left and right of the card body.

Props

<Card
preset="reversed"
verticalAlignment="space-between"
LeftComponent={<Text>Left</Text>}
RightComponent={<Text>Right</Text>}
heading="Card Heading"
headingStyle={{ color: "#a511dc" }}
HeadingTextProps={{ weight: "bold" }}
content="Card Content"
contentStyle={{ color: "#a511dc" }}
ContentTextProps={{ weight: "light" }}
footer="Card Footer"
footerStyle={{ color: "#a511dc" }}
FooterTextProps={{ weight: "medium" }}
/>

preset

The preset prop is used to set the preset container style of the card. This affects the border and background color of the container. There are two preconfigured presets: default and reversed.

card-component-01

<Card preset="reversed" heading="Card Heading" content="Card Content" footer="Card Footer" />

verticalAlignment

The verticalAlignment prop is used to set the vertical alignment of the card's content. This affects the alignment of the heading, content, and footer. There are four preconfigured alignments: top, center, space-between, and force-footer-bottom. force-footer-bottom behaves like top, but will force the footer to the bottom of the card.

card-component-02

<Card
verticalAlignment="space-between"
heading="Card Heading"
content="Card Content"
footer="Card Footer"
/>

LeftComponent & RightComponent

The LeftComponent and RightComponent props are used to set the component that will be aligned to the left or right of the card body, respectively.

card-component-03

<Card
LeftComponent={
<AutoImage
maxWidth={80}
maxHeight={60}
style={{ alignSelf: "center" }}
source={{
uri: "https://user-images.githubusercontent.com/1775841/184508739-f90d0ce5-7219-42fd-a91f-3382d016eae0.png",
}}
/>
}
RightComponent={
<Button preset="default" text="Click It" onPress={() => Alert.alert("pressed")} />
}
heading="Card Heading"
content="Card Content"
footer="Card Footer"
/>

heading

The heading prop is used to set the heading text of the card.

<Card heading="Card Heading" content="Card Content" footer="Card Footer" />

headingTx

The headingTx prop is used to set the heading text of the card using a translation key.

<Card headingTx="card:heading" content="Card Content" footer="Card Footer" />

headingTxOptions

The headingTxOptions prop is used to set the options for the translation key used by the headingTx prop.

<Card
headingTx="card:heading"
headingTxOptions={{ count: 2 }}
content="Card Content"
footer="Card Footer"
/>

headingStyle

The headingStyle prop is used to set the style of the heading text.

<Card
heading="Card Heading"
headingStyle={{ color: "red" }}
content="Card Content"
footer="Card Footer"
/>

HeadingTextProps

The HeadingTextProps prop is used to pass any additional props to the heading Text component. It will accept any prop that the Text component accepts.

<Card
heading="Card Heading"
HeadingTextProps={{ size: "lg" }}
content="Card Content"
footer="Card Footer"
/>

HeadingComponent

The HeadingComponent prop is used to set the component that will be used for the heading. This can be used to set a custom heading component.

<Card
HeadingComponent={<Button preset="reversed" text="HeadingComponent" icon="ladybug" />}
content="Card Content"
footer="Card Footer"
/>

content

The content prop is used to set the content text of the card.

<Card heading="Card Heading" content="Card Content" footer="Card Footer" />

contentTx

The contentTx prop is used to set the content text of the card using a translation key.

<Card heading="Card Heading" contentTx="card:content" footer="Card Footer" />

contentTxOptions

The contentTxOptions prop is used to set the options for the translation key used by the contentTx prop.

<Card
heading="Card Heading"
contentTx="card:content"
contentTxOptions={{ count: 2 }}
footer="Card Footer"
/>

contentStyle

The contentStyle prop is used to set the style of the content text.

<Card
heading="Card Heading"
content="Card Content"
contentStyle={{ backgroundColor: colors.error, color: colors.palette.neutral100 }}
footer="Card Footer"
/>

ContentTextProps

The ContentTextProps prop is used to pass any additional props to the content Text component. It will accept any prop that the Text component accepts.

<Card
heading="Card Heading"
content="Card Content"
ContentTextProps={{ size: "lg" }}
footer="Card Footer"
/>

ContentComponent

The ContentComponent prop is used to set the component that will be used for the content. This can be used to set a custom content component.

<Card
heading="Card Heading"
ContentComponent={<Button preset="reversed" text="ContentComponent" icon="ladybug" />}
footer="Card Footer"
/>

The footer prop is used to set the footer text of the card.

<Card heading="Card Heading" content="Card Content" footer="Card Footer" />

footerTx

The footerTx prop is used to set the footer text of the card using a translation key.

<Card heading="Card Heading" content="Card Content" footerTx="card:footer" />

footerTxOptions

The footerTxOptions prop is used to set the options for the translation key used by the footerTx prop.

<Card
heading="Card Heading"
content="Card Content"
footerTx="card:footer"
footerTxOptions={{ count: 2 }}
/>

footerStyle

The footerStyle prop is used to set the style of the footer text.

<Card
heading="Card Heading"
content="Card Content"
footer="Card Footer"
footerStyle={{ color: "red" }}
/>

FooterTextProps

The FooterTextProps prop is used to pass any additional props to the footer Text component. It will accept any prop that the Text component accepts.

<Card
heading="Card Heading"
content="Card Content"
footer="Card Footer"
FooterTextProps={{ size: "lg" }}
/>

FooterComponent

The FooterComponent prop is used to set the component that will be used for the footer. This can be used to set a custom footer component.

<Card
heading="Card Heading"
content="Card Content"
FooterComponent={<Button preset="reversed" text="FooterComponent" icon="ladybug" />}
/>