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