Card

import { Card } from "@styple/design-system";

<Flex
  css={{
    flexDirection: "column",
    gap: "$md",
  }}
>
  <Card css={{ gap: "$sm" }}>
    <Heading as="h3" size="lg">A card component</Heading>
    <Text
      css={{
        color: "$text300",
      }}
    >Lorem ipsum</Text>
    <Button>Button in Card</Button>
  </Card>

  <Card active css={{ gap: "$sm", bg: "$bg100" }}>
    <Heading as="h3" size="lg">Active bg100 card</Heading>
    <Text
      css={{
        color: "$text300",
      }}
    >Lorem ipsum</Text>
    <Button>Button in Card</Button>
  </Card>

  <Card
    as="a"
    href="#"
    interactive
  >
    <Heading as="h3" size="lg">Interactive card</Heading>
    <Text
      css={{
        color: "$text300",
      }}
    >Try clicking this interactive card</Text>
    <Text
      css={{
        color: "$text300",
      }}
    >Lorem ipsum</Text>
  </Card>

  <Card
    as="a"
    href="#"
    interactive
  >
    <Image
      src="/styple-og.png"
      layout="fill"
      objectFit="cover"
      objectPosition="center"
      className="image-in-card"
      alt="Banner of styple"
    />

    <Container>
      <Heading as="h3" size="lg" color="white">Card with image</Heading>
      <Text
        color="white"
        css={{
          opacity: ".9",
        }}
      >Try clicking this interactive card</Text>
      <Text
        color="white"
        css={{
          opacity: ".9",
        }}
      >Lorem ipsum</Text>
    </Container>
  </Card>
</Flex>