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.

Pointer events classes

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.

Pointer events examples

1
2
<div class="pe-auto"></div>
<div class="pe-none"></div>

User select

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

User select classes

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

User select examples

1
2
<div class="us-auto"></div>
<div class="us-none"></div>
.us-auto
.us-none

User drag

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

Note: These classes only work in Safari and Chrome.

User drag classes

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.

User drag examples

1
2
<img class="ud-auto" />
<img class="ud-none" />
No data
.ud-auto
No data
.ud-none