Anchor

Anchor is an abstraction/style that can/is applied to HTML anchor elements. Consumers of this component can control, the color, size, weight, and spacing of the Anchor. Use this component to create text or element based anchors around other HTML tags or React Components.

Usage

Anchor is an abstraction/style that can/is applied to HTML anchor elements.

Visit the Dracula Castle 
<a
  href="#"
  class="drac-anchor drac-text drac-text-white drac-text-purple--hover"
  >Visit the Dracula Castle</a
>
<Anchor href="#">Visit the Dracula Castle</Anchor>;

Colors

Anchors can be customized to use any of the Dracula UI theme colors, including all solid, and gradients.

<div style="display: flex; flex-direction: column">
  <a
    href="#"
    class="drac-anchor drac-text drac-text-purple drac-text-pink--hover drac-mb-sm"
    >purple / pink</a
  ><a
    href="#"
    class="drac-anchor drac-text drac-text-cyan-green drac-text-yellow-pink--hover drac-mb-sm"
    >cyanGreen / yellowPink</a
  >
</div>
<div style={{ display: "flex", flexDirection: "column" }}>
  <Anchor href="#" color="purple" hoverColor="pink" mb="sm">
    purple / pink
  </Anchor>
  <Anchor href="#" color="cyanGreen" hoverColor="yellowPink" mb="sm">
    cyanGreen / yellowPink
  </Anchor>
</div>;

Weights

Anchors can be defined in different font weights.

normalsemiboldbold 
<div style="display: flex; flex-direction: column" class="drac-box">
  <a
    href="#"
    class="drac-anchor drac-text drac-text-white drac-text-purple--hover drac-mb-sm"
    >normal</a
  ><a
    href="#"
    class="drac-anchor drac-text drac-text-semibold drac-text-white drac-text-purple--hover drac-mb-sm"
    >semibold</a
  ><a
    href="#"
    class="drac-anchor drac-text drac-text-bold drac-text-white drac-text-purple--hover drac-mb-sm"
    >bold</a
  >
</div>
<Box style={{ display: "flex", flexDirection: "column" }}>
  <Anchor href="#" weight="normal" mb="sm">
    normal
  </Anchor>
  <Anchor href="#" weight="semibold" mb="sm">
    semibold
  </Anchor>
  <Anchor href="#" weight="bold" mb="sm">
    bold
  </Anchor>
</Box>;

Sizes

Anchors can be customize to use several different sizes.

xssmmdlg 
<div style="display: flex; flex-direction: column" class="drac-box">
  <a
    href="#"
    class="drac-anchor drac-text drac-text-xs drac-text-white drac-text-purple--hover drac-mb-sm"
    >xs</a
  ><a
    href="#"
    class="drac-anchor drac-text drac-text-sm drac-text-white drac-text-purple--hover drac-mb-sm"
    >sm</a
  ><a
    href="#"
    class="drac-anchor drac-text drac-text-white drac-text-purple--hover drac-mb-sm"
    >md</a
  ><a
    href="#"
    class="drac-anchor drac-text drac-text-lg drac-text-white drac-text-purple--hover drac-mb-sm"
    >lg</a
  >
</div>
<Box style={{ display: "flex", flexDirection: "column" }}>
  <Anchor href="#" size="xs" mb="sm">
    xs
  </Anchor>
  <Anchor href="#" size="sm" mb="sm">
    sm
  </Anchor>
  <Anchor href="#" size="md" mb="sm">
    md
  </Anchor>
  <Anchor href="#" size="lg" mb="sm">
    lg
  </Anchor>
</Box>;

External

The isExternal prop can be used to apply external link props such as target="_blank"

Find Dracula on Google 
<a
  target="_blank"
  rel="noopener noreferrer"
  href="https://www.google.com/search?q=count+dracula"
  class="drac-anchor drac-text drac-text-white drac-text-purple--hover"
  >Find Dracula on Google</a
>
<Anchor href="https://www.google.com/search?q=count+dracula" isExternal={true}>
  Find Dracula on Google
</Anchor>;

Properties

href

The path to link this anchor to.

string
size

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

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

Controls the weight of the link.

"normal" | "semibold" | "bold"
color

Controls the color of the link

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

Controls the color of the link on hover

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

Whether or not to apply external link props such as `target="_blank"` and `rel="noopener noreferrer"`

boolean