Card

A card is a flexible and extensible content container. It comes in caries shapes and sizes and here we'll make few of them.

Most Commonly used design

A card component is a common and widely used UI element which helps to display related information or content in a visually cohesive and organized manner. Below is the implementation of card component using gluestack-ui.
function App() {
return (
<Box
maxWidth="$64"
borderColor="$borderLight200"
borderRadius="$lg"
borderWidth="$1"
my="$4"
overflow="hidden"
sx={{
"@base": {
mx: "$5",
},
_dark: {
bg: "$backgroundDark900",
borderColor: "$borderDark800",
},
}}
>
<Box>
<Image
h={150}
width="100%"
source={{
uri: "https://images.unsplash.com/photo-1549888834-3ec93abae044?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2940&q=80",
}}
/>
</Box>
<VStack px="$6" pt="$4" pb="$6">
<Text _dark={{ color: "$textLight200" }} fontSize="$sm" my="$1.5">
August 16, 2023
</Text>
<Heading _dark={{ color: "$textLight200" }} size="sm">
Fresh Orange
</Heading>
<Text my="$1.5" _dark={{ color: "$textLight200" }} fontSize="$xs">
Oranges are a great source of vitamin C, which is essential for a
healthy immune system. Oranges are a great source of vitamin C, which
is important for maintaining a healthy immune system.
</Text>
<Text
_dark={{ color: "$textLight200" }}
my="$1.5"
fontSize="$xs"
isTruncated="true"
>
Vitamin C also helps with the absorption of iron and the production of
collagen, which supports healthy skin, teeth, and bones.
</Text>
<Link href="https://gluestack.io/" isExternal>
<Text fontSize="$sm" color="$pink600">
Find out more
</Text>
</Link>
</VStack>
</Box>
)
}
Edit this page on GitHub