Punky Builder · Patterns
Component patterns
A library of UI components: buttons, badges, alerts, fields, cards, avatars. Switch to HTML view to copy the markup.
Badges & tags
Soft and solid versions, plus a badge with a status dot.
NeutralNeutralOrangeOrangeSuccessSuccessErrorErrorInfoInfoOnline
Alerts
Four variants: info, success, warning, error.
Information
A neutral, informational message.
Success
The operation completed successfully.
Warning
Check this point before continuing.
Error
Something went wrong, try again.
Form fields
Styles for inputs, select, textarea, checkboxes, radio and toggle. (For real forms, use the native Form block.)
Cards
Three card styles assembled with native blocks.
Card with image
Image, title, description and action.
Card with icon
A featured icon for a feature.
Avatars
Sizes, status dot, and a stack of overlapping avatars.
Progress
Bars with label and percentage (width via inline style).
Frontend90%
Backend75%
DevOps60%