HUD Elements | UltraViolet

HUD (Heads-Up Display) Components

Futuristic interface components with a cyberpunk HUD aesthetic, featuring glowing borders, glassmorphism effects, and animated SVG frames.

HUD components are perfect for creating immersive, sci-fi themed dashboards and interfaces. They include modals, offcanvas panels, cards, and buttons with glowing neon effects.

HUD Modal Component

Futuristic modal dialogs with glassmorphism and glowing effects

Live Demo

Click the buttons to see HUD modals in action:

Basic Modal Structure

A basic HUD modal with header and footer:

<div class="modal fade modal-hud" id="hudModal" tabindex="-1" 
     aria-labelledby="hudModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <div class="hud-header-svg-container" aria-hidden="true">
                    @include("components.hud.modal-header-svg")
                </div>
                <h5 class="modal-title orbitron" id="hudModalLabel">System Alert</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" 
                        aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>Modal content goes here.</p>
            </div>
            <div class="modal-footer">
                <div class="hud-footer-svg-container" aria-hidden="true">
                    @include("components.hud.modal-footer-svg")
                </div>
                <button type="button" class="btn btn-cyber" data-bs-dismiss="modal">
                    Close
                </button>
            </div>
        </div>
    </div>
</div>

<!-- Trigger -->
<button class="btn btn-cyber" data-bs-toggle="modal" data-bs-target="#hudModal">
    Launch HUD Modal
</button>

Usage Guidelines

Add the .modal-hud class to the modal wrapper
Include SVG header/footer decorations using the provided components
Use the .orbitron font class for modal titles
Use .btn-cyber buttons for actions to maintain the HUD aesthetic

lightbulb Tip: The SVG decorations add animated glowing effects that enhance the futuristic feel.

HUD Offcanvas Component

Slide-in panels with HUD styling for navigation and menus

Live Demo

Click to open a HUD offcanvas panel:

Offcanvas Structure

Basic HUD offcanvas with menu items:

<div class="offcanvas offcanvas-start offcanvas-hud" tabindex="-1" 
     id="hudOffcanvas" aria-labelledby="hudOffcanvasLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title orbitron" id="hudOffcanvasLabel">
            System Interface
        </h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" 
                aria-label="Close"></button>
    </div>

    <div class="hud-divider-top" aria-hidden="true">
        @include("components.hud.offcanvas-divider-top")
    </div>

    <div class="offcanvas-body">
        <div class="menu-header orbitron">Navigation</div>
        <div class="list-group list-group-flush">
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">dashboard</span>
                Dashboard
            </a>
            <a href="#" class="list-group-item list-group-item-action">
                <span class="material-symbols-rounded">settings</span>
                Settings
            </a>
        </div>

        <div class="hud-divider-bottom" aria-hidden="true">
            @include("components.hud.offcanvas-divider-bottom")
        </div>
    </div>
</div>

<!-- Trigger -->
<button class="btn btn-cyber" data-bs-toggle="offcanvas" data-bs-target="#hudOffcanvas">
    Open HUD Menu
</button>

Usage Guidelines

Add the .offcanvas-hud class to the offcanvas element
Include top and bottom SVG dividers for visual separation
Use .menu-header.orbitron for section headers
Standard Bootstrap list-group items work seamlessly

lightbulb Tip: The HUD offcanvas works great for quick action menus or navigation panels.

HUD Card Component

Glassmorphism cards with glowing borders and neon effects

Live Demo

Interactive HUD cards with hover effects:

Active Users

1,247

Currently online

Server Load

42%

Optimal performance

Response Time

28ms

Average latency

Basic HUD Card

Simple HUD card for displaying metrics:

<div class="hud-card">
    <h6 class="orbitron">Card Title</h6>
    <h2 class="text-primary mb-2">1,247</h2>
    <p class="text-muted small mb-0">Subtitle or description</p>
</div>

Grid Layout with HUD Cards

Multiple HUD cards in a responsive grid:

<div class="row g-3">
    <div class="col-md-4">
        <div class="hud-card">
            <h6 class="orbitron">Metric 1</h6>
            <h2 class="text-success">98%</h2>
            <p class="text-muted small mb-0">Status message</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="hud-card">
            <h6 class="orbitron">Metric 2</h6>
            <h2 class="text-warning">76%</h2>
            <p class="text-muted small mb-0">Status message</p>
        </div>
    </div>
    <div class="col-md-4">
        <div class="hud-card">
            <h6 class="orbitron">Metric 3</h6>
            <h2 class="text-info">125</h2>
            <p class="text-muted small mb-0">Status message</p>
        </div>
    </div>
</div>

Usage Guidelines

Add the .hud-card class to any container element
Use .orbitron font for headings to enhance the futuristic look
Cards automatically include hover effects with enhanced glow
Ideal for metrics, stats, and data visualization panels

lightbulb Tip: HUD cards work great on darker backgrounds for maximum visual impact.

HUD Buttons

Futuristic buttons with glowing borders and cyberpunk aesthetics

Cyber Button - Live Demo

Cyber buttons with glowing cyan borders in various sizes:

CPU Button - Live Demo

CPU buttons with contextual color variants:

CPU buttons in different sizes:

Cyber Button Examples

Simple cyber button with glowing cyan effect:

<!-- Basic cyber button -->
<button class="btn btn-cyber">
    Launch System
</button>

<!-- With icon -->
<button class="btn btn-cyber">
    <i class="material-symbols-rounded me-2">bolt</i>Quick Actions
</button>

<!-- Size variants -->
<button class="btn btn-cyber btn-lg">Large Button</button>
<button class="btn btn-cyber">Standard Button</button>
<button class="btn btn-cyber btn-sm">Small Button</button>

CPU Button Examples

CPU buttons with contextual colors and variants:

<!-- Basic CPU button -->
<button class="cpubtn">Default</button>

<!-- Color variants -->
<button class="cpubtn cpubtn-primary">Primary</button>
<button class="cpubtn cpubtn-success">Success</button>
<button class="cpubtn cpubtn-warning">Warning</button>
<button class="cpubtn cpubtn-danger">Danger</button>
<button class="cpubtn cpubtn-info">Info</button>

<!-- Size variants -->
<button class="cpubtn cpubtn-primary btn-lg">Large</button>
<button class="cpubtn cpubtn-success">Standard</button>
<button class="cpubtn cpubtn-danger btn-sm">Small</button>

<!-- With icons -->
<button class="cpubtn cpubtn-danger">
    <i class="material-symbols-rounded me-2">delete</i>Delete
</button>

Button with Dropdown

Cyber button integrated with Bootstrap dropdown:

<div class="dropdown">
    <button type="button" class="btn btn-cyber dropdown-toggle" 
            data-bs-toggle="dropdown" aria-expanded="false">
        System Actions
    </button>
    <ul class="dropdown-menu dropdown-menu-end border shadow shadow-lg">
        <li><a class="dropdown-item" href="#">
            <i class="material-symbols-rounded me-2">refresh</i>Refresh
        </a></li>
        <li><a class="dropdown-item" href="#">
            <i class="material-symbols-rounded me-2">download</i>Export
        </a></li>
        <li><hr class="dropdown-divider"></li>
        <li><a class="dropdown-item" href="#">
            <i class="material-symbols-rounded me-2">settings</i>Configure
        </a></li>
    </ul>
</div>

Usage Guidelines

Add the .btn-cyber class to any button element
Combine with Material Symbols icons for enhanced visual appeal
Works with Bootstrap utilities like btn-sm
Automatically includes hover glow effects and transitions

Styling Reference

Quick reference for all HUD component classes

palette Class Reference

Class	Component	Description
`.modal-hud`	Modal	Applies HUD styling to modals - glassmorphism, glowing borders, animated SVG decorations
`.offcanvas-hud`	Offcanvas	Applies HUD styling to offcanvas panels with glowing effects
`.hud-card`	Container	Glassmorphism card with glowing cyan/magenta borders, includes hover glow animation
`.btn-cyber`	Button	Glowing cyan button with hover effects and glassmorphism background
`.orbitron`	Typography	Orbitron font for futuristic headings and labels
`.menu-header`	Typography	Styled section header for offcanvas menus

css CSS Reference

Core CSS for HUD components:

/* HUD Modal Styles */
.modal-hud {
  --bs-modal-bg: transparent;
  --bs-modal-border-color: transparent;
}

.modal-hud .modal-content {
  background: rgba(13, 2, 33, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  border-left: 1px solid rgba(0, 255, 255, 0.3);
  border-right: 1px solid rgba(0, 255, 255, 0.3);
}

/* HUD Offcanvas Styles */
.offcanvas-hud {
  background: rgba(13, 2, 33, 0.25);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.2);
  border-right: 1px solid rgba(0, 255, 255, 0.3);
}

/* HUD Card Styles */
.hud-card {
  background: rgba(13, 2, 33, 0.3);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.15);
  transition: all 0.3s ease;
}

.hud-card:hover {
  box-shadow: 0 0 30px rgba(0, 255, 255, 0.4);
  border-color: rgba(0, 255, 255, 0.6);
}

/* Cyber Button Styles */
.btn-cyber {
  background-color: rgba(0, 255, 255, 0.15);
  border: 1px solid rgba(0, 255, 255, 0.5);
  color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.btn-cyber:hover {
  background-color: rgba(0, 255, 255, 0.3);
  box-shadow: 0 0 15px rgba(0, 255, 255, 0.5);
  color: #ffffff;
}

info Best Practices

Typography: Always use the .orbitron class for HUD component titles
Icons: Material Symbols Rounded work best with the HUD aesthetic
Colors: Stick to cyan, magenta, and neon colors for consistency
Background: HUD components look best against dark backgrounds
Accessibility: Always include proper ARIA labels and roles

Search

Quick Commands

HUD (Heads-Up Display) Components

HUD Offcanvas Component

Live Demo

Offcanvas Structure

Usage Guidelines

HUD Card Component

Live Demo

Active Users

1,247

Server Load

42%

Response Time

28ms

Basic HUD Card

Grid Layout with HUD Cards

Usage Guidelines

HUD Buttons

Cyber Button - Live Demo

CPU Button - Live Demo

Cyber Button Examples

CPU Button Examples

Button with Dropdown

Usage Guidelines

Styling Reference

palette Class Reference

css CSS Reference

info Best Practices

System Interface

System Status

Command Palette

System Update Available

New User Registration

Backup Completed

Security Alert

Monthly Report Ready

Server Maintenance

Search

Quick Commands

HUD (Heads-Up Display) Components

HUD Modal Component

Live Demo

Basic Modal Structure

Usage Guidelines

HUD Offcanvas Component

Live Demo

Offcanvas Structure

Usage Guidelines

HUD Card Component

Live Demo

Active Users

1,247

Server Load

42%

Response Time

28ms

Basic HUD Card

Grid Layout with HUD Cards

Usage Guidelines

HUD Buttons

Cyber Button - Live Demo

CPU Button - Live Demo

Cyber Button Examples

CPU Button Examples

Button with Dropdown

Usage Guidelines

Styling Reference

palette Class Reference

css CSS Reference

info Best Practices

System Interface