Cursor Utilities

Adjust the `cursor` property.

Default cursor

Pointer cursor

Context-menu cursor

Help cursor

Progress cursor

Crosshair cursor

Text cursor

Copy cursor

Move cursor

Not-allowed cursor

Zoom-in cursor

Zoom-out cursor

Grab cursor

Grabbing cursor

<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--default">Default cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--pointer">Pointer cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--context-menu">Context-menu cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--help">Help cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--progress">Progress cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--crosshair">Crosshair cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--text">Text cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--copy">Copy cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--move">Move cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--not-allowed">Not-allowed cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--zoom-in">Zoom-in cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--zoom-out">Zoom-out cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--grab">Grab cursor</div>
<div class="gds-card -p-v-2 -p-h-3 -m-b-2 -cursor--grabbing">Grabbing cursor</div>

Optional classes:

• -cursor--default
• -cursor--pointer
• -cursor--context-menu
• -cursor--help
• -cursor--progress
• -cursor--crosshair
• -cursor--text
• -cursor--copy
• -cursor--move
• -cursor--not-allowed
• -cursor--zoom-in
• -cursor--zoom-out
• -cursor--grab
• -cursor--grabbing