Page Comparison

...

<p class="text--emulate-h1">...</p>
<p class="text--emulate-h2">...</p>
<p class="text--emulate-h3">...</p>
<p class="text--emulate-h4">...</p>
<p class="text--emulate-h5">...</p>
<p class="text--emulate-h6">...</p>

Animating links

The following classes will cause links to animate on hover and focus:

• text--animated-links

• text--animated-links-boderless

• text--animated-link

• text--animated-link-borderless

What’s the difference?

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).

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.