mise-en-place

# Examples

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis inventore autem minus optio dolorem id. Cumque pariatur ex facere voluptatem perspiciatis porro libero. Suscipit blanditiis eum saepe obcaecati quis aliquam?

# Card

<Box pad="4">
  <VStack gap="4">
    <AspectRatio>
      <img src="..." />
    </AspectRatio>
    <Heading level="3">Card Title</Heading>
    <BaseText>...</BaseText>
    <Inline gap="3">
      <Box v-for="i in 3" pad-y="2" pad-x="3" class="bg-light-gray">Tag {{i}}</Box>
    </Inline>
  </VStack>
</Box>

RESULT

Card Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis inventore autem minus optio dolorem id.

Tag 1
Tag 2
Tag 3

<HStack :gap="['2', '4', '6']" :pad="['2', '4']">
  ...
</HStack>

RESULT


←