v1.1.1

Link

Styled anchor elements for inline text links, navigation, and external references.

Default

Standard link styles with color and underline variants.

html
Default link Muted link 
<a href="#" class="vt-link">Default link</a>
<a href="#" class="vt-link vt-link-muted">Muted link</a>

With Icons

Links with trailing or leading icons.

html
External link Learn more View document Download file 
<div class="vt-flex vt-flex-wrap vt-items-center vt-gap-6">
  <a href="#" class="vt-link vt-inline-flex vt-items-center vt-gap-1">
    External link <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-external-link vt-w-3.5 vt-h-3.5">
      <path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
    </svg>
  </a>
  <a href="#" class="vt-link vt-inline-flex vt-items-center vt-gap-1">
    Learn more <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-arrow-right vt-w-3.5 vt-h-3.5">
      <path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
    </svg>
  </a>
  <a href="#" class="vt-link vt-inline-flex vt-items-center vt-gap-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-3.5 vt-h-3.5">
      <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
    </svg> View document
  </a>
  <a href="#" class="vt-link vt-inline-flex vt-items-center vt-gap-1">
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-download vt-w-3.5 vt-h-3.5">
      <path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path>
    </svg> Download file
  </a>
</div>

Inline

Links within text content.

html

Welcome to Veritheme. Read our documentation for more details on how to get started with the component library.

By signing up, you agree to our Terms of Service and Privacy Policy.

This project is maintained by the Veritheme team. Contributions are welcome on GitHub . 

<div class="vt-max-w-lg vt-space-y-4">
  <p class="vt-text-sm vt-text-foreground-secondary vt-leading-relaxed">
    Welcome to Veritheme. Read our <a href="#" class="vt-link">documentation</a> for more details on how to get started with the component library.
  </p>
  <p class="vt-text-sm vt-text-foreground-secondary vt-leading-relaxed">
    By signing up, you agree to our <a href="#" class="vt-link">Terms of Service</a> and <a href="#" class="vt-link">Privacy Policy</a>.
  </p>
  <p class="vt-text-sm vt-text-foreground-secondary vt-leading-relaxed">
    This project is maintained by the <a href="#" class="vt-link vt-link-muted">Veritheme team</a>. Contributions are welcome on <a href="#" class="vt-link vt-link-muted vt-inline-flex vt-items-center vt-gap-0.5">GitHub <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-external-link vt-w-3 vt-h-3">
        <path d="M15 3h6v6"></path><path d="M10 14 21 3"></path><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
      </svg></a>.
  </p>
</div>

Navigation Links

Vertical and horizontal link lists for navigation.

html 
<div>
  <p class="vt-section-label vt-mb-3">Vertical</p>
  <nav class="vt-flex vt-flex-col vt-gap-0.5 vt-w-48">
    <a href="#" class="vt-nav-item vt-active vt-justify-between">
      Overview <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </a>
    <a href="#" class="vt-nav-item vt-justify-between">
      Components <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-opacity-0">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </a>
    <a href="#" class="vt-nav-item vt-justify-between">
      Utilities <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-opacity-0">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </a>
    <a href="#" class="vt-nav-item vt-justify-between">
      Theming <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-chevron-right vt-w-4 vt-h-4 vt-opacity-0">
        <path d="m9 18 6-6-6-6"></path>
      </svg>
    </a>
  </nav>
</div>

<div>
  <p class="vt-section-label vt-mb-3">Horizontal</p>
  <nav class="vt-flex vt-items-center vt-gap-1">
    <a href="#" class="vt-nav-item-sub vt-active">Home</a>
    <a href="#" class="vt-nav-item-sub">Products</a>
    <a href="#" class="vt-nav-item-sub">Pricing</a>
    <a href="#" class="vt-nav-item-sub">Contact</a>
  </nav>
</div>

Link Card

Card-style links for feature highlights or resource lists.

html
Documentation
Get started with Veritheme
Download
Get the latest release
 
<div class="vt-w-full vt-max-w-md vt-space-y-2">
  <a href="#" class="vt-flex vt-items-center vt-justify-between vt-p-4 vt-rounded-xl vt-border vt-border-border-default vt-bg-surface-card vt-hover:border-info-fill/30 vt-hover:shadow-sm vt-transition-all vt-group">
    <div class="vt-flex vt-items-center vt-gap-3">
      <div class="vt-w-10 vt-h-10 vt-rounded-lg vt-bg-info-fill/10 vt-flex vt-items-center vt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-file-text vt-w-5 vt-h-5 vt-text-info-fill">
          <path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z"></path><path d="M14 2v5a1 1 0 0 0 1 1h5"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path>
        </svg>
      </div>
      <div>
        <div class="vt-text-sm vt-font-semibold">Documentation</div>
        <div class="vt-text-xs vt-text-foreground-muted">Get started with Veritheme</div>
      </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-arrow-right vt-w-4 vt-h-4 vt-text-foreground-muted vt-group-hover:text-info-fill vt-group-hover:translate-x-0.5 vt-transition-all">
      <path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
    </svg>
  </a>
  <a href="#" class="vt-flex vt-items-center vt-justify-between vt-p-4 vt-rounded-xl vt-border vt-border-border-default vt-bg-surface-card vt-hover:border-info-fill/30 vt-hover:shadow-sm vt-transition-all vt-group">
    <div class="vt-flex vt-items-center vt-gap-3">
      <div class="vt-w-10 vt-h-10 vt-rounded-lg vt-bg-success-fill/10 vt-flex vt-items-center vt-justify-center">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-download vt-w-5 vt-h-5 vt-text-success-fill">
          <path d="M12 15V3"></path><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path><path d="m7 10 5 5 5-5"></path>
        </svg>
      </div>
      <div>
        <div class="vt-text-sm vt-font-semibold">Download</div>
        <div class="vt-text-xs vt-text-foreground-muted">Get the latest release</div>
      </div>
    </div>
    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" class="lucide lucide-arrow-right vt-w-4 vt-h-4 vt-text-foreground-muted vt-group-hover:text-info-fill vt-group-hover:translate-x-0.5 vt-transition-all">
      <path d="M5 12h14"></path><path d="m12 5 7 7-7 7"></path>
    </svg>
  </a>
</div>

Guidelines

Inline navigation inside text. NOT for actions → button (text-only action = vt-btn vt-btn-ghost).

Read our setup documentation to get started.

Do
Write link text that describes its destination.

To get started, click here.

Don't
Don't use vague link text like &ldquo;click here&rdquo;.
Read the changelog
Do
Flag external links with an external-link icon.
Read the changelog
Don't
Don't send users off-site with no visual cue.

API Reference

All CSS classes available for the Link component.

Class Type Description
vt-link Base Brand-coloured text link; underline appears on hover
vt-link-muted Modifier Secondary link that brightens to primary text on hover
vt-inline-flex vt-items-center vt-gap-1 Layout Inline flex layout for links with an icon

Accessibility

Keyboard and screen reader support.

Feature Details
Semantics Use a element for navigation, button for actions
External External links should indicate they open in a new tab via aria-label or visible text
Focus Visible focus ring via :focus-visible for keyboard navigation
Descriptive Link text should describe the destination — avoid "Click here" or "Read more"