interactions.md

layout	title	description	group
docs	Interactions	Utility classes that change how users interact with contents of a website.	utilities

Text selection

Change the way in which the content is selected when the user interacts with it.

{% capture example %}

This paragraph will be entirely selected when clicked by the user.

This paragraph has the default select behavior.

This paragraph will not be selectable when clicked by the user.

{% endcapture %} {% include example.html content=example %}

Customize the available classes by changing the $user-selects Sass list in _variables.scss.

Cursors

Change the cursor from a default value to pointer with our built-in attribute utility, role="button". Add this attribute to an element to convey semantics to your visitors and add an explicit pointer cursor to help indicate elements are interactive.

{% capture example %} Non-button element button {% endcapture %} {% include example.html content=example %}

Customize the available classes by changing the $cursors Sass list in _variables.scss.