PowerShell Universal
Ironman SoftwareForums
v2
v2
  • About
  • Get Started
  • Additional Resources
  • Installation
    • Docker
    • Upgrading
  • Licensing
  • System Requirements
  • Supported Browsers
  • Cmdlet Help
  • Templates
  • API
    • About
    • Endpoints
    • Security
    • Error Handling
    • Rate Limiting
  • Automation
    • About Automation
    • Scripts
      • Parameters
    • Jobs
    • Schedules
    • Terminals
    • Triggers
  • User Interfaces
    • About
    • Dashboards
      • Building Dashboards
      • Components
        • Dashboards
        • Pages
        • Dynamic Regions
        • Element
        • Error Boundary
        • HTML
        • Building Custom Components
        • Data Display
          • Alert
          • Chip
          • Date and Time
          • Icon
          • List
          • Table
          • Tree View
          • Typography
        • Data Visualization
          • Charts
          • Map
        • Feedback
          • Backdrop
          • Modal
          • Progress
          • Skeleton
        • Inputs
          • Autocomplete
          • Button
          • Checkbox
          • Code Editor
          • Date Picker
          • Editor
          • Floating Action Button
          • Form
          • Radio
          • Select
          • Slider
          • Switch
          • Textbox
          • Time Picker
          • Transfer List
          • Upload
        • Navigation
          • Drawer
          • Link
          • Menu
          • Stepper
          • Tabs
        • Layout
          • Grid Layout
          • Grid
          • Hidden
        • Utilities
          • Transitions
        • Surfaces
          • AppBar
          • Card
          • Paper
          • Expansion Panel
      • Interaction
      • Marketplace
      • Role Based Access
      • Scheduled Endpoints
      • Sessions
      • Themes
        • Cascading Style Sheets
        • Styles
      • Custom Variable Scopes
      • Migrating From Universal Dashboard 2.9
    • Pages
      • Alerts
      • Bar Chart
      • Button
      • Form
      • iFrame
      • Image
      • Line Chart
      • Liquid Chart
      • Paragraph
      • Statistic
      • Table
      • Variables
  • Platform
    • Cache
    • Desktop Mode
      • Hotkeys
    • Modules
    • Monitoring
    • Published Folders
    • Templates
    • Variables
  • Configuration
    • About
    • API
    • Environments
    • Git
    • Hosting
      • Azure
      • IIS
      • Single-File
    • Login Page
    • Management API
    • Settings
    • Security
      • Access Controls
      • App Tokens
      • Client Certificate
      • OpenID Connect
      • SAML2
      • WS-Federation
    • Repository
    • Running as a Service Account
  • Development
    • Debugging Scripts
    • Editor
    • Hangfire
    • Logging
    • Profiling
    • Visual Studio Code Extension
  • Changelog
  • Extension Changelog
  • Legacy Universal Dashboard Docs
Powered by GitBook

Copyright 2025 Ironman Software

On this page
  • Simple Card
  • Advanced Card
  • API

Was this helpful?

  1. User Interfaces
  2. Dashboards
  3. Components
  4. Surfaces

Card

Card component for Universal Dashboard

PreviousAppBarNextPaper

Last updated 3 years ago

Was this helpful?

Cards contain content and actions about a single subject.

Cards are surfaces that display content and actions on a single topic. They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy.

Simple Card

Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information.

New-UDCard -Title 'Simple Card' -Content {
    "This is some content"
}

Advanced Card

You can use the body, header, footer and expand cmdlets to create advanced cards. The below example creates a card with various features based on a Hyper-V VM.

$VM = Get-VM -Name $VMName @ConnectionInfo

$Header = New-UDCardHeader -Title $VM.Name

$Footer = New-UDCardFooter -Content {
    if ($VM.State -eq 'Running')
    {
        New-UDButton -Variant text -Text 'Stop' -OnClick {
            Show-UDToast -Message 'Stopping VM...' -Duration 5000
            Stop-VM -VMName $VM.name @ConnectionInfo 
            Sync-UDElement -Id "$($VMName)_card"
        }
    } else {
        New-UDButton -Variant text -Text 'Start' -OnClick {
            Show-UDToast -Message 'Starting VM...' -Duration 5000
            Start-VM -VMName $VM.name @ConnectionInfo 
            Sync-UDElement -Id "$($VMName)_card"
        }
    }

}

$Body = New-UDCardBody -Content {
    New-UDTable -Data ($VM | Select-Object Name, State, CPUUsage, MemoryAssigned, Uptime)  -Dense 
}

$Expand = New-UDCardExpand -Content {
    New-UDElement -Tag 'div' -Content {
        New-UDTable -Data ($VM.DvdDrives | Select-Object Name, DvdMediaType, Path) -Title 'DVD Drives' -Dense
    } 

    $Drives = Get-VMHardDiskDrive -VMName $VM.Name @ConnectionInfo | Select-Object Name, Path
    New-UDTable -Data $Drives -Title 'Hard Disk Drives' -Dense

    New-UDTable -Data ($VM.NetworkAdapters | Select-Object 'SwitchName', 'MacAddress' ) -Dense -Title 'Network Adapters' 
}

New-UDStyle -Style '.ud-mu-cardexpand { display: block !important }' -Content {
    New-UDCard -Body $Body -Header $Header -Footer $Footer -Expand $Expand
}

API

New-UDCard
New-UDCardBody
New-UDCardExpand
New-UDCardFooter
New-UDCardHeader
New-UDCardMedia
New-UDCardToolbar
Expandable Card