Develop ultra fast with Prismane 🎉
Logo
Quick Search...

Card

Versatile Component
Card displays a container that groups and displays content.
Category: Data Display Source

Import

 
import { Card } from "@prismane/core";

Card component has the following inner components:

  • - Card.Header - The header container for the card.
  • - Card.Footer - The footer container for the card.

Usage

Put content inside the Card component to create a basic card.

<Card p={fr(5)}>
  <Text fw="bold" fs="3xl" cl="white">
    97%
  </Text>
  <Text>Of users would recommend Prismane</Text>
  <Progress value={97} mt={fr(4)} />
</Card>

Card With Image

A very common use case is to combine the Card component with the Image component to achieve a more complex and good looking card. The Card.Header and Card.Footer components provide spacing so that the content is visually separated in a correct way.

<Card w={fr(96)} p={fr(5)}>
  <Card.Header>
    <Image
      src="https://app.vevolution.com/public/migrated/first-tiny-forest-planted-england-1.jpg"
      alt="Forest"
      w="100%"
      br="base"
    />
  </Card.Header>
  <Flex direction="column" gap={fr(2)}>
    <Text as="h1">Forest</Text>
    <Text>
      Forests can occur wherever the temperatures rise above 10 °C in the
      warmest months and the annual precipitation is more than 200 mm.
    </Text>
  </Flex>
  <Card.Footer justify="between">
    <Button variant="primary">Read More</Button>
    <ActionButton variant="tertiary" icon={<Heart />} />
  </Card.Footer>
</Card>

Horizontal Card

The Card component extends the Flex component. By default, Card has a flex-direction of column. By passing direction as row you can make a horizontal Card.

<Card>
  <Flex gap={fr(4)} align="center">
    <Square size={fr(16)} br="md" bg="primary" cl="white">
      <ShoppingCartSimple size={24} />
    </Square>
    <Flex direction="column" justify="center">
      <Text>Total order</Text>
      <Text fw="bold" fs="2xl">
        20,000+
      </Text>
    </Flex>
  </Flex>
</Card>

Versatile Component

 
<Card
  as="a"
  href="https://www.google.com"
  target="_blank"
  w={fr(120)}
  h={fr(120)}
  p={0}
  pos="relative"
  of="hidden"
>
  <Transition
    as={Image}
    src="https://app.vevolution.com/public/migrated/first-tiny-forest-planted-england-1.jpg"
    alt="Forest"
    w="100%"
    h="100%"
    pos="absolute"
    ft={["none", { hover: "sepia(100%) blur(4px)" }]}
  />
  <Flex
    direction="column"
    self="center"
    items="center"
    justify="center"
    mt="auto"
    mb={fr(5)}
    z={10}
  >
    <Text fs="3xl" fw="bold">
      Forests
    </Text>
    <Text fs="sm" cl={["base", 300]}>
      The lungs of the Earth.
    </Text>
  </Flex>
</Card>

API

Please refer to the documentation below for a comprehensive overview of all the available props and classes for the mentioned components.

Go BackButton
Up NextCenter