VBoard – Components · Alerts & Modals

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.