Card

Card is a high level Pattern Component use to group related or hierarchical information.

Usage

A Card is analogous to an HTML div and can contain any other component. Use Cards when you want to add hierarchy or highlight parts of your content.

Dracula 
<div class="drac-box drac-card drac-bg-purple drac-p-sm">
  <span class="drac-text drac-line-height drac-text-black">Dracula</span>
</div>
<Card color="purple" p="sm">
  <Text color="black">Dracula</Text>
</Card>;

Colors

Cards can be customized to use any of the Dracula UI theme colors, including all solid, gradient, and animated colors.

Pink Purple 
<div class="drac-box drac-card drac-bg-pink-purple drac-p-sm">
  <span class="drac-text drac-line-height drac-text-black">Pink Purple</span>
</div>
<Card color="pinkPurple" p="sm">
  <Text color="black">Pink Purple</Text>
</Card>;

Variants

Use variant="subtle" to create discrete or secondary cards

Subtle Card 
<div>
  <div
    variant="subtle"
    class="drac-box drac-card drac-card-subtle drac-border-pink drac-bg-pink drac-p-md drac-m-md"
  >
    <span class="drac-text drac-line-height drac-text-pink">Subtle Card</span>
  </div>
</div>
<div>
  <Card variant="subtle" color="pink" p="md" m="md">
    <Text color="pink">Subtle Card</Text>
  </Card>
</div>;

Spacing

Cards come with pre defined spacing primitives for padding and margin that allow for customizing the spacing inside and around Cardes.

xs padding
sm padding
medium padding
xs margin
sm margin
medium margin 
<div>
  <div class="drac-box drac-card drac-bg-yellow-pink drac-p-xs">
    <span class="drac-text drac-line-height drac-text-black">xs padding</span>
  </div>
  <div class="drac-box drac-card drac-bg-purple-cyan drac-p-sm">
    <span class="drac-text drac-line-height drac-text-black">sm padding</span>
  </div>
  <div class="drac-box drac-card drac-bg-pink-purple drac-p-md">
    <span class="drac-text drac-line-height drac-text-black"
      >medium padding</span
    >
  </div>
  <div class="drac-box drac-card drac-bg-yellow-pink drac-m-xs">
    <span class="drac-text drac-line-height drac-text-black">xs margin</span>
  </div>
  <div class="drac-box drac-card drac-bg-purple-cyan drac-m-sm">
    <span class="drac-text drac-line-height drac-text-black">sm margin</span>
  </div>
  <div class="drac-box drac-card drac-bg-pink-purple drac-m-md">
    <span class="drac-text drac-line-height drac-text-black"
      >medium margin</span
    >
  </div>
</div>
<div>
  <Card color="yellowPink" p="xs">
    <Text color="black">xs padding</Text>
  </Card>
  <Card color="purpleCyan" p="sm">
    <Text color="black">sm padding</Text>
  </Card>
  <Card color="pinkPurple" p="md">
    <Text color="black">medium padding</Text>
  </Card>
  <Card color="yellowPink" m="xs">
    <Text color="black">xs margin</Text>
  </Card>
  <Card color="purpleCyan" m="sm">
    <Text color="black">sm margin</Text>
  </Card>
  <Card color="pinkPurple" m="md">
    <Text color="black">medium margin</Text>
  </Card>
</div>;

Properties

variant

The Card display variant. `normal` -> Applies the chosen background color with dark text. `subtle` -> Inverts the theme color, and adds a slight glow to the Card. Use this when you don't want all your cards to stand out.

"normal" | "subtle"
color

The background color.

"animated" | "purpleCyan" | "yellowPink" | "cyanGreen" | "pinkPurple" | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow" | "white" | "black" | "blackSecondary" | "blackLight"
display

The display of the element.

"none" | "block" | "flex" | "grid" | "table" | "inline" | "inline-block" | "inline-flex" | "inline-grid" | "inline-table"
glowColor

The glow color.

"cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"
borderColor

The border color.

"cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"
rounded

The border radius.

"none" | "full" | "sm" | "lg" | "xl" | "2xl" | "3xl" | "base"
height

The height of the element.

"auto" | "none" | "full" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl"
width

The width of the element.

"auto" | "none" | "full" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl" | "5xl" | "6xl" | "7xl" | "8xl"
as

The HTML element to be used

"div"
scrollbar

If the custom scrollbar is to be used and its color.

boolean | "cyan" | "green" | "orange" | "pink" | "purple" | "red" | "yellow"