Edgecom Design System

Card

A flexible container with header, content, and footer regions.

A complete card with title, body, and footer buttons.

Peak demand alert

Facility exceeded its target this hour.

Current load is 1.24 MW against a 1.10 MW threshold. Review the load profile to avoid demand charges.

A site card with a banner image below the header.

Toronto Distribution Center

Real-time consumption, peak demand, and emissions across every submeter.

A report card led by a banner image, with footer actions.

Calgary Plant 2 — June Report

Consumption down 4.2% month-over-month, with $8,420 in demand-charge savings.

A side-by-side layout pairing an image with content and a call to action.

AI CoPilot Insights

Detected a 12% overnight baseload spike at Warehouse B — ask CoPilot to investigate.

A card whose content is organized into inline tabs.

Site-wide totals at a glance: 12,480 kWh consumed this month, a 480 kW peak demand, and 3.2 tCO₂e in emissions across all commodities.

A styled container with composable header, content, and footer sections (all div-based).

Anatomy

`Card`	Root container with ring, rounded corners, and consistent spacing.
`CardHeader`	Grid header area for title, description, and optional action.
`CardFooter`	Bottom bar with a top border and muted background.
`CardTitle`	Heading-font title text for the card.
`CardAction`	Slot positioned top-right of the header for actions.
`CardDescription`	Muted secondary text below the title.
`CardContent`	Padded region for the card's main body.