Interactivity

Atomic interactivity classes allow you to quickly change an element’s interactivity.

Pointer events

The pointer-events CSS property enables or disables all mouse events on an element.

Class	Output	Definition
`.pe-auto`	`pointer-events: auto;`	The element behaves as it would if the pointer-events property were not specified.
`.pe-none`	`pointer-events: none;`	Disables mouse events (clicking, dragging, hovering, etc.) on the element and its decendents.

<div class="pe-auto">…</div>
<div class="pe-none">…</div>

The user-select CSS property controls whether the user can select text.

Class	Output	Definition
`.us-auto`	`user-select: auto;`	The element behaves as it would if the user-select property were not specified.
`.us-none`	`user-select: none;`	The text of the element and its sub-elements is not selectable. It may be appropriate to combine with `.c-default`

<div class="us-auto">…</div>
<div class="us-none">…</div>

.us-auto

.us-none

The user-drag CSS property controls whether the user can drag an image.

Note: These classes only work in Safari and Chrome.

Class	Output	Definition
`.ud-auto`	`user-drag: auto;`	The element behaves as it would if the user-drag property were not specified.
`.ud-none`	`user-drag: none;`	The element and its sub-elements are not draggable. When applied to an image, the ghosted image will not appear in a loaded mouse cursor.

<img class="ud-auto" />
<img class="ud-none" />

.ud-auto

.ud-none