• Lightest
  • Light
  • Dark
  • Darkest
  • Medium
  • Large
  • LTR
  • RTL
Component status
Verified
Last releasedUnreleased
Current version@spectrum-css/link@3.1.3

Variants


Sizing
Verified

Show markup
<div class="spectrum-Examples">
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">No size</h4>

    <a href="#" class="spectrum-Link">Link using spectrum-Link</a>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">S</h4>

    <a href="#" class="spectrum-Link spectrum-Link--sizeS">Link using spectrum-Link</a>
  </div>
  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">M (default)</h4>

    <a href="#" class="spectrum-Link spectrum-Link--sizeM">Link using spectrum-Link</a>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">L</h4>

    <a href="#" class="spectrum-Link spectrum-Link--sizeL">Link using spectrum-Link</a>
  </div>

  <div class="spectrum-Examples-item">
    <h4 class="spectrum-Heading spectrum-Heading--sizeXS spectrum-Examples-itemHeading">XL</h4>

    <a href="#" class="spectrum-Link spectrum-Link--sizeXL">Link using spectrum-Link</a>
  </div>
</div>

Over Background
Verified

Hello, this is my spectrum-Link--overBackground. This is just filler text, but if you keep reading maybe something good will happen.

Show markup
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body" style="color: rgb(255, 255, 255);">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--overBackground"> spectrum-Link--overBackground</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

Quiet (Over Background)
Verified

Hello, this is my spectrum-Link--overBackground. This is just filler text, but if you keep reading maybe something good will happen.

Show markup
<div style="background-color: rgb(15, 121, 125); padding: 15px 20px; display: inline-block;">
  <p class="spectrum-Body" style="color: rgb(255, 255, 255);">
    Hello, this is my <a href="#" class="spectrum-Link spectrum-Link--overBackground spectrum-Link--quiet"> spectrum-Link--overBackground</a>. This is just filler text, but if you keep reading maybe something good will happen.
  </p>
</div>

Migration Guide


Subtle variant

Subtle variant was removed. Please use Quiet.