Heading

Heading is used to display headlines and other forms of hierarchical Text. Headings are similar to the base Text component, but restricted to certain sizes and font weight.

Usage

Heading is an abstraction/style that can/is applied to HTML heading elements.

The quick vampire jumps over the lazy human 

<h2 class="drac-heading drac-heading-xl drac-text-white">
  The quick vampire jumps over the lazy human
</h2>
<Heading>The quick vampire jumps over the lazy human</Heading>;

Sizes

Heading sizes range from xs to 2xl using the Dracula UI font size scale.

2xl

xl

lg

md

sm

xs

<div>
  <h2 class="drac-heading drac-heading-2xl drac-text-white">2xl</h2>
  <h2 class="drac-heading drac-heading-xl drac-text-white">xl</h2>
  <h2 class="drac-heading drac-heading-lg drac-text-white">lg</h2>
  <h2 class="drac-heading drac-text-white">md</h2>
  <h2 class="drac-heading drac-heading-sm drac-text-white">sm</h2>
  <h2 class="drac-heading drac-heading-xs drac-text-white">xs</h2>
</div>
<div>
  <Heading size="2xl">2xl</Heading>
  <Heading size="xl">xl</Heading>
  <Heading size="lg">lg</Heading>
  <Heading size="md">md</Heading>
  <Heading size="sm">sm</Heading>
  <Heading size="xs">xs</Heading>
</div>;

Colors

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

pink

purpleCyan

<div>
  <h2 class="drac-heading drac-heading-xl drac-text-pink">pink</h2>
  <h2 class="drac-heading drac-heading-xl drac-text-purple-cyan">purpleCyan</h2>
</div>
<div>
  <Heading color="pink">pink</Heading>
  <Heading color="purpleCyan">purpleCyan</Heading>
</div>;

Tags

By default, every Heading is specified with the `<h2>` tag, but you can change that to better match your semantic needs.

h1

h2

h3

h4

h5
h6
<div>
  <h1 class="drac-heading drac-heading-2xl drac-text-white">h1</h1>
  <h2 class="drac-heading drac-heading-xl drac-text-white">h2</h2>
  <h3 class="drac-heading drac-heading-lg drac-text-white">h3</h3>
  <h4 class="drac-heading drac-text-white">h4</h4>
  <h5 class="drac-heading drac-heading-sm drac-text-white">h5</h5>
  <h6 class="drac-heading drac-heading-xs drac-text-white">h6</h6>
</div>
<div>
  <Heading as="h1" size="2xl">
    h1
  </Heading>
  <Heading as="h2" size="xl">
    h2
  </Heading>
  <Heading as="h3" size="lg">
    h3
  </Heading>
  <Heading as="h4" size="md">
    h4
  </Heading>
  <Heading as="h5" size="sm">
    h5
  </Heading>
  <Heading as="h6" size="xs">
    h6
  </Heading>
</div>;

Properties

size

The size and type of Heading to be used. Denotes hierarchy.

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

The Dracula UI color to be applied to the Heading.

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

The HTML element to be used

keyof HTMLElementTagNameMap