CSS Components - VelinStyle

Breadcrumb

Arrow variant:

Default Primary Success Warning Danger Removable

Class	Description
`.velin-chip`	Base chip element
`.velin-chip--primary`	Primary color variant
`.velin-chip--success`	Success color variant
`.velin-chip--warning`	Warning color variant
`.velin-chip--danger`	Danger color variant
`.velin-chip__close`	Close/remove button inside chip (44x44 touch target)

Content above

Content below

Left

Right

Class	Description
`.velin-divider`	Horizontal divider line
`.velin-divider--vertical`	Vertical divider

@

$ .00

Class	Description
`.velin-input-group`	Flex container grouping inputs with addons
`.velin-input-group__text`	Text addon (prefix/suffix)

Class	Description
`.velin-pagination`	Pagination container
`.velin-pagination__link`	Individual page link
`.velin-pagination__link--active`	Current active page

Class	Description
`.velin-spinner`	Base spinning border indicator
`.velin-spinner--sm`	Small size
`.velin-spinner--lg`	Large size
`.velin-spinner--dots`	Dot-style loading indicator

12,345 Total Users

98.7% Uptime

3.2s Avg. Load

✓Order

2Payment

3Confirm

Class	Description
`.velin-stepper`	Stepper container
`.velin-stepper__step`	Individual step
`.velin-stepper__step--active`	Current active step
`.velin-stepper__step--completed`	Completed step
`.velin-stepper__marker`	Step number/icon
`.velin-stepper__label`	Step label text

XSS protection, CSP docs, security utilities.

14 new CSS/JS features, A11y fixes, CLI, 13 themes.

Full component library, documentation site.

Class	Description
`.velin-timeline`	Timeline container
`.velin-timeline__item`	Single timeline entry
`.velin-timeline__marker`	Circle dot on the timeline line
`.velin-timeline__content`	Content area for text/cards

Class / Attribute	Description
`.velin-tooltip`	Tooltip container (on any inline element)
`data-velin-tooltip="text"`	Tooltip content text
`.velin-tooltip--bottom`	Position below the element

For the full interactive drawer with focus trapping, see <velin-drawer> Web Component.