LogoLogo
  • What is UDML?
  • Document structure
    • <components>
    • <imports>
    • <instructions>
    • <meta>
    • <styles>
    • <tokens>
    • <mappings>
    • <screens>
  • Directives
    • ai-hint
    • <data> Directive Specification
    • <interaction> Directive
    • <layer> Directive
    • <repeat> Directive
    • <responsive>
    • selection
    • <tracking> Directive
  • Components
    • Layout
      • <accordion> Component
      • <box> Component
      • <column> Component
      • <divider>
      • <grid> Component
      • <row> Component
    • Navigation
      • <breadcrumbs> Component
      • <pagination> Component
      • <tab> Component
      • <tabs> Component
    • Text & Display
      • <avatar>
      • <heading>
      • <icon>
      • <image>
      • <label>
      • <text>
      • <video>
    • Controls & Input
      • <button>
      • <checkbox>
      • <input> Component
      • <radio>
      • <select>
      • <slider>
      • <stepper>
      • <switch>
      • <textarea>
    • Forms
      • <form> Component
      • <formField> Component
      • <formGroup> Component
    • Data Collections
      • <dataColumn> Component
      • <dataTable> Component
      • <list> Component
      • <timeline> Component
      • <treeView> Component
    • Data Visualization
      • <chart> Component
      • <summary> Component
    • Modals
      • <dialog> Component
      • <modal> Component
      • <popover> Component
      • <toast> Component
      • <tooltip> Component
  • Prompting Guides
    • Prompting AI Developer Tools with UDML
    • Working with UDML in an Existing Codebase
  • Contributing to UDML
Powered by GitBook
On this page
  • The <summary> component presents a high-level overview of key data, often using bold numbers or simple metrics.
  • 🛠 Attributes
  • ✅ Allowed Content
  • 💡 Examples
  • 🧩 AI Interpretation Guidelines
Edit on GitHub
  1. Components
  2. Data Visualization

<summary> Component

The <summary> component presents a high-level overview of key data, often using bold numbers or simple metrics.

🛠 Attributes

Attribute
Type
Required
Description

title

string

Yes

Label or heading for the metric

value

string

Yes

Displayed summary value

description

string

No

Optional secondary text

icon

string

No

Optional decorative icon

variant

string

No

neutral, positive, negative, warning

✅ Allowed Content

Self-closing or may contain layout overrides.

💡 Examples

KPI box

<summary title="Revenue" value="$24.6K" description="+12% from last week" icon="bar-chart"/>

🧩 AI Interpretation Guidelines

  • Display title and value prominently with description as secondary.

  • Use icon and variant to indicate significance or trend.

  • Use in dashboards, reports, or header widgets.

Previous<chart> ComponentNextModals

Last updated 2 months ago