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 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
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
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"
/>
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" />}
/>