Cursor
Set the cursor style when hovering over an element.
Limited availability
This feature does not work in some of the most widely-used browsers.
Chrome
Edge
Firefox
SafariDesktop only
Usage
Help
Indicate that the element provides helpful information.
Try hovering over the buttons to see how the cursor transforms.
<button class="c-h px-3 py-2 br-0 fs-md fw-600 lh-1 bg-white c-slate-8 bw-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Help</button>Not Allowed
Indicate that an action cannot be performed.
<button class="c-na px-3 py-2 br-0 fs-md fw-600 lh-1 bg-green-1 c-green bw-1 bc-green-4 h:bg-green-1 f:oc-green-1 f:os-s f:ow-2">Start</button>Pointer
Indicate that an element is interactive.
<button class="c-p px-3 py-2 br-0 fs-md fw-600 lh-1 bg-white c-slate-8 bw-1 bc-silver-4 h:bg-silver-1 f:oc-silver-1 f:os-s f:ow-2">Buy</button>Using utility variants
Responsive Design
Use breakpoint prefixes to target different screen sizes. Styles apply from the breakpoint & up.
sm:c-[value]Small≥640px
md:c-[value]Medium≥768px
lg:c-[value]Large≥1024px
xxl:c-[value]Extra Large≥1536px
Hover State
Apply styles conditionally on hover using the h: prefix.
Add the h: prefix to apply styles only when the user hovers over the element.
Syntax:
h:c-[value]