A card with a border that pulses softly to draw a glance over. Use it for live alerts, fresh items, or a call to action that should feel active now.
Progress card
A card pairing a progress bar with a label and value reading. Use it to show task completion, goals, or usage limits inside a dashboard or account view.

More like this
Browse Components
A card with a light sweep that glides across its surface. Use it as a loading skeleton or to add gentle motion to a featured tile in a busy grid.

A card layered over offset copies to suggest a deck behind it. Use it for collections, albums, or grouped items where many sit under one cover here.

A card showing a state badge, label, and short note together. Use it on dashboards to surface health, order, or system status at a quick glance.

A card that tilts under the cursor to follow its position closely. Use it for interactive feature tiles or showcases where slight motion adds polish.

A card with a colored accent line along one edge that draws the eye. Use it to group related text and labels while signaling category or status.

A card whose border traces a moving outline around the edges. Use it to spotlight a featured plan, offer, or item that needs attention on the page.

A card framed by a shifting gradient border that flows around the edges. Use it to highlight a premium tier or hero item in a grid of options.

A card that brightens its border when focused or hovered. Use it to mark the recommended choice in a pricing grid or a selected option in a form.

A card with a diagonal ribbon pinned to one corner for a short label. Use it to flag New, Sale, or Featured items in a app or listing grid.

A card with a notched border that carves out shape along its edge. Use it for tickets, coupons, or passes where a distinct outline reads as a stub.

A card outlined with a dashed border for a light, sketch feel. Use it for empty states, upload zones, or placeholders that invite the user to add content.
