Cursor

Controls the cursor style when hovering over an element.

This feature does not work in some of the most widely-used browsers.

Chrome

Edge

Firefox

Safari

Help

Indicates that the element provides helpful information.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-h px-3 py-2 rad-0 fs-md fw-600 lh-1 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Help</button>

Indicates that the requested action cannot be performed.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-na px-3 py-2 rad-0 fs-md fw-600 lh-1 bg-green-1 tc-green b-1 bc-green-4 h:bg-green-1 f:oc-green-1 f:os-s f:ow-2">Start</button>

Indicates that the element is a interactive element that can be activated.

Try hovering over the buttons to see how the cursor transforms with your mouse.

<button class="c-p px-3 py-2 rad-0 fs-md fw-600 lh-1 bg-white tc-slate-8 b-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Buy</button>

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

You can combine responsive breakpoints like sm:c-*, md:c-*, lg:c-*, and xxl:c-* to allow targeting specific utilities in different viewports.

Alternatively, you can apply :hover by using h:c-* utility to override elements and change their values when hovering over them.