Alerts

vel-src: alert.css

Contextual feedback messages for info, success, warning, and danger states. Supports accent-border and filled display modes.

Class	Properties
vel-alert	Base alert — padding, border-radius, border-left accent, flex layout
vel-alert-info	Info blue accent color and background tint
vel-alert-success	Success green accent color and background tint
vel-alert-warning	Warning amber accent color and background tint
vel-alert-danger	Danger red accent color and background tint
vel-alert-primary	Primary purple accent color and background tint
vel-alert-filled-info	Solid info background, white text
vel-alert-filled-success	Solid success background, white text
vel-alert-filled-warning	Solid warning background, dark text
vel-alert-filled-danger	Solid danger background, white text
vel-alert-dismiss	Adds a dismiss button positioned top-right

Examples

Accent border variants

Info — Something you should know.

Success — Your changes have been saved.

Warning — This action may have side effects.

Danger — An error occurred. Please try again.

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;flex-direction:column;gap:10px;">
  <div class="vel-alert vel-alert-info">Info — Something you should know.</div>
  <div class="vel-alert vel-alert-success">Success — Your changes have been saved.</div>
  <div class="vel-alert vel-alert-warning">Warning — This action may have side effects.</div>
  <div class="vel-alert vel-alert-danger">Danger — An error occurred. Please try again.</div>
</div>

Filled variant

Success — Your account has been created.

Danger — Failed to connect to the server.

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif;display:flex;flex-direction:column;gap:10px;">
  <div class="vel-alert vel-alert-filled-success">Success — Your account has been created.</div>
  <div class="vel-alert vel-alert-filled-danger">Danger — Failed to connect to the server.</div>
</div>