1
<Box rounded="pill" w={80} shadow={4}>
2
  <Image
3
    roundedTop="pill"
4
    h={56}
5
    source={require("./assets/fish.jpeg")}
6
    alt="NativeBase Card"
7
  />
8
  <Stack p={4} space={3}>
9
    <Heading color="blueGray.600">Clownfish</Heading>
10
    <Text color="blueGray.500">
11
      Bright orange with three distinctive white bars, clown anemonefish are
12
      among the most recognizable at all reef-dwellers.
13
    </Text>
14
    <HStack space={4}>
15
      <Button variant="ghost" colorScheme="blue" p={0} minH={0}>
16
        SHARE
17
      </Button>
18
      <Button variant="ghost" colorScheme="blue" p={0} minH={0}>
19
        LEARN MORE
20
      </Button>
21
    </HStack>
22
  </Stack>
23
</Box>

1
<Box rounded="pill" w={64} shadow={4}>
2
  <Image
3
    h={64}
4
    rounded="pill"
5
    source={require("./assets/forest.jpeg")}
6
    alt="NativeBase Card"
7
  />
8
  <Center position="absolute" height="100%" width="100%">
9
    <Icon
10
      type="AntDesign"
11
      name="play"
12
      color="gray.200"
13
      size={12}
14
      opacity={0.8}
15
    />
16
  </Center>
17
  <HStack
18
    position="absolute"
19
    bottom={4}
20
    w={64}
21
    px={4}
22
    alignItems="center"
23
    justifyContent="space-between"
24
  >
25
    <Stack>
26
      <Heading color="gray.200" size="md">
27
        Sacred Grove
28
      </Heading>
29
      <Text color="gray.200">Meghalaya</Text>
30
    </Stack>
31
    <Icon name="more-horizontal" type="Feather" color="white" />
32
  </HStack>
33
</Box>

1
<Box
2
  flexDirection={{ base: 'column', md: 'row' }}
3
  shadow={4}
4
  rounded="xl"
5
  overflow="hidden"
6
>
7
  <Box width={{ md: 24 }} height={{ base: 32, md: '100%' }}>
8
    <Image
9
      source={{
10
        uri:
11
          'https://static.nike.com/a/images/f_auto/dpr_2.0/w_1328,c_limit/b56d1e9b-3861-4c89-995d-b8fb6240a762/nike-just-do-it.jpg'
12
      }}
13
      alt="Shoes"
14
    />
15
  </Box>
16
  <Stack p={3} space={2} minW={32}>
17
    <Text fontSize="xs" color="red.400" fontWeight="semibold">
18
      Just In
19
    </Text>
20
    <Stack space={1}>
21
      <Heading size="sm">Jordan MA2</Heading>
22
      <Text fontWeight="medium" color="blueGray.600">
23
        Older Kids' Shoe
24
      </Text>
25
      <Text fontWeight="medium" color="blueGray.600">
26
        2 colors
27
      </Text>
28
    </Stack>
29
    <Text fontSize="md" fontWeight="semibold" color="blueGray.600">
30
      $ 150
31
    </Text>
32
  </Stack>
33
</Box>