Links — StyloftCSS

Plain and icon links

Live preview

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-cluster sl-gap-4">
  <a class="sl-link" href="/getting-started/">Read the guide</a
  ><a class="sl-link" href="/components/"
    >Explore components
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" /></svg
  ></a>
</div>

HTML source · enable JavaScript for the playground14 lines · UTF-8

Animated underline

Live preview

Meet the palette Explore layouts

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-cluster sl-gap-4">
  <a class="sl-link sl-link--underline" href="/themes/">Meet the palette</a
  ><a class="sl-link sl-link--underline" href="/layouts/"
    >Explore layouts
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" /></svg
  ></a>
</div>

HTML source · enable JavaScript for the playground14 lines · UTF-8

A navigation link group

Live preview

View HTML / PlaygroundHTML source

example.htmlHTML

<nav class="sl-cluster" aria-label="Example link group">
  <a class="sl-link sl-link--underline" href="/components/buttons/">Buttons</a
  ><a class="sl-link sl-link--underline" href="/components/cards/">Cards</a
  ><a class="sl-link sl-link--underline" href="/components/accordions/">Accordions</a>
</nav>

HTML source · enable JavaScript for the playground5 lines · UTF-8

A download destination

Live preview

Download motion CSS ↓Download variants ↓

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-cluster sl-gap-4">
  <a class="sl-link sl-link--underline" href="/downloads/motion.min.css" download
    >Download motion CSS ↓</a
  ><a class="sl-link" href="/downloads/variants.min.css" download
    >Download variants ↓</a
  >
</div>

HTML source · enable JavaScript for the playground7 lines · UTF-8

A link styled as an action

Live preview

Start building

View HTML / PlaygroundHTML source

example.htmlHTML

<div class="sl-cluster sl-gap-4">
  <a class="sl-btn sl-btn--outline sl-hover-fill" href="/getting-started/"
    >Start building
    <svg
      viewBox="0 0 24 24"
      fill="none"
      stroke="currentColor"
      stroke-width="2"
      aria-hidden="true"
    >
      <path d="M5 12h14m-6-6 6 6-6 6" /></svg
  ></a>
</div>

HTML source · enable JavaScript for the playground13 lines · UTF-8

Classes beginning with sl- come from StyloftCSS. Examples with demo- classes also use our optional demo extension CSS ↓. Load it after the core to reproduce those details.