Soft / Ghost Alerts
Translucent background alerts — the standard style for most UI feedback.
Code
Information
This is a primary info alert. Use it to show helpful hints and general information to users.
Success!
Your changes have been saved successfully. All data has been updated.
Warning
Your account storage is at 80% capacity. Consider upgrading your plan.
Error
Something went wrong while processing your request. Please try again later.
System Notice
Scheduled maintenance on Sunday 2:00 AM – 4:00 AM UTC. Services may be unavailable.
Premium Feature
Upgrade to Pro to unlock advanced analytics, exports and priority support.
<div class="alert alert-success"> <i class="fas fa-circle-check alert-icon"></i> <div class="alert-body"> <div class="alert-title">Success!</div> <div class="alert-msg">Changes saved.</div> </div> </div>
Solid Alerts
High-contrast filled alerts for critical messages and system-level notices.
Code
Primary Alert
This is a solid primary alert with white text for maximum contrast.
Success Alert
Operation completed successfully. Your data has been saved.
Warning Alert
This action is irreversible. Please confirm before proceeding.
Danger Alert
Critical error detected. Please contact support immediately.
Info Alert
New features are now available. Check the release notes for details.
<div class="alert alert-danger-s"> <i class="fas fa-circle-xmark alert-icon"></i> <div class="alert-body">...</div> </div>
Outline & Left-Border Alerts
Outline variants and bordered-left alerts for subtle, editorial-style notices.
Code
Outline
Outline Primary
A bordered alert with transparent background for subtle feedback.
Outline Success
Deployment completed. All systems are operational.
Outline Danger
Failed to connect to the server. Check your network settings.
Left Border
Note
Left-border alerts work great for documentation callouts and inline hints.
Tip
Use keyboard shortcut Ctrl+S to save your work automatically.
Caution
Changing this setting will affect all users in your organisation.
Important
API rate limit reached. Requests will resume in 60 seconds.
<div class="alert alert-border-success">...content...</div> <div class="alert alert-outline-primary">...content...</div>
Dismissible Alerts
Alerts with an × close button. Click the button to dismiss with a slide-out animation.
Code
Dismissible Info
Click the × button to dismiss this alert permanently.
Profile Updated
Your profile information has been saved successfully.
Storage Warning
You are using 85% of your 5 GB storage. Upgrade now
Payment Failed
Your card was declined. Please update your payment method.
<div class="alert alert-success"> <i class="fas fa-circle-check alert-icon"></i> <div class="alert-body">...</div> <button class="alert-close" onclick="dismissAlert(this)"></button> </div>
Alerts with Actions
Alerts that include inline action buttons for immediate user responses.
Code
Session Expiring Soon
Your session will expire in 5 minutes due to inactivity.
Update Available — v4.2.0
A new version of VBoard is available with bug fixes and new features.
Account Suspended
Your account has been suspended due to suspicious activity.
<div class="alert alert-warning"> <div class="alert-body"> <div class="alert-title">Session Expiring</div> <div class="alert-actions"> <button class="alert-btn">Stay Signed In</button> </div> </div> </div>
Toast Notifications
Click any button to trigger a live toast. Toasts auto-dismiss after 4 seconds with a progress bar.
Code
By type
By position
// JavaScript showToast('success', 'Changes Saved', 'Your profile has been updated.'); showToast('danger', 'Error', 'Something went wrong.'); showToast('warning', 'Warning', 'Storage almost full.', 'bl'); showToast('info', 'Info', 'Dashboard refreshed.', 'tl');
Basic Modals
Standard modals in four sizes — sm, md, lg, xl. Click to open, press Esc or click outside to close.
Code
<button onclick="openModal('myModal')">Open Modal</button> <div class="modal-overlay modal-md" id="myModal"> <div class="modal-backdrop" onclick="closeModal('myModal')"></div> <div class="modal modal-md"> <div class="modal-header">...</div> <div class="modal-body">...</div> <div class="modal-footer">...</div> </div> </div>
Confirm / Alert Dialogs
Focused confirmation dialogs for destructive or important user actions.
Code
<!-- Confirm dialog pattern --> <div class="modal-body" style="text-align:center"> <div class="confirm-icon ci-danger"><i class="fas fa-trash"></i></div> <div class="confirm-title">Delete User?</div> <p class="confirm-text">This cannot be undone.</p> </div>
Form Modal
Modals containing forms for quick create/edit flows without navigating away.
Code
<div class="modal-body"> <div class="form-group"> <label class="form-label">Name</label> <input class="form-control" type="text"> </div> </div>
Modal Animations
Different entrance animations: default scale, slide from top, slide from bottom, flip.
Code
<!-- Scale (default) --> <div class="modal-overlay modal-md"> <!-- Slide from top --> <div class="modal-overlay modal-md modal-slide-top"> <!-- Slide from bottom --> <div class="modal-overlay modal-md modal-slide-bottom"> <!-- Flip --> <div class="modal-overlay modal-md modal-flip">
Drawers / Side Panels
Slide-in panels from the right or left for settings, detail views and quick actions.
Code
<div class="drawer-overlay" id="myDrawer"> <div class="drawer-backdrop" onclick="closeDrawer('myDrawer')"></div> <div class="drawer"> <div class="drawer-header">...</div> <div class="drawer-body">...</div> </div> </div>
Multi-Step Modal
Wizard-style modal with step indicator for complex multi-stage flows.
User Details
JD
James Davidson
Senior Product Designer
Email
james.davidson@vboard.io
Phone
+1 (415) 555-0192
Dept
Engineering
Location
San Francisco, CA
Status
Active
Quick Settings
Appearance
Dark Mode
Compact View
Notifications
Email Alerts
Push Alerts