Landing · Elements

Link

Inline text links for landing copy: the brand purple, a soft underline that strengthens on hover, and a quiet variant for footer and secondary links. Colour binds to --aha-color-primary (matching the live site) and weight to --aha-weight-semibold (the DS type scale is 400/600, so the DS wins over the live site's 500). No product Link component exists yet, so this is the landing definition.

◆ generated from landing/link.json — do not edit by hand

Preview

Explore our documentation, browse ready-made templates, or see pricing before you sign up.

Paste-and-run HTML

Framework-free — copy the whole block into any page (Webflow, WordPress, a static site). It binds only to the shared --aha-* tokens, so load the token layer once on the page first and the block inherits the AhaSlides brand automatically.

link.html

<style>
.aha-copy{
  font-family:var(--aha-font-product);
  font-size:var(--aha-size-l);
  line-height:var(--aha-line-height-body);
  color:var(--aha-text-secondary);
  max-width:60ch;
}
.aha-link{
  color:var(--aha-color-primary);
  font-weight:var(--aha-weight-semibold);
  text-decoration:none;
  border-bottom:1px solid var(--aha-purple-30);
  transition:color var(--aha-motion-fast) var(--aha-ease-in-out),border-color var(--aha-motion-fast) var(--aha-ease-in-out);
}
.aha-link:hover{color:var(--aha-color-primary-hover);border-bottom-color:var(--aha-color-primary-hover)}
.aha-link:focus-visible{outline:var(--aha-space-2) solid var(--aha-focus);outline-offset:var(--aha-space-2);border-radius:var(--aha-radius-xs)}
.aha-link--quiet{color:var(--aha-text-secondary);border-bottom-color:var(--aha-border)}
.aha-link--quiet:hover{color:var(--aha-color-primary);border-bottom-color:var(--aha-color-primary)}
</style>
<p class="aha-copy">Explore our <a class="aha-link" href="#docs">documentation</a>, browse <a class="aha-link" href="#templates">ready-made templates</a>, or <a class="aha-link aha-link--quiet" href="#pricing">see pricing</a> before you sign up.</p>

Load the tokens once

Add this to your page <head> before the block — it defines every --aha-* custom property the block reads:

head

<link rel="stylesheet" href="https://ahaslides-product.github.io/ahaslides-design/variables.css">