Text

Text is the base component for any sort of text. Consumers of this component can control, the color, size, weight, and spacing of Text. Use this component for generic, and non-hierarchical text that is to be displayed on a page, or as part of other complex components or UI patterns.

Usage

Show inline text within an interface.

The quick vampire jumps over the lazy human 
<span class="drac-text drac-line-height drac-text-white"
  >The quick vampire jumps over the lazy human</span
>
<Text>The quick vampire jumps over the lazy human</Text>;

Colors

Text can be customized to use any of the Dracula UI theme colors.

cyan
green 
<div class="drac-box">
  <div class="drac-box">
    <span class="drac-text drac-line-height drac-text-cyan">cyan</span>
  </div>
  <div class="drac-box">
    <span class="drac-text drac-line-height drac-text-green">green</span>
  </div>
</div>
<Box>
  <Box>
    <Text color="cyan">cyan</Text>
  </Box>
  <Box>
    <Text color="green">green</Text>
  </Box>
</Box>;

Align

Text can be customized with different alignments.

The quick vampire jumps over the lazy human

The quick vampire jumps over the lazy human

The quick vampire jumps over the lazy human 

<div class="drac-box">
  <p class="drac-text drac-text-left drac-line-height drac-text-white">
    The quick vampire jumps over the lazy human
  </p>
  <p class="drac-text drac-text-center drac-line-height drac-text-white">
    The quick vampire jumps over the lazy human
  </p>
  <p class="drac-text drac-text-right drac-line-height drac-text-white">
    The quick vampire jumps over the lazy human
  </p>
</div>
<Box>
  <Text align="left" as="p">
    The quick vampire jumps over the lazy human
  </Text>
  <Text align="center" as="p">
    The quick vampire jumps over the lazy human
  </Text>
  <Text align="right" as="p">
    The quick vampire jumps over the lazy human
  </Text>
</Box>;

Weights

Text can be defined in different font weights.

normal
semibold
bold 
<div class="drac-box">
  <div class="drac-box">
    <span class="drac-text drac-line-height drac-text-white">normal</span>
  </div>
  <div class="drac-box">
    <span class="drac-text drac-text-semibold drac-line-height drac-text-white"
      >semibold</span
    >
  </div>
  <div class="drac-box">
    <span class="drac-text drac-text-bold drac-line-height drac-text-white"
      >bold</span
    >
  </div>
</div>
<Box>
  <Box>
    <Text weight="normal">normal</Text>
  </Box>
  <Box>
    <Text weight="semibold">semibold</Text>
  </Box>
  <Box>
    <Text weight="bold">bold</Text>
  </Box>
</Box>;

Sizes

Text can be customized to use several different sizes.

xs
sm
md
lg 
<div class="drac-box">
  <div class="drac-box">
    <span class="drac-text drac-text-xs drac-line-height drac-text-white"
      >xs</span
    >
  </div>
  <div class="drac-box">
    <span class="drac-text drac-text-sm drac-line-height drac-text-white"
      >sm</span
    >
  </div>
  <div class="drac-box">
    <span class="drac-text drac-line-height drac-text-white">md</span>
  </div>
  <div class="drac-box">
    <span class="drac-text drac-text-lg drac-line-height drac-text-white"
      >lg</span
    >
  </div>
</div>
<Box>
  <Box>
    <Text size="xs">xs</Text>
  </Box>
  <Box>
    <Text size="sm">sm</Text>
  </Box>
  <Box>
    <Text size="md">md</Text>
  </Box>
  <Box>
    <Text size="lg">lg</Text>
  </Box>
</Box>;

Properties

align

Controls the alignment of text.

"left" | "center" | "right" | "justify"
size

Controls the size of the text based on pre-configured Dracula UI sizes.

"md" | "lg" | "sm" | "xs"
weight

Controls the weight of the text.

"normal" | "semibold" | "bold"
lineHeight

Controls the line height of a text.

"md" | "lg" | "sm" | "xs" | "xl"
color

Controls the color of the text

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

The HTML element to be used

"a" | "span" | "p"