Anchor

Links, or clicky text treatment

Example

Open example in a new window

Code sample

<a href="#/" class="anchor">
  An anchor element
</a>

Notes

An anchor is styled by virtue of the following situations:

  • The anchor is in a .content block, and is part of free-form text

OR

  • The anchor has an anchor class applied, and…
  • The anchor is nestled in a .container element, with a particular theme applied.

Details

Pattern scope:
Atom – The smallest possible pattern, independent
Relevant assets:
Stylesheets:

Variants

  • Image Anchors 

    Image links

    Example

    Open type in a new window

    Code sample

    <a href="#" class="anchor">
  <picture>
    <source srcset="https://placehold.co/900x900/000000/fffffff/webp" media="(min-resolution: 3x)">
    <img width="300" height="300" src="https://placehold.co/600x600/000000/fffffff/webp" alt>
  </picture>
</a>

    Notes

    Use the class anchor