List
Structured lists for content, settings, and navigation.
Styled lists (decimal · disc · none)
Ordered, unordered, and unstyled list treatments.
List decimal
- Connect your utility account to begin importing meter data.
- Review consumption, cost, and emissions across your sites.
- Set peak-demand thresholds and enable alarm notifications.
List disc
- Benefits of active energy monitoring:
- Lower peak-demand charges
- Reduced GHG emissions
List none
- Essential steps before a demand-response event:
- Verify submeter data is reporting
- Confirm baseline load and reduction target
Notification items with switches
Setting rows with an inline switch on each item.
Peak Demand Alerts
Get notified when demand nears threshold
Email Reports
Receive consumption summaries via email
SMS Alarms
Receive critical alarms via SMS
DR Event Reminders
Notify before demand-response events
Key / value rows with separators
Label-and-value pairs divided by separators.
- Consumption
- 12,480 kWh
- Peak Demand
- 480 kW
- Emissions
- 3.2 tCO₂e
API reference
Structured rows built from the Item primitive — media, content (title + description), and trailing actions, grouped by ItemGroup.
Anatomy
Item | A single row laying out media, content, and actions. |
ItemMedia | Leading icon, avatar, or image slot. |
ItemContent | Main column holding the title and description. |
ItemActions | Trailing slot for buttons or a menu. |
ItemGroup | Wraps a set of items as one list. |
ItemSeparator | A divider between rows. |
ItemTitle | The row's primary line. |
ItemDescription | Muted secondary line under the title. |
ItemHeader | Optional header row above the content. |
ItemFooter | Optional footer row below the content. |
Props
| Part | Prop | Type | Default | Description |
|---|---|---|---|---|
Item | variant | "default" | "outline" | "muted" | "default" | Row surface style. |
Item | size | "default" | "sm" | "xs" | "default" | Row density (padding). |