Box

Card is a container element used for presenting grouped content. It is composed from the Box component.

Import

import { Card } from '@sajari-ui/core';

import { Card } from '@sajari-ui/core';

Usage

Editable Example

This is a Card

<Card padding="md">This is a Card</Card>

<Card padding="md">This is a Card</Card>

Padding

A padding shorthand prop is available to use preset padding sizes. Sizes are xs, sm, md, lg, xl.

Editable Example

Extra Small

Nisi laboris mollit nulla est pariatur ad aliqua excepteur voluptate fugiat dolor sint aute. Nostrud labore quis reprehenderit ex ipsum excepteur do Lorem mollit deserunt quis. Sunt fugiat qui nulla elit laboris non. Dolore irure enim sunt velit velit duis proident esse deserunt amet. Excepteur sint tempor nisi et. Dolore adipisicing eiusmod ex adipisicing quis aute cupidatat reprehenderit reprehenderit laborum et ea.

Small

Id ut magna aute aliqua minim sit irure amet mollit. Deserunt ullamco qui sunt do cupidatat tempor minim ad ad. Laboris laboris tempor commodo velit. Ullamco ut pariatur officia do irure velit sit Lorem cillum. Culpa esse non culpa esse in irure cupidatat. Aliqua nulla consectetur laboris cupidatat proident do commodo nostrud sunt et amet pariatur. Adipisicing cillum consectetur occaecat sint in do fugiat aute.

Medium

Commodo anim officia consectetur eiusmod aliquip officia esse est esse. Sunt ipsum ea in cillum nostrud deserunt et Lorem reprehenderit in irure velit qui. Do esse deserunt nostrud id nostrud Lorem sunt id duis elit nulla occaecat aliqua. Consectetur deserunt nulla enim aute aliquip. Ipsum qui enim excepteur do ullamco in cupidatat nostrud Lorem irure dolore. Non anim Lorem magna ad sunt consectetur fugiat aliqua nulla magna non officia ipsum do.

Large

Ipsum sunt Lorem sunt elit occaecat labore ullamco elit ut aliqua incididunt minim enim. Fugiat ipsum in tempor sunt reprehenderit quis consequat. Sit laborum ullamco nostrud enim minim velit. Ipsum culpa minim laboris et fugiat ex amet do ea fugiat. Ullamco nostrud consectetur ea enim minim ex fugiat ea ullamco ut duis.

Extra Large

Ipsum laboris velit et voluptate. Pariatur Lorem in ullamco labore mollit consectetur dolor. Dolore sit consequat aliqua fugiat ad ipsum velit minim commodo non.

Custom

Consequat elit consectetur et et laboris sit officia consequat incididunt adipisicing velit minim. Nostrud velit Lorem exercitation nostrud reprehenderit nisi culpa exercitation pariatur eiusmod nostrud ea magna. Ea proident pariatur et nisi reprehenderit laborum aliquip consequat labore id irure. Officia aliquip eu duis proident dolor pariatur ullamco. Cillum aliqua id labore tempor pariatur irure laboris adipisicing aliqua amet est. Minim irure laborum consequat exercitation in deserunt ex amet amet ex cupidatat deserunt dolore do. Lorem enim aute laborum commodo sunt reprehenderit eiusmod aliquip.

<Flex flexDirection="flex-col" space="space-y-4">
  <Card padding="xs" fontSize="text-xs">
    <Heading as="h1" size="sm">
      Extra Small
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="sm" fontSize="text-sm">
    <Heading as="h1" size="md">
      Small
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="md">
    <Heading as="h1" size="lg">
      Medium
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="lg">
    <Heading as="h1" size="lg">
      Large
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="xl">
    <Heading as="h1" size="lg">
      Extra Large
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="p-6">
    <Heading as="h1" size="lg">
      Custom
    </Heading>
    <LoremIpsum p={1} />
  </Card>
</Flex>

<Flex flexDirection="flex-col" space="space-y-4">
  <Card padding="xs" fontSize="text-xs">
    <Heading as="h1" size="sm">
      Extra Small
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="sm" fontSize="text-sm">
    <Heading as="h1" size="md">
      Small
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="md">
    <Heading as="h1" size="lg">
      Medium
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="lg">
    <Heading as="h1" size="lg">
      Large
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="xl">
    <Heading as="h1" size="lg">
      Extra Large
    </Heading>
    <LoremIpsum p={1} />
  </Card>
  <Card padding="p-6">
    <Heading as="h1" size="lg">
      Custom
    </Heading>
    <LoremIpsum p={1} />
  </Card>
</Flex>

Props

The Card component composes the Box component so you can pass props for Box. These are extra props for the Card component.

Name	Type	Default	Description
`padding`	`xs`, `sm`, `md`, `lg`, `xl`, `BoxProps['padding']`		The padding for the card.