Modal

vel-src: modal.css

A dialog overlay component for displaying focused content, forms, or confirmations above the page.

Class	Properties
vel-modal-backdrop	Full-screen overlay backdrop behind the modal
vel-modal	The modal dialog container, centered on screen
vel-modal-sm	Small modal width (max-width: 400px)
vel-modal-lg	Large modal width (max-width: 720px)
vel-modal-xl	Extra-large modal width (max-width: 960px)
vel-modal-full	Full-screen modal (width: 100vw; height: 100vh)
vel-modal-header	Top section of the modal with title and close button
vel-modal-body	Main content area of the modal with padding
vel-modal-footer	Bottom section of the modal with action buttons
vel-modal-title	Heading text element inside vel-modal-header
vel-modal-close	Close button positioned in the modal header

Examples

Modal structure

example.html

<div style="padding:24px;background:#060b17;border-radius:12px;font-family:system-ui,sans-serif">
  <!-- Backdrop -->
  <div class="vel-modal-backdrop">
    <!-- Modal dialog -->
    <div class="vel-modal">
      <div class="vel-modal-header">
        <h2 class="vel-modal-title">Confirm Action</h2>
        <button class="vel-modal-close" aria-label="Close">&times;</button>
      </div>
      <div class="vel-modal-body">
        <p>Are you sure you want to continue? This action cannot be undone.</p>
      </div>
      <div class="vel-modal-footer">
        <button class="vel-btn">Cancel</button>
        <button class="vel-btn vel-btn-primary">Confirm</button>
      </div>
    </div>
  </div>
</div>