Design System

Cursor Utilities

cursor-utilities



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