<Card.Root maxW="sm">
    <Card.Header>
        <Card.Title>Card Title</Card.Title>
    </Card.Header>
    <Card.Body>
        <Card.Description>
            This is the card body. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. 
            Curabitur nec odio vel dui euismod fermentum.
        </Card.Description>
    </Card.Body>
</Card.Root>

<Card.Root variant="elevated" maxW="sm">
    <Card.Header>
        <Card.Title>Elevated</Card.Title>
    </Card.Header>
    <Card.Body>
        <Card.Description>
            This is the card body. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. 
            Curabitur nec odio vel dui euismod fermentum.
        </Card.Description>
    </Card.Body>
</Card.Root>
 
<Card.Root variant="outline" maxW="sm">
    <Card.Header>
        <Card.Title>Outline</Card.Title>
    </Card.Header>
    <Card.Body>
        <Card.Description>
            This is the card body. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. 
            Curabitur nec odio vel dui euismod fermentum.
        </Card.Description>
    </Card.Body>
</Card.Root>

<Card.Root maxW="sm">
    <Card.Header row alignItems="center" pb={6} gap={4}>
        <Image
            alt="Dreamy UI logo"
            src="https://dreamy-ui.com/dream.svg"
            boxSize={"10"}
        />
        <Flex column align="start">
            <Card.Title>Dreamy UI</Card.Title>
            <Text color="fg.medium" size="sm">dreamy-ui.com</Text>
        </Flex>
    </Card.Header>
    <Divider />
    <Card.Body>
        <Card.Description>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</Card.Description>
    </Card.Body>
    <Divider />
    <Card.Footer pt={6}>
        <Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
            Visit source code on GitHub <Icon h={4} as={HiExternalLink} />
        </Link>
    </Card.Footer>
</Card.Root>

<Card.Root size="sm" maxW="sm">
    <Card.Header>
        <Card.Title>Small Card</Card.Title>
    </Card.Header>
    <Card.Body>
        <Card.Description>
            This is the small card body. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. 
            Curabitur nec odio vel dui euismod fermentum.
        </Card.Description>
    </Card.Body>
</Card.Root>
 
<Card.Root size="md" maxW="sm">
    <Card.Header>
        <Card.Title>Medium Card</Card.Title>
    </Card.Header>
    <Card.Body>
        <Card.Description>
            This is the medium card body. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. 
            Curabitur nec odio vel dui euismod fermentum.
        </Card.Description>
    </Card.Body>
</Card.Root>
 
<Card.Root size="lg" maxW="sm">
    <Card.Header>
        <Card.Title>Large Card</Card.Title>
    </Card.Header>
    <Card.Body>
        <Card.Description>
            This is the large card body. Lorem ipsum dolor sit amet, 
            consectetur adipiscing elit. Curabitur nec odio vel dui euismod fermentum. 
            Curabitur nec odio vel dui euismod fermentum.
        </Card.Description>
    </Card.Body>
</Card.Root>

<Card.Root w="md">
    <Card.Header>
        <Card.Title>Form Card</Card.Title>
        <Card.Description>
            Fill in the form below to create an account
        </Card.Description>
    </Card.Header>
    <Card.Body gap={4}>
        <Field.Root label="Email" full>
            <Input name="email" placeholder="Email" full />
        </Field.Root>
        <Field.Root label="Password" full>
            <Input name="password" placeholder="Password" full />
        </Field.Root>
    </Card.Body>
    <Card.Footer justifyContent="end">
        <Button variant="outline">Cancel</Button>
        <Button variant="primary">Sign in</Button>
    </Card.Footer>
</Card.Root>

<Card.Root as={<a target="_blank" to="https://github.com/dreamy-ui/dreamy-ui" />} maxW="sm">
    <Card.Header row alignItems="center" gap={4}>
        <Image
            alt="Dreamy UI logo"
            src="https://dreamy-ui.com/dream.svg"
            boxSize={"10"}
        />
        <Flex column align="start">
            <Card.Title>Dreamy UI</Card.Title>
            <Text color="fg.medium" size="sm">dreamy-ui.com</Text>
        </Flex>
    </Card.Header>
    <Card.Body>
        <Card.Description>Create dream websites with next-gen DX and crispy UI. Powered by Panda CSS.</Card.Description>
    </Card.Body>
    <Card.Footer>
        <Link isExternal href="https://github.com/dreamy-ui/dreamy-ui" fontWeight={500} display={"flex"} alignItems={"center"} gap={1}>
            Star on GitHub <Icon h={4} as={<HiExternalLink />} />
        </Link>
    </Card.Footer>
</Card.Root>