WUI logo

Box

Box is the most basic component of Welcome UI — all other components make use of it for styling. By default, it’s a div element.

version

4.2.0

install

yarn add @welcome-ui/box

usage

import { Box } from '@welcome-ui/box'

Usage #

You can create a simple card item using Boxes (and a couple of other components).

<Box display="flex" w="100%" justifyContent="center" alignItems="center" backgroundColor="nude.100">
<Box backgroundColor="light.900" borderRadius="sm" boxShadow="sm" margin="xl" maxWidth={360}>
<Box
as="img"
src="https://images.unsplash.com/photo-1610020468144-a6f4771a1982?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=600&q=80"
alt="presentation"
maxWidth="100%"
/>
<Box p="md">
<Box display="flex" mb="xs" alignItems="center">
<Badge variant="2">Superhost</Badge>
<StarIcon ml="xs" color="primary.500" />
<Text my="0" ml={3} variant="body3" color="dark.200">
4.8/5
</Text>
</Box>
<Text variant="h5" m="0" lines={1}>
Jungle House in the middle of nowhere
</Text>
<Text mb="0" mt="xs" variant="body3" color="dark.200">
890€/week{' • '}2 beds
</Text>
</Box>
</Box>
</Box>

Previous

AspectRatio

Next

Flex