Scroll Top
Evotec Services sp. z o.o., ul. Drozdów 6, Mikołów, 43-190, Poland
+48 502 469 760
[email protected]

Enhanced Dashboards with PSWriteHTML – Introducing InfoCards and Density Options

Enhanced Dashboards with PSWriteHTML – Introducing InfoCards and Density Options
Infocards
By Przemyslaw Klys PowerShell 4 czerwca, 2025

Creating intuitive, visually appealing HTML reports or dashboards can significantly enhance readability and usability. Today, I'm introducing several powerful additions to the PSWriteHTML PowerShell module:

  • New-HTMLInfoCard
  • Improved New-HTMLSection, New-HTMLPanel, and New-HTMLContainer
  • A versatile -Density parameter for flexible layout management
  • Rich shadow customization

Let's dive into each feature, with practical examples and screenshots, helping you quickly integrate these into your workflows.

New-HTMLInfoCard – Clear and Informative Cards

New-HTMLInfoCard is perfect for displaying key metrics or summaries clearly and attractively. It supports:

  • Icons (emoji, predefined sets, FontAwesome 500+ icons)
  • Customizable colors
  • Rich shadow effects
  • Multiple styles (Standard, Compact, Classic, NoIcon)

Here's an example showing how New-HTMLInfoCard is used in different ways to show data

This nice looking infocard examples are done using single line of code New-HTMLInfoCard

New-HTML {
    New-HTMLPanelOption -BorderRadius 0px
    New-HTMLSectionOption -BorderRadius 0px -HeaderBackGroundColor AirForceBlue

    # Standard Style Cards
    New-HTMLSection -HeaderText "Standard Style" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Total Users" -Number 47 -Subtitle "21.28% of users" -Icon "👥" -IconColor "#0078d4" -BorderRadius 0px
            New-HTMLInfoCard -Title "MFA Capable Users" -Number 10 -Subtitle "21.28% of users" -Icon "🔒" -IconColor "#21c87a" -BorderRadius 0px
            New-HTMLInfoCard -Title "Strong Auth Methods" -Number 8 -Subtitle "17.02% of users" -Icon "💪" -IconColor "#ffb300" -BorderRadius 0px
            New-HTMLInfoCard -Title "Passwordless Capable" -Number 2 -Subtitle "4.26% of users" -Icon "🔑" -IconColor "#d13438" -BorderRadius 0px
        }
    }

    New-HTMLSection -Density Compact -Invisible {
        New-HTMLInfoCard -Title "Total Users" -Number 47 -Subtitle "21.28% of users" -Icon "👥" -IconColor "#0078d4" -BorderRadius 0px
        New-HTMLInfoCard -Title "MFA Capable Users" -Number 10 -Subtitle "21.28% of users" -Icon "🔒" -IconColor "#21c87a" -BorderRadius 0px
        New-HTMLInfoCard -Title "Strong Auth Methods" -Number 8 -Subtitle "17.02% of users" -Icon "💪" -IconColor "#ffb300" -BorderRadius 0px
        New-HTMLInfoCard -Title "Passwordless Capable" -Number 2 -Subtitle "4.26% of users" -Icon "🔑" -IconColor "#d13438" -BorderRadius 0px
    }

    New-HTMLSection -Invisible {
        New-HTMLInfoCard -Title "Total Users" -Number 47 -Subtitle "21.28% of users" -Icon "👥" -IconColor "#0078d4" -BorderRadius 0px
        New-HTMLInfoCard -Title "MFA Capable Users" -Number 10 -Subtitle "21.28% of users" -Icon "🔒" -IconColor "#21c87a" -BorderRadius 0px
        New-HTMLInfoCard -Title "Strong Auth Methods" -Number 8 -Subtitle "17.02% of users" -Icon "💪" -IconColor "#ffb300" -BorderRadius 0px
        New-HTMLInfoCard -Title "Passwordless Capable" -Number 2 -Subtitle "4.26% of users" -Icon "🔑" -IconColor "#d13438" -BorderRadius 0px
    }

    # Compact Style Cards
    New-HTMLSection -HeaderText "Compact Style" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Server CPU" -Number "85%" -Subtitle "Usage" -Icon "Server" -IconColor "#0078d4" -Style "Compact"
            New-HTMLInfoCard -Title "Memory" -Number "12GB" -Subtitle "Available" -Icon "Database" -IconColor "#21c87a" -Style "Compact"
            New-HTMLInfoCard -Title "Storage" -Number "500GB" -Subtitle "Free space" -Icon "Cloud" -IconColor "#ffb300" -Style "Compact"
            New-HTMLInfoCard -Title "Network" -Number "1.2Gbps" -Subtitle "Throughput" -Icon "Network" -IconColor "#d13438" -Style "Compact"
        }
    }

    # Fixed Layout Style (Multiline Safe)
    New-HTMLSection -HeaderText "Fixed Layout (Multiline Safe)" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Total Users with Very Long Title That Wraps" -Number 47 -Subtitle "21.28% of users" -Icon "Users" -IconColor "#0078d4" -Style "Fixed"
            New-HTMLInfoCard -Title "MFA Capable Users" -Number 10 -Subtitle "21.28% of users" -Icon "Lock" -IconColor "#21c87a" -Style "Fixed"
            New-HTMLInfoCard -Title "Strong Authentication Methods Available" -Number 8 -Subtitle "17.02% of users" -Icon "💪" -IconColor "#ffb300" -Style "Fixed"
            New-HTMLInfoCard -Title "Passwordless Capable" -Number 2 -Subtitle "4.26% of users" -Icon "Key" -IconColor "#d13438" -Style "Fixed"
        }
    }

    # Classic Style Cards
    New-HTMLSection -HeaderText "Classic Style" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "132 Sales" -Subtitle "12 waiting payments" -Icon Money -IconColor "#0078d4" -Style "Classic"
            New-HTMLInfoCard -Title "98 Completed" -Subtitle "Tasks finished today" -Icon "Check" -IconColor "#21c87a" -Style "Classic"
            New-HTMLInfoCard -Title "5 Pending" -Subtitle "Requires attention" -Icon "Warning" -IconColor "#ffb300" -Style "Classic"
        }
    }

    # No Icon Style Cards
    New-HTMLSection -HeaderText "No Icons Style" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Revenue" -Number "`$45,320" -Subtitle "This month" -Style "NoIcon" -NumberColor "#21c87a" -Alignment "Left"
            New-HTMLInfoCard -Title "Orders" -Number "1,234" -Subtitle "Processed today" -Style "NoIcon" -NumberColor "#0078d4" -Alignment "Center"
            New-HTMLInfoCard -Title "Customers" -Number "5,678" -Subtitle "Active users" -Style "NoIcon" -NumberColor "#ffb300" -Alignment "Right"
        }
    }

    # Using FontAwesome Icons
    New-HTMLSection -HeaderText "FontAwesome Icons" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Analytics Report" -Number 156 -Subtitle "Reports generated" -IconSolid "chart-bar" -IconColor "#6f42c1"
            New-HTMLInfoCard -Title "Security Status" -Number "99.9%" -Subtitle "Uptime" -IconSolid "shield-alt" -IconColor "#28a745"
            New-HTMLInfoCard -Title "API Calls" -Number "2.3M" -Subtitle "This week" -IconSolid "plug" -IconColor "#17a2b8"
            New-HTMLInfoCard -Title "Sync Status" -Number "Active" -Subtitle "Last sync: 2 min ago" -IconSolid "sync-alt" -IconColor "#ffc107"
        }
    }

    # Using Icon Dictionary
    New-HTMLSection -HeaderText "Using Icon Dictionary" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Analytics Report" -Number 156 -Subtitle "Reports generated" -Icon "Chart" -IconColor "#6f42c1"
            New-HTMLInfoCard -Title "Security Status" -Number "99.9%" -Subtitle "Uptime" -Icon "Shield" -IconColor "#28a745"
            New-HTMLInfoCard -Title "API Calls" -Number "2.3M" -Subtitle "This week" -Icon "Api" -IconColor "#17a2b8"
            New-HTMLInfoCard -Title "Sync Status" -Number "Active" -Subtitle "Last sync: 2 min ago" -Icon "Sync" -IconColor "#ffc107"
        }
    }

    # Alignment Examples
    New-HTMLSection -HeaderText "Alignment Examples" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Left Aligned" -Number "Default" -Subtitle "Standard alignment" -Icon "📊" -IconColor "#6f42c1" -Alignment "Left"
            New-HTMLInfoCard -Title "Center Aligned" -Number "Centered" -Subtitle "Perfect for dashboards" -Icon "⚖️" -IconColor "#28a745" -Alignment "Center"
            New-HTMLInfoCard -Title "Right Aligned" -Number "Right Side" -Subtitle "Alternative layout" -Icon "➡️" -IconColor "#17a2b8" -Alignment "Right"
        }
    }

    # Color Customization Examples
    New-HTMLSection -HeaderText "Color Customization" {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Custom Colors" -Number "Beautiful" -Subtitle "Title, Number & Subtitle colors" -Icon "🎨" -IconColor "#e74c3c" -TitleColor "#2c3e50" -NumberColor "#e74c3c" -SubtitleColor "#7f8c8d" -BorderRadius 0px
            New-HTMLInfoCard -Title "Shadow Effects" -Number "Amazing" -Subtitle "Custom shadow colors" -Icon "✨" -IconColor "#f39c12" -ShadowColor "rgba(243, 156, 18, 0.3)" -ShadowDirection "All" -BorderRadius 0px
            New-HTMLInfoCard -Title "Directional Shadow" -Number "Right Side" -Subtitle "Shadow to the right" -Icon "➡️" -IconColor "#9b59b6" -ShadowDirection "Right" -ShadowColor "rgba(155, 89, 182, 0.4)" -BorderRadius 0px
        }
    }
} -FilePath "$PSScriptRoot\Example-InfoCard.html" -Online -Show

Introducing Density Parameter

For this feature to be even better I've introduced the new -Density parameter lets you precisely control the layout density of your dashboards. Available options:

  • Spacious: Larger cards, plenty of whitespace, ideal for clarity
  • Comfortable: Balanced spacing, great for general use
  • Compact: Optimized space for detailed views
  • Dense: Tightly packed layout for maximum data display
  • VeryDense: Minimal space, ideal for extensive metrics

Example:

New-HTML {
    New-HTMLSection -HeaderText "🎯 New Density Parameter - Intuitive Layout Control!" -Wrap wrap {
        New-HTMLSection -HeaderText "📏 Spacious Density" -Density Spacious {
            New-HTMLInfoCard -Title "Identity Protection" -Number "Active" -Subtitle "Large cards with plenty of space" -Icon "🛡️" -IconColor '#0078d4'
            New-HTMLInfoCard -Title "Access Reviews" -Number "Enabled" -Subtitle "Roomy layout for better readability" -Icon "👥" -IconColor '#0078d4'
            New-HTMLInfoCard -Title "Authentication" -Number "Secure" -Subtitle "Spacious density for important content" -Icon "🔑" -IconColor '#0078d4'
        }

        New-HTMLSection -HeaderText "🏠 Comfortable Density" -Density Comfortable {
            New-HTMLInfoCard -Title "Microsoft Entra" -Number "100%" -Subtitle "Balanced card size" -Icon "🔷" -IconColor '#198754'
            New-HTMLInfoCard -Title "Tenant Settings" -Number "OK" -Subtitle "Comfortable spacing" -Icon "⚙️" -IconColor '#198754'
            New-HTMLInfoCard -Title "Permissions" -Number "Managed" -Subtitle "Good balance of space" -Icon "📁" -IconColor '#198754'
            New-HTMLInfoCard -Title "Security" -Number "High" -Subtitle "Neither too big nor small" -Icon "🔒" -IconColor '#198754'
        }

        New-HTMLSection -HeaderText "📦 Compact Density" -Density Compact {
            New-HTMLInfoCard -Title "Users" -Number "1,250" -Subtitle "Efficient layout" -Icon "👤" -IconColor '#6f42c1' -Style "Compact"
            New-HTMLInfoCard -Title "Groups" -Number "45" -Subtitle "Space-efficient" -Icon "👥" -IconColor '#6f42c1' -Style "Compact"
            New-HTMLInfoCard -Title "Apps" -Number "123" -Subtitle "Compact design" -Icon "📱" -IconColor '#6f42c1' -Style "Compact"
            New-HTMLInfoCard -Title "Devices" -Number "890" -Subtitle "Good density" -Icon "💻" -IconColor '#6f42c1' -Style "Compact"
            New-HTMLInfoCard -Title "Policies" -Number "12" -Subtitle "Organized layout" -Icon "📋" -IconColor '#6f42c1' -Style "Compact"
        }

        New-HTMLSection -HeaderText "🏗️ Dense Density" -Density Dense {
            New-HTMLInfoCard -Title "CPU" -Number "45%" -Subtitle "High density" -Icon "⚡" -IconColor '#ffc107' -Style "Compact"
            New-HTMLInfoCard -Title "Memory" -Number "67%" -Subtitle "More per row" -Icon "💾" -IconColor '#ffc107' -Style "Compact"
            New-HTMLInfoCard -Title "Disk" -Number "23%" -Subtitle "Dense layout" -Icon "💿" -IconColor '#ffc107' -Style "Compact"
            New-HTMLInfoCard -Title "Network" -Number "12%" -Subtitle "Packed tight" -Icon "🌐" -IconColor '#ffc107' -Style "Compact"
            New-HTMLInfoCard -Title "Uptime" -Number "99.9%" -Subtitle "Efficient use" -Icon "⏰" -IconColor '#ffc107' -Style "Compact"
            New-HTMLInfoCard -Title "Load" -Number "Low" -Subtitle "Maximum info" -Icon "📊" -IconColor '#ffc107' -Style "Compact"
        }

        New-HTMLSection -HeaderText "🔬 VeryDense Density" -Density VeryDense {
            New-HTMLInfoCard -Title "A1" -Number "✓" -Subtitle "Tiny cards" -Icon "1️⃣" -IconColor '#dc3545' -Style "Compact"
            New-HTMLInfoCard -Title "B2" -Number "✓" -Subtitle "Max density" -Icon "2️⃣" -IconColor '#dc3545' -Style "Compact"
            New-HTMLInfoCard -Title "C3" -Number "✓" -Subtitle "Lots of info" -Icon "3️⃣" -IconColor '#dc3545' -Style "Compact"
            New-HTMLInfoCard -Title "D4" -Number "✓" -Subtitle "In small space" -Icon "4️⃣" -IconColor '#dc3545' -Style "Compact"
            New-HTMLInfoCard -Title "E5" -Number "✓" -Subtitle "Very dense" -Icon "5️⃣" -IconColor '#dc3545' -Style "Compact"
            New-HTMLInfoCard -Title "F6" -Number "✓" -Subtitle "Compact view" -Icon "6️⃣" -IconColor '#dc3545' -Style "Compact"
            New-HTMLInfoCard -Title "G7" -Number "✓" -Subtitle "Dashboard" -Icon "7️⃣" -IconColor '#dc3545' -Style "Compact"
            New-HTMLInfoCard -Title "H8" -Number "✓" -Subtitle "Overview" -Icon "8️⃣" -IconColor '#dc3545' -Style "Compact"
        }

        New-HTMLText -Text @"
<h3>📝 How to Use:</h3>
<pre><code>
New-HTMLSection -Density Spacious { }
New-HTMLPanel -Density Comfortable { }
New-HTMLContainer -Density Dense { }</code></pre>

<p><strong>🎯 Perfect!</strong> Now the parameter name matches what it does - control the density/spacing of your layout!</p>
<p><em>Resize your browser window to see responsive behavior in action.</em></p>
"@ -Color Black
    }
} -FilePath "$PSScriptRoot\Example-DensityTest.html" -TitleText "Density Parameter Demo" -Online -Show

Once you resize your browser you will see the cards adapt, maximizing readability across all devices.

Further resizing changes how the cards look like based on the density settings

Advanced Shadow Customization

If you want to make the cards/dashboards your own – Shadows can significantly enhance visual presentation. You can customize shadows with:

  • Intensity presets: None, Subtle, Normal, Bold, ExtraBold
  • Directional shadows: Top, Bottom, Left, Right, All
  • Custom blur and spread
  • Custom color overlays

Example:

New-HTML {
    New-HTMLSectionStyle -BorderRadius 0px -HeaderBackGroundColor 'DarkSlateGray'

    # Shadow Intensity Presets Section
    New-HTMLSection -HeaderText 'Shadow Intensity Presets'  {
        New-HTMLSection -Invisible  {
            # None - No shadow
            New-HTMLInfoCard -Title "No Shadow" -Number "Clean" -Subtitle "Minimal look" -Icon "💫" -ShadowIntensity 'None'

            # Subtle - Very light shadow
            New-HTMLInfoCard -Title "Subtle Shadow" -Number "Light" -Subtitle "Barely visible" -Icon "👻" -ShadowIntensity 'Subtle'

            # Normal - Standard shadow (default)
            New-HTMLInfoCard -Title "Normal Shadow" -Number "Standard" -Subtitle "Default setting" -Icon "📊" -ShadowIntensity 'Normal'

            # Bold - Strong, very visible shadow
            New-HTMLInfoCard -Title "Bold Shadow" -Number "Strong" -Subtitle "Very visible" -Icon "🎯" -ShadowIntensity 'Bold'

            # ExtraBold - Maximum impact shadow
            New-HTMLInfoCard -Title "Extra Bold" -Number "Maximum" -Subtitle "Super visible!" -Icon "💥" -ShadowIntensity 'ExtraBold'
        }
    }

    # Custom Shadow Controls Section
    New-HTMLSection -HeaderText 'Custom Shadow Controls' {
        New-HTMLSection -Invisible {
            # Custom blur radius
            New-HTMLInfoCard -Title "Custom Blur" -Number "Blur 20" -Subtitle "Very soft edges" -Icon "🌊" -ShadowIntensity 'Custom' -ShadowBlur 20 -ShadowColor 'rgba(0, 100, 200, 0.3)'

            # Custom spread
            New-HTMLInfoCard -Title "Custom Spread" -Number "Spread 6" -Subtitle "Extended shadow" -Icon "📡" -ShadowIntensity 'Custom' -ShadowBlur 12 -ShadowSpread 6 -ShadowColor 'rgba(200, 0, 100, 0.25)'

            # Extreme custom settings
            New-HTMLInfoCard -Title "Extreme Custom" -Number "Max Power" -Subtitle "All settings maxed" -Icon "⚡" -ShadowIntensity 'Custom' -ShadowBlur 25 -ShadowSpread 8 -ShadowColor 'rgba(255, 0, 0, 0.4)'
        }
    }

    # Bold Shadows with Different Directions
    New-HTMLSection -HeaderText 'Bold Shadows - All Directions' {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "Bold Bottom" -Number "⬇️" -Subtitle "Downward impact" -Icon "📈" -ShadowIntensity 'Bold' -ShadowDirection 'Bottom'
            New-HTMLInfoCard -Title "Bold Top" -Number "⬆️" -Subtitle "Upward lift" -Icon "🚀" -ShadowIntensity 'Bold' -ShadowDirection 'Top'
            New-HTMLInfoCard -Title "Bold Left" -Number "⬅️" -Subtitle "Westward depth" -Icon "🌅" -ShadowIntensity 'Bold' -ShadowDirection 'Left'
            New-HTMLInfoCard -Title "Bold Right" -Number "➡️" -Subtitle "Eastward depth" -Icon "🌇" -ShadowIntensity 'Bold' -ShadowDirection 'Right'
            New-HTMLInfoCard -Title "Bold All Around" -Number "💡" -Subtitle "360° glow effect" -Icon "🔆" -ShadowIntensity 'Bold' -ShadowDirection 'All'
        }
    }

    # Colored Bold Shadows
    New-HTMLSection -HeaderText 'Colored Bold Shadows' {
        New-HTMLSection -Invisible {
            # Bold red shadow
            New-HTMLInfoCard -Title "Bold Red" -Number "Fire" -Subtitle "Intense red glow" -Icon "🔥" -ShadowIntensity 'Bold' -ShadowColor 'rgba(255, 0, 0, 0.4)'

            # Bold blue shadow
            New-HTMLInfoCard -Title "Bold Blue" -Number "Ocean" -Subtitle "Deep blue depth" -Icon "🌊" -ShadowIntensity 'Bold' -ShadowColor 'rgba(0, 100, 255, 0.4)'

            # Bold green shadow
            New-HTMLInfoCard -Title "Bold Green" -Number "Nature" -Subtitle "Forest green aura" -Icon "🌲" -ShadowIntensity 'Bold' -ShadowColor 'rgba(0, 200, 50, 0.4)'

            # Bold purple shadow
            New-HTMLInfoCard -Title "Bold Purple" -Number "Magic" -Subtitle "Mystical purple" -Icon "🔮" -ShadowIntensity 'Bold' -ShadowColor 'rgba(150, 0, 255, 0.4)'

            # Bold gold shadow
            New-HTMLInfoCard -Title "Bold Gold" -Number "Wealth" -Subtitle "Golden luxury" -Icon "👑" -ShadowIntensity 'Bold' -ShadowColor 'rgba(255, 215, 0, 0.5)'
        }
    }

    # ExtraBold Showcase
    New-HTMLSection -HeaderText 'ExtraBold - Maximum Impact' {
        New-HTMLSection -Invisible {
            New-HTMLInfoCard -Title "MAXIMUM IMPACT" -Number "100%" -Subtitle "Can't miss this shadow!" -Icon "💥" -ShadowIntensity 'ExtraBold' -ShadowColor 'rgba(0, 0, 0, 0.6)'
            New-HTMLInfoCard -Title "SUPER VISIBLE" -Number "BOLD" -Subtitle "Extremely prominent" -Icon "⚡" -ShadowIntensity 'ExtraBold' -ShadowColor 'rgba(255, 50, 50, 0.5)'
            New-HTMLInfoCard -Title "ULTRA DEPTH" -Number "DEEP" -Subtitle "Maximum 3D effect" -Icon "🎯" -ShadowIntensity 'ExtraBold' -ShadowDirection 'All'
        }
    }

} -FilePath "$PSScriptRoot\Example-InfoCard-ShadowShowcase.html" -TitleText "InfoCard Shadow Showcase" -Online -Show

Other features mixed up

Here's another example that shows couple of info cards in action, along with older features such as New-HTMLSectionStyle, New-HTMLImage, and New-HTMLDate.

And the code for that nice example:

New-HTML {
    New-HTMLHeader {
        New-HTMLSection -Invisible {
            New-HTMLPanel -Invisible {
                New-HTMLImage -Source 'https://evotec.pl/wp-content/uploads/2015/05/Logo-evotec-012.png' -UrlLink 'https://evotec.pl/' -AlternativeText 'My other text' -Class 'otehr' -Width '50%'
            }
            New-HTMLPanel -Invisible {
                New-HTMLImage -Source 'https://evotec.pl/wp-content/uploads/2015/05/Logo-evotec-012.png' -UrlLink 'https://evotec.pl/' -AlternativeText 'My other text' -Width '20%'
            } -AlignContentText right
        }
        New-HTMLPanel {
            New-HTMLText -Text "Report generated on ", (New-HTMLDate -InputDate (Get-Date)) -Color None, Blue -FontSize 10, 10
            New-HTMLText -Text "Report generated on ", (New-HTMLDate -InputDate (Get-Date -Year 2022)) -Color None, Blue -FontSize 10, 10
            New-HTMLText -Text "Report generated on ", (New-HTMLDate -InputDate (Get-Date -Year 2022) -DoNotIncludeFromNow) -Color None, Blue -FontSize 10, 10
            New-HTMLText -Text "Report generated on ", (New-HTMLDate -InputDate (Get-Date -Year 2024 -Month 11)) -Color None, Blue -FontSize 10, 10
        } -Invisible -AlignContentText right
    }
    New-HTMLSectionStyle -BorderRadius 0px -HeaderBackGroundColor '#0078d4'

    # Feature highlights section - now with ResponsiveWrap
    New-HTMLSection -Density Dense {
        # Identity Protection
        New-HTMLInfoCard -Title "Identity Protection" -Subtitle "View risky users, risky workload identities, and risky sign-ins in your tenant." -Icon "🛡️" -IconColor "#0078d4" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px -BackgroundColor Azure

        # # Access reviews
        New-HTMLInfoCard -Title "Access reviews" -Subtitle "Make sure only the right people have continued access." -Icon "👥" -IconColor "#0078d4" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px -BackgroundColor Salmon

        # # Authentication methods
        New-HTMLInfoCard -Title "Authentication methods" -Subtitle "Configure your users in the authentication methods policy to enable passwordless authentication." -Icon "🔑" -IconColor "#0078d4" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px -ShadowColor Salmon

        # # Microsoft Entra Domain Services
        New-HTMLInfoCard -Title "Microsoft Entra Domain Services" -Subtitle "Lift-and-shift legacy applications running on-premises into Azure." -Icon "🔷" -IconColor "#0078d4" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

        # # Tenant restrictions
        New-HTMLInfoCard -Title "Tenant restrictions" -Subtitle "Specify the list of tenants that their users are permitted to access." -Icon "🚫" -IconColor "#dc3545" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

        # # Entra Permissions Management
        New-HTMLInfoCard -Title "Entra Permissions Management" -Subtitle "Continuous protection of your critical cloud resources from accidental misuse and malicious exploitation of permissions." -Icon "📁" -IconColor "#198754" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

        # # Privileged Identity Management
        New-HTMLInfoCard -Title "Privileged Identity Management" -Subtitle "Manage, control, and monitor access to important resources in your organization." -Icon "💎" -IconColor "#6f42c1" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

        # Conditional Access
        New-HTMLInfoCard -Title "Conditional Access" -Subtitle "Control user access based on Conditional Access policy to bring signals together, to make decisions, and enforce organizational policies." -Icon "🔒" -IconColor "#0078d4" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

        # Conditional Access
        New-HTMLInfoCard -Title "Conditional Access" -Subtitle "Control user access based on Conditional Access policy to bring signals together, to make decisions, and enforce organizational policies." -IconSolid running -IconColor RedBerry -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px
    }


    # Additional services section
    New-HTMLSection -HeaderText 'Additional Services' {
        New-HTMLSection -Density Spacious {
            # Try Microsoft Entra admin center
            New-HTMLInfoCard -Title "Try Microsoft Entra admin center" -Subtitle "Secure your identity environment with Microsoft Entra ID, permissions management and more." -Icon "🔧" -IconColor "#0078d4" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

            # User Profile Card
            New-HTMLInfoCard -Title "Przemysław Klys" -Subtitle "e6a8f1cf-0874-4323-a12f-2bf51bb6dfdd | Global Administrator and 2 other roles" -Icon "👤" -IconColor "#6c757d" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

            # Secure Score
            New-HTMLInfoCard -Title "Secure Score for Identity" -Number "28.21%" -Subtitle "Secure score updates can take up to 48 hours." -Icon "🏆" -IconColor "#ffc107" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px

            # Microsoft Entra Connect
            New-HTMLInfoCard -Title "Microsoft Entra Connect" -Number "✅ Enabled" -Subtitle "Last sync was less than 1 hour ago" -Icon "🔄" -IconColor "#198754" -Style "Standard" -ShadowIntensity 'Normal' -BorderRadius 2px
        }
    }

    # Enhanced styling showcase with different shadow intensities
    New-HTMLSection -HeaderText 'Enhanced Visual Showcase' {
        New-HTMLSection -Density Spacious {
            # ExtraNormal shadows for high-priority items
            New-HTMLInfoCard -Title "HIGH PRIORITY" -Number "Critical" -Subtitle "Maximum visibility shadow" -Icon "⚠️" -IconColor "#dc3545" -ShadowIntensity 'Normal' -ShadowColor 'rgba(220, 53, 69, 0.4)' -BorderRadius 2px

            # Normal colored shadows
            New-HTMLInfoCard -Title "Security Alert" -Number "Active" -Subtitle "Normal red shadow for attention" -Icon "🔴" -IconColor "#dc3545" -ShadowIntensity 'Normal' -ShadowColor 'rgba(220, 53, 69, 0.3)' -BorderRadius 2px

            # Normal with custom color
            New-HTMLInfoCard -Title "Performance" -Number "Good" -Subtitle "Green shadow indicates success" -Icon "✅" -IconColor "#198754" -ShadowIntensity 'Normal' -ShadowColor 'rgba(25, 135, 84, 0.3)' -BorderRadius 2px

            # Custom shadow settings
            New-HTMLInfoCard -Title "Custom Styling" -Number "Advanced" -Subtitle "Custom blur and spread values" -Icon "🎨" -IconColor "#6f42c1" -ShadowIntensity 'Custom' -ShadowBlur 15 -ShadowSpread 3 -ShadowColor 'rgba(111, 66, 193, 0.25)' -BorderRadius 2px
        }
    }

} -FilePath "$PSScriptRoot\Example-MicrosoftEntra.html" -TitleText "Microsoft Entra Interface Recreation" -Online -Show

Real-world Dashboard Use

Consider a practical dashboard showing Microsoft Entra details with enhanced visuals and layout control from my module GraphEssentials

Once you make the window smaller, or larger the sections content will shift one way or another

Wrap-up

These new additions to PSWriteHTML greatly enhance your ability to create professional-grade HTML reports. All functionalities are intuitive, customizable, and aimed at saving time.

Explore further by updating your PSWriteHTML module and incorporating these features into your dashboards today. Share your experiences and feedback!

For more detailed examples and code snippets, check the PSWriteHTML GitHub repository.

Installing or updating PowerShell module

PSWriteHTML is available in PowerShellGallery as an easy-to-use download.

Install-Module PSWriteHTML -Force -Verbose

Once the module is installed, just copy/paste examples and you're ready to go.

PS. Remember to save the file before running when using $PSScriptRoot or replace it with full path to make sure file has place to save.

Przemyslaw Klys / About Author
System Architect with over 14 years of experience in the IT field. Skilled, among others, in Active Directory, Microsoft Exchange and Office 365. Profoundly interested in PowerShell. Software geek.
More posts by Przemyslaw Klys