Creating intuitive, visually interesting HTML stories or dashboards can considerably improve readability and value. At this time, I am introducing a number of highly effective additions to the PSWriteHTML PowerShell module:
New-HTMLInfoCard- Improved
New-HTMLSection,New-HTMLPanel, andNew-HTMLContainer - A flexible
-Densityparameter for versatile format administration - Wealthy shadow customization
Let’s dive into every characteristic, with sensible examples and screenshots, serving to you shortly combine these into your workflows.
💡 New-HTMLInfoCard – Clear and Informative Playing cards
New-HTMLInfoCard is ideal for displaying key metrics or summaries clearly and attractively. It helps:
- Icons (emoji, predefined units, FontAwesome 500+ icons)
- Customizable colours
- Wealthy shadow results
- A number of kinds (Commonplace, Compact, Traditional, NoIcon)
This is an instance exhibiting how New-HTMLInfoCard is utilized in alternative ways to indicate information
This good trying infocard examples are achieved utilizing single line of code New-HTMLInfoCard
New-HTML {
New-HTMLPanelOption -BorderRadius 0px
New-HTMLSectionOption -BorderRadius 0px -HeaderBackGroundColor AirForceBlue
# Commonplace Fashion Playing cards
New-HTMLSection -HeaderText "Commonplace Fashion" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Whole Customers" -Quantity 47 -Subtitle "21.28% of customers" -Icon "👥" -IconColor "#0078d4" -BorderRadius 0px
New-HTMLInfoCard -Title "MFA Succesful Customers" -Quantity 10 -Subtitle "21.28% of customers" -Icon "🔒" -IconColor "#21c87a" -BorderRadius 0px
New-HTMLInfoCard -Title "Robust Auth Strategies" -Quantity 8 -Subtitle "17.02% of customers" -Icon "💪" -IconColor "#ffb300" -BorderRadius 0px
New-HTMLInfoCard -Title "Passwordless Succesful" -Quantity 2 -Subtitle "4.26% of customers" -Icon "🔑" -IconColor "#d13438" -BorderRadius 0px
}
}
New-HTMLSection -Density Compact -Invisible {
New-HTMLInfoCard -Title "Whole Customers" -Quantity 47 -Subtitle "21.28% of customers" -Icon "👥" -IconColor "#0078d4" -BorderRadius 0px
New-HTMLInfoCard -Title "MFA Succesful Customers" -Quantity 10 -Subtitle "21.28% of customers" -Icon "🔒" -IconColor "#21c87a" -BorderRadius 0px
New-HTMLInfoCard -Title "Robust Auth Strategies" -Quantity 8 -Subtitle "17.02% of customers" -Icon "💪" -IconColor "#ffb300" -BorderRadius 0px
New-HTMLInfoCard -Title "Passwordless Succesful" -Quantity 2 -Subtitle "4.26% of customers" -Icon "🔑" -IconColor "#d13438" -BorderRadius 0px
}
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Whole Customers" -Quantity 47 -Subtitle "21.28% of customers" -Icon "👥" -IconColor "#0078d4" -BorderRadius 0px
New-HTMLInfoCard -Title "MFA Succesful Customers" -Quantity 10 -Subtitle "21.28% of customers" -Icon "🔒" -IconColor "#21c87a" -BorderRadius 0px
New-HTMLInfoCard -Title "Robust Auth Strategies" -Quantity 8 -Subtitle "17.02% of customers" -Icon "💪" -IconColor "#ffb300" -BorderRadius 0px
New-HTMLInfoCard -Title "Passwordless Succesful" -Quantity 2 -Subtitle "4.26% of customers" -Icon "🔑" -IconColor "#d13438" -BorderRadius 0px
}
# Compact Fashion Playing cards
New-HTMLSection -HeaderText "Compact Fashion" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Server CPU" -Quantity "85%" -Subtitle "Utilization" -Icon "Server" -IconColor "#0078d4" -Fashion "Compact"
New-HTMLInfoCard -Title "Reminiscence" -Quantity "12GB" -Subtitle "Obtainable" -Icon "Database" -IconColor "#21c87a" -Fashion "Compact"
New-HTMLInfoCard -Title "Storage" -Quantity "500GB" -Subtitle "Free house" -Icon "Cloud" -IconColor "#ffb300" -Fashion "Compact"
New-HTMLInfoCard -Title "Community" -Quantity "1.2Gbps" -Subtitle "Throughput" -Icon "Community" -IconColor "#d13438" -Fashion "Compact"
}
}
# Fastened Structure Fashion (Multiline Secure)
New-HTMLSection -HeaderText "Fastened Structure (Multiline Secure)" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Whole Customers with Very Lengthy Title That Wraps" -Quantity 47 -Subtitle "21.28% of customers" -Icon "Customers" -IconColor "#0078d4" -Fashion "Fastened"
New-HTMLInfoCard -Title "MFA Succesful Customers" -Quantity 10 -Subtitle "21.28% of customers" -Icon "Lock" -IconColor "#21c87a" -Fashion "Fastened"
New-HTMLInfoCard -Title "Robust Authentication Strategies Obtainable" -Quantity 8 -Subtitle "17.02% of customers" -Icon "💪" -IconColor "#ffb300" -Fashion "Fastened"
New-HTMLInfoCard -Title "Passwordless Succesful" -Quantity 2 -Subtitle "4.26% of customers" -Icon "Key" -IconColor "#d13438" -Fashion "Fastened"
}
}
# Traditional Fashion Playing cards
New-HTMLSection -HeaderText "Traditional Fashion" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "132 Gross sales" -Subtitle "12 ready funds" -Icon Cash -IconColor "#0078d4" -Fashion "Traditional"
New-HTMLInfoCard -Title "98 Accomplished" -Subtitle "Duties completed at present" -Icon "Test" -IconColor "#21c87a" -Fashion "Traditional"
New-HTMLInfoCard -Title "5 Pending" -Subtitle "Requires consideration" -Icon "Warning" -IconColor "#ffb300" -Fashion "Traditional"
}
}
# No Icon Fashion Playing cards
New-HTMLSection -HeaderText "No Icons Fashion" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Income" -Quantity "`$45,320" -Subtitle "This month" -Fashion "NoIcon" -NumberColor "#21c87a" -Alignment "Left"
New-HTMLInfoCard -Title "Orders" -Quantity "1,234" -Subtitle "Processed at present" -Fashion "NoIcon" -NumberColor "#0078d4" -Alignment "Heart"
New-HTMLInfoCard -Title "Clients" -Quantity "5,678" -Subtitle "Lively customers" -Fashion "NoIcon" -NumberColor "#ffb300" -Alignment "Proper"
}
}
# Utilizing FontAwesome Icons
New-HTMLSection -HeaderText "FontAwesome Icons" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Analytics Report" -Quantity 156 -Subtitle "Reviews generated" -IconSolid "chart-bar" -IconColor "#6f42c1"
New-HTMLInfoCard -Title "Safety Standing" -Quantity "99.9%" -Subtitle "Uptime" -IconSolid "shield-alt" -IconColor "#28a745"
New-HTMLInfoCard -Title "API Calls" -Quantity "2.3M" -Subtitle "This week" -IconSolid "plug" -IconColor "#17a2b8"
New-HTMLInfoCard -Title "Sync Standing" -Quantity "Lively" -Subtitle "Final sync: 2 min in the past" -IconSolid "sync-alt" -IconColor "#ffc107"
}
}
# Utilizing Icon Dictionary
New-HTMLSection -HeaderText "Utilizing Icon Dictionary" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Analytics Report" -Quantity 156 -Subtitle "Reviews generated" -Icon "Chart" -IconColor "#6f42c1"
New-HTMLInfoCard -Title "Safety Standing" -Quantity "99.9%" -Subtitle "Uptime" -Icon "Protect" -IconColor "#28a745"
New-HTMLInfoCard -Title "API Calls" -Quantity "2.3M" -Subtitle "This week" -Icon "Api" -IconColor "#17a2b8"
New-HTMLInfoCard -Title "Sync Standing" -Quantity "Lively" -Subtitle "Final sync: 2 min in the past" -Icon "Sync" -IconColor "#ffc107"
}
}
# Alignment Examples
New-HTMLSection -HeaderText "Alignment Examples" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Left Aligned" -Quantity "Default" -Subtitle "Commonplace alignment" -Icon "📊" -IconColor "#6f42c1" -Alignment "Left"
New-HTMLInfoCard -Title "Heart Aligned" -Quantity "Centered" -Subtitle "Good for dashboards" -Icon "⚖️" -IconColor "#28a745" -Alignment "Heart"
New-HTMLInfoCard -Title "Proper Aligned" -Quantity "Proper Facet" -Subtitle "Different format" -Icon "➡️" -IconColor "#17a2b8" -Alignment "Proper"
}
}
# Shade Customization Examples
New-HTMLSection -HeaderText "Shade Customization" {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Customized Colours" -Quantity "Stunning" -Subtitle "Title, Quantity & Subtitle colours" -Icon "🎨" -IconColor "#e74c3c" -TitleColor "#2c3e50" -NumberColor "#e74c3c" -SubtitleColor "#7f8c8d" -BorderRadius 0px
New-HTMLInfoCard -Title "Shadow Results" -Quantity "Wonderful" -Subtitle "Customized shadow colours" -Icon "✨" -IconColor "#f39c12" -ShadowColor "rgba(243, 156, 18, 0.3)" -ShadowDirection "All" -BorderRadius 0px
New-HTMLInfoCard -Title "Directional Shadow" -Quantity "Proper Facet" -Subtitle "Shadow to the correct" -Icon "➡️" -IconColor "#9b59b6" -ShadowDirection "Proper" -ShadowColor "rgba(155, 89, 182, 0.4)" -BorderRadius 0px
}
}
} -FilePath "$PSScriptRootExample-InfoCard.html" -On-line -Present
💡 Introducing Density Parameter
For this characteristic to be even higher I’ve launched the brand new -Density parameter permits you to exactly management the format density of your dashboards. Obtainable choices:
- Spacious: Bigger playing cards, loads of whitespace, superb for readability
- Snug: Balanced spacing, nice for basic use
- Compact: Optimized house for detailed views
- Dense: Tightly packed format for max information show
- VeryDense: Minimal house, superb for in depth metrics
Instance:
New-HTML {
New-HTMLSection -HeaderText "🎯 New Density Parameter - Intuitive Structure Management!" -Wrap wrap {
New-HTMLSection -HeaderText "📏 Spacious Density" -Density Spacious {
New-HTMLInfoCard -Title "Id Safety" -Quantity "Lively" -Subtitle "Giant playing cards with loads of house" -Icon "🛡️" -IconColor '#0078d4'
New-HTMLInfoCard -Title "Entry Evaluations" -Quantity "Enabled" -Subtitle "Roomy format for higher readability" -Icon "👥" -IconColor '#0078d4'
New-HTMLInfoCard -Title "Authentication" -Quantity "Safe" -Subtitle "Spacious density for essential content material" -Icon "🔑" -IconColor '#0078d4'
}
New-HTMLSection -HeaderText "🏠 Snug Density" -Density Snug {
New-HTMLInfoCard -Title "Microsoft Entra" -Quantity "100%" -Subtitle "Balanced card measurement" -Icon "🔷" -IconColor '#198754'
New-HTMLInfoCard -Title "Tenant Settings" -Quantity "OK" -Subtitle "Snug spacing" -Icon "⚙️" -IconColor '#198754'
New-HTMLInfoCard -Title "Permissions" -Quantity "Managed" -Subtitle "Good stability of house" -Icon "📁" -IconColor '#198754'
New-HTMLInfoCard -Title "Safety" -Quantity "Excessive" -Subtitle "Neither too massive nor small" -Icon "🔒" -IconColor '#198754'
}
New-HTMLSection -HeaderText "📦 Compact Density" -Density Compact {
New-HTMLInfoCard -Title "Customers" -Quantity "1,250" -Subtitle "Environment friendly format" -Icon "👤" -IconColor '#6f42c1' -Fashion "Compact"
New-HTMLInfoCard -Title "Teams" -Quantity "45" -Subtitle "Area-efficient" -Icon "👥" -IconColor '#6f42c1' -Fashion "Compact"
New-HTMLInfoCard -Title "Apps" -Quantity "123" -Subtitle "Compact design" -Icon "📱" -IconColor '#6f42c1' -Fashion "Compact"
New-HTMLInfoCard -Title "Gadgets" -Quantity "890" -Subtitle "Good density" -Icon "💻" -IconColor '#6f42c1' -Fashion "Compact"
New-HTMLInfoCard -Title "Insurance policies" -Quantity "12" -Subtitle "Organized format" -Icon "📋" -IconColor '#6f42c1' -Fashion "Compact"
}
New-HTMLSection -HeaderText "🏗️ Dense Density" -Density Dense {
New-HTMLInfoCard -Title "CPU" -Quantity "45%" -Subtitle "Excessive density" -Icon "⚡" -IconColor '#ffc107' -Fashion "Compact"
New-HTMLInfoCard -Title "Reminiscence" -Quantity "67%" -Subtitle "Extra per row" -Icon "💾" -IconColor '#ffc107' -Fashion "Compact"
New-HTMLInfoCard -Title "Disk" -Quantity "23%" -Subtitle "Dense format" -Icon "💿" -IconColor '#ffc107' -Fashion "Compact"
New-HTMLInfoCard -Title "Community" -Quantity "12%" -Subtitle "Packed tight" -Icon "🌐" -IconColor '#ffc107' -Fashion "Compact"
New-HTMLInfoCard -Title "Uptime" -Quantity "99.9%" -Subtitle "Environment friendly use" -Icon "⏰" -IconColor '#ffc107' -Fashion "Compact"
New-HTMLInfoCard -Title "Load" -Quantity "Low" -Subtitle "Most data" -Icon "📊" -IconColor '#ffc107' -Fashion "Compact"
}
New-HTMLSection -HeaderText "🔬 VeryDense Density" -Density VeryDense {
New-HTMLInfoCard -Title "A1" -Quantity "✓" -Subtitle "Tiny playing cards" -Icon "1️⃣" -IconColor '#dc3545' -Fashion "Compact"
New-HTMLInfoCard -Title "B2" -Quantity "✓" -Subtitle "Max density" -Icon "2️⃣" -IconColor '#dc3545' -Fashion "Compact"
New-HTMLInfoCard -Title "C3" -Quantity "✓" -Subtitle "A number of data" -Icon "3️⃣" -IconColor '#dc3545' -Fashion "Compact"
New-HTMLInfoCard -Title "D4" -Quantity "✓" -Subtitle "In small house" -Icon "4️⃣" -IconColor '#dc3545' -Fashion "Compact"
New-HTMLInfoCard -Title "E5" -Quantity "✓" -Subtitle "Very dense" -Icon "5️⃣" -IconColor '#dc3545' -Fashion "Compact"
New-HTMLInfoCard -Title "F6" -Quantity "✓" -Subtitle "Compact view" -Icon "6️⃣" -IconColor '#dc3545' -Fashion "Compact"
New-HTMLInfoCard -Title "G7" -Quantity "✓" -Subtitle "Dashboard" -Icon "7️⃣" -IconColor '#dc3545' -Fashion "Compact"
New-HTMLInfoCard -Title "H8" -Quantity "✓" -Subtitle "Overview" -Icon "8️⃣" -IconColor '#dc3545' -Fashion "Compact"
}
New-HTMLText -Textual content @"
### 📝 The way to Use:
`New-HTMLSection -Density Spacious { } New-HTMLPanel -Density Snug { } New-HTMLContainer -Density Dense { }`
**🎯 Good!** Now the parameter title matches what it does - management the density/spacing of your format!
*Resize your browser window to see responsive conduct in motion.*
"@ -Shade Black
}
} -FilePath "$PSScriptRootExample-DensityTest.html" -TitleText "Density Parameter Demo" -On-line -Present
When you resize your browser you will notice the playing cards adapt, maximizing readability throughout all gadgets.
Additional resizing adjustments how the playing cards appear like primarily based on the density settings
💡 Superior Shadow Customization
If you wish to make the playing cards/dashboards your personal – Shadows can considerably improve visible presentation. You possibly can customise shadows with:
- Depth presets: None, Refined, Regular, Daring, ExtraBold
- Directional shadows: High, Backside, Left, Proper, All
- Customized blur and unfold
- Customized shade overlays
Instance:
New-HTML {
New-HTMLSectionStyle -BorderRadius 0px -HeaderBackGroundColor 'DarkSlateGray'
# Shadow Depth Presets Part
New-HTMLSection -HeaderText 'Shadow Depth Presets' {
New-HTMLSection -Invisible {
# None - No shadow
New-HTMLInfoCard -Title "No Shadow" -Quantity "Clear" -Subtitle "Minimal look" -Icon "💫" -ShadowIntensity 'None'
# Refined - Very mild shadow
New-HTMLInfoCard -Title "Refined Shadow" -Quantity "Mild" -Subtitle "Barely seen" -Icon "👻" -ShadowIntensity 'Refined'
# Regular - Commonplace shadow (default)
New-HTMLInfoCard -Title "Regular Shadow" -Quantity "Commonplace" -Subtitle "Default setting" -Icon "📊" -ShadowIntensity 'Regular'
# Daring - Robust, very seen shadow
New-HTMLInfoCard -Title "Daring Shadow" -Quantity "Robust" -Subtitle "Very seen" -Icon "🎯" -ShadowIntensity 'Daring'
# ExtraBold - Most influence shadow
New-HTMLInfoCard -Title "Additional Daring" -Quantity "Most" -Subtitle "Tremendous seen!" -Icon "💥" -ShadowIntensity 'ExtraBold'
}
}
# Customized Shadow Controls Part
New-HTMLSection -HeaderText 'Customized Shadow Controls' {
New-HTMLSection -Invisible {
# Customized blur radius
New-HTMLInfoCard -Title "Customized Blur" -Quantity "Blur 20" -Subtitle "Very mushy edges" -Icon "🌊" -ShadowIntensity 'Customized' -ShadowBlur 20 -ShadowColor 'rgba(0, 100, 200, 0.3)'
# Customized unfold
New-HTMLInfoCard -Title "Customized Unfold" -Quantity "Unfold 6" -Subtitle "Prolonged shadow" -Icon "📡" -ShadowIntensity 'Customized' -ShadowBlur 12 -ShadowSpread 6 -ShadowColor 'rgba(200, 0, 100, 0.25)'
# Excessive customized settings
New-HTMLInfoCard -Title "Excessive Customized" -Quantity "Max Energy" -Subtitle "All settings maxed" -Icon "⚡" -ShadowIntensity 'Customized' -ShadowBlur 25 -ShadowSpread 8 -ShadowColor 'rgba(255, 0, 0, 0.4)'
}
}
# Daring Shadows with Completely different Instructions
New-HTMLSection -HeaderText 'Daring Shadows - All Instructions' {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "Daring Backside" -Quantity "⬇️" -Subtitle "Downward influence" -Icon "📈" -ShadowIntensity 'Daring' -ShadowDirection 'Backside'
New-HTMLInfoCard -Title "Daring High" -Quantity "⬆️" -Subtitle "Upward raise" -Icon "🚀" -ShadowIntensity 'Daring' -ShadowDirection 'High'
New-HTMLInfoCard -Title "Daring Left" -Quantity "⬅️" -Subtitle "Westward depth" -Icon "🌅" -ShadowIntensity 'Daring' -ShadowDirection 'Left'
New-HTMLInfoCard -Title "Daring Proper" -Quantity "➡️" -Subtitle "Eastward depth" -Icon "🌇" -ShadowIntensity 'Daring' -ShadowDirection 'Proper'
New-HTMLInfoCard -Title "Daring All Round" -Quantity "💡" -Subtitle "360° glow impact" -Icon "🔆" -ShadowIntensity 'Daring' -ShadowDirection 'All'
}
}
# Coloured Daring Shadows
New-HTMLSection -HeaderText 'Coloured Daring Shadows' {
New-HTMLSection -Invisible {
# Daring pink shadow
New-HTMLInfoCard -Title "Daring Pink" -Quantity "Fireplace" -Subtitle "Intense pink glow" -Icon "🔥" -ShadowIntensity 'Daring' -ShadowColor 'rgba(255, 0, 0, 0.4)'
# Daring blue shadow
New-HTMLInfoCard -Title "Daring Blue" -Quantity "Ocean" -Subtitle "Deep blue depth" -Icon "🌊" -ShadowIntensity 'Daring' -ShadowColor 'rgba(0, 100, 255, 0.4)'
# Daring inexperienced shadow
New-HTMLInfoCard -Title "Daring Inexperienced" -Quantity "Nature" -Subtitle "Forest inexperienced aura" -Icon "🌲" -ShadowIntensity 'Daring' -ShadowColor 'rgba(0, 200, 50, 0.4)'
# Daring purple shadow
New-HTMLInfoCard -Title "Daring Purple" -Quantity "Magic" -Subtitle "Mystical purple" -Icon "🔮" -ShadowIntensity 'Daring' -ShadowColor 'rgba(150, 0, 255, 0.4)'
# Daring gold shadow
New-HTMLInfoCard -Title "Daring Gold" -Quantity "Wealth" -Subtitle "Golden luxurious" -Icon "👑" -ShadowIntensity 'Daring' -ShadowColor 'rgba(255, 215, 0, 0.5)'
}
}
# ExtraBold Showcase
New-HTMLSection -HeaderText 'ExtraBold - Most Affect' {
New-HTMLSection -Invisible {
New-HTMLInfoCard -Title "MAXIMUM IMPACT" -Quantity "100%" -Subtitle "Cannot miss this shadow!" -Icon "💥" -ShadowIntensity 'ExtraBold' -ShadowColor 'rgba(0, 0, 0, 0.6)'
New-HTMLInfoCard -Title "SUPER VISIBLE" -Quantity "BOLD" -Subtitle "Extraordinarily outstanding" -Icon "⚡" -ShadowIntensity 'ExtraBold' -ShadowColor 'rgba(255, 50, 50, 0.5)'
New-HTMLInfoCard -Title "ULTRA DEPTH" -Quantity "DEEP" -Subtitle "Most 3D impact" -Icon "🎯" -ShadowIntensity 'ExtraBold' -ShadowDirection 'All'
}
}
} -FilePath "$PSScriptRootExample-InfoCard-ShadowShowcase.html" -TitleText "InfoCard Shadow Showcase" -On-line -Present
💡 Different options blended up
This is one other instance that reveals couple of information playing cards in motion, together with older options resembling New-HTMLSectionStyle, New-HTMLImage, and New-HTMLDate.
And the code for that good instance:
New-HTML {
New-HTMLHeader {
New-HTMLSection -Invisible {
New-HTMLPanel -Invisible {
New-HTMLImage -Supply '/wp-content/uploads/2015/05/Brand-evotec-012.png' -UrlLink 'https://evotec.pl/' -AlternativeText 'My different textual content' -Class 'otehr' -Width '50%'
}
New-HTMLPanel -Invisible {
New-HTMLImage -Supply '/wp-content/uploads/2015/05/Brand-evotec-012.png' -UrlLink 'https://evotec.pl/' -AlternativeText 'My different textual content' -Width '20%'
} -AlignContentText proper
}
New-HTMLPanel {
New-HTMLText -Textual content "Report generated on ", (New-HTMLDate -InputDate (Get-Date)) -Shade None, Blue -FontSize 10, 10
New-HTMLText -Textual content "Report generated on ", (New-HTMLDate -InputDate (Get-Date -Yr 2022)) -Shade None, Blue -FontSize 10, 10
New-HTMLText -Textual content "Report generated on ", (New-HTMLDate -InputDate (Get-Date -Yr 2022) -DoNotIncludeFromNow) -Shade None, Blue -FontSize 10, 10
New-HTMLText -Textual content "Report generated on ", (New-HTMLDate -InputDate (Get-Date -Yr 2024 -Month 11)) -Shade None, Blue -FontSize 10, 10
} -Invisible -AlignContentText proper
}
New-HTMLSectionStyle -BorderRadius 0px -HeaderBackGroundColor '#0078d4'
# Function highlights part - now with ResponsiveWrap
New-HTMLSection -Density Dense {
# Id Safety
New-HTMLInfoCard -Title "Id Safety" -Subtitle "View dangerous customers, dangerous workload identities, and dangerous sign-ins in your tenant." -Icon "🛡️" -IconColor "#0078d4" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px -BackgroundColor Azure
# # Entry evaluations
New-HTMLInfoCard -Title "Entry evaluations" -Subtitle "Make sure that solely the correct individuals have continued entry." -Icon "👥" -IconColor "#0078d4" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px -BackgroundColor Salmon
# # Authentication strategies
New-HTMLInfoCard -Title "Authentication strategies" -Subtitle "Configure your customers within the authentication strategies coverage to allow passwordless authentication." -Icon "🔑" -IconColor "#0078d4" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px -ShadowColor Salmon
# # Microsoft Entra Area Providers
New-HTMLInfoCard -Title "Microsoft Entra Area Providers" -Subtitle "Elevate-and-shift legacy functions operating on-premises into Azure." -Icon "🔷" -IconColor "#0078d4" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
# # Tenant restrictions
New-HTMLInfoCard -Title "Tenant restrictions" -Subtitle "Specify the checklist of tenants that their customers are permitted to entry." -Icon "🚫" -IconColor "#dc3545" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
# # Entra Permissions Administration
New-HTMLInfoCard -Title "Entra Permissions Administration" -Subtitle "Steady safety of your essential cloud sources from unintentional misuse and malicious exploitation of permissions." -Icon "📁" -IconColor "#198754" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
# # Privileged Id Administration
New-HTMLInfoCard -Title "Privileged Id Administration" -Subtitle "Handle, management, and monitor entry to essential sources in your group." -Icon "💎" -IconColor "#6f42c1" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
# Conditional Entry
New-HTMLInfoCard -Title "Conditional Entry" -Subtitle "Management person entry primarily based on Conditional Entry coverage to deliver alerts collectively, to make choices, and implement organizational insurance policies." -Icon "🔒" -IconColor "#0078d4" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
# Conditional Entry
New-HTMLInfoCard -Title "Conditional Entry" -Subtitle "Management person entry primarily based on Conditional Entry coverage to deliver alerts collectively, to make choices, and implement organizational insurance policies." -IconSolid operating -IconColor RedBerry -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
}
# Extra providers part
New-HTMLSection -HeaderText 'Extra Providers' {
New-HTMLSection -Density Spacious World Administrator and a couple of different roles" -Icon "👤" -IconColor "#6c757d" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
# Safe Rating
New-HTMLInfoCard -Title "Safe Rating for Id" -Quantity "28.21%" -Subtitle "Safe rating updates can take as much as 48 hours." -Icon "🏆" -IconColor "#ffc107" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
# Microsoft Entra Join
New-HTMLInfoCard -Title "Microsoft Entra Join" -Quantity "✅ Enabled" -Subtitle "Final sync was lower than 1 hour in the past" -Icon "🔄" -IconColor "#198754" -Fashion "Commonplace" -ShadowIntensity 'Regular' -BorderRadius 2px
}
# Enhanced styling showcase with completely different shadow intensities
New-HTMLSection -HeaderText 'Enhanced Visible Showcase' {
New-HTMLSection -Density Spacious {
# ExtraNormal shadows for high-priority objects
New-HTMLInfoCard -Title "HIGH PRIORITY" -Quantity "Crucial" -Subtitle "Most visibility shadow" -Icon "⚠️" -IconColor "#dc3545" -ShadowIntensity 'Regular' -ShadowColor 'rgba(220, 53, 69, 0.4)' -BorderRadius 2px
# Regular coloured shadows
New-HTMLInfoCard -Title "Safety Alert" -Quantity "Lively" -Subtitle "Regular pink shadow for consideration" -Icon "🔴" -IconColor "#dc3545" -ShadowIntensity 'Regular' -ShadowColor 'rgba(220, 53, 69, 0.3)' -BorderRadius 2px
# Regular with customized shade
New-HTMLInfoCard -Title "Efficiency" -Quantity "Good" -Subtitle "Inexperienced shadow signifies success" -Icon "✅" -IconColor "#198754" -ShadowIntensity 'Regular' -ShadowColor 'rgba(25, 135, 84, 0.3)' -BorderRadius 2px
# Customized shadow settings
New-HTMLInfoCard -Title "Customized Styling" -Quantity "Superior" -Subtitle "Customized blur and unfold values" -Icon "🎨" -IconColor "#6f42c1" -ShadowIntensity 'Customized' -ShadowBlur 15 -ShadowSpread 3 -ShadowColor 'rgba(111, 66, 193, 0.25)' -BorderRadius 2px
}
}
} -FilePath "$PSScriptRootExample-MicrosoftEntra.html" -TitleText "Microsoft Entra Interface Recreation" -On-line -Present
💡 Actual-world Dashboard Use
Contemplate a sensible dashboard exhibiting Microsoft Entra particulars with enhanced visuals and format management from my module GraphEssentials
When you make the window smaller, or bigger the sections content material will shift a technique or one other
💡 Wrap-up
These new additions to PSWriteHTML enormously improve your capability to create professional-grade HTML stories. All functionalities are intuitive, customizable, and aimed toward saving time.
Discover additional by updating your PSWriteHTML module and incorporating these options into your dashboards at present. Share your experiences and suggestions!
For extra detailed examples and code snippets, examine the PSWriteHTML GitHub repository.
💡 Putting in or updating PowerShell module
PSWriteHTML is obtainable in PowerShellGallery as an easy-to-use obtain.
Set up-Module PSWriteHTML -Power -Verbose
As soon as the module is put in, simply copy/paste examples and also you’re able to go.
PS. Keep in mind to avoid wasting the file earlier than operating when utilizing $PSScriptRoot or exchange it with full path to verify file has place to avoid wasting.
