...
Classes text--animated-links and text--animated-links-borderless are applied to container elements (e.g., <div>, <p>, etc.) and apply hover/focus animations to all links within that element (note the plural links in the class name). Classes text--animated-link and text--animated-link-borderless are applied directly to <a> elements and affect only the elements they are applied to (not the singular link in the class name).
| Code Block |
|---|
<!-- Apply animations to all links -->
<p class="text--animated-links">
Be a hero - <a href="...">adopt a homeless animal</a> or <a href="...">make a monetary donation</a>.
</p>
<!-- Apply animation to a specific link -->
<p>
Be a hero - <a class="text--animated-link" href="...">adopt a homeless animal</a> or <a href="...">make a monetary donation</a>.
</p> |
Classes with the -borderless suffix have no border treatment applied in the links off state, whereas classes without the -borderless suffix will apply a bottom border in this case.
...