Interactivity

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

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" />
Stack Overflow logo with class ud-auto
.ud-auto
Stack Overflow logo with class ud-none
.ud-none
Deploys by Netlify