Const<!-- Basic block statistic -->
<umd-element-stat data-display="block">
<span slot="stat">40,000+</span>
<p>Students Enrolled</p>
</umd-element-stat>
<!-- Block statistic with sub-text and large size -->
<umd-element-stat data-display="block" data-visual-size="large">
<span slot="stat">$500M</span>
<p>Annual Research Funding</p>
<p slot="sub-text">Supporting groundbreaking discoveries across all disciplines</p>
</umd-element-stat>
<!-- Dark theme block with accent line -->
<umd-element-stat data-display="block" data-theme="dark" data-decoration-line>
<span slot="stat">#1</span>
<p>Public University in Maryland</p>
<p slot="sub-text">According to U.S. News & World Report</p>
</umd-element-stat>
<!-- Block statistics group -->
<div class="stats-row">
<umd-element-stat data-display="block">
<span slot="stat">12:1</span>
<p>Student-Faculty Ratio</p>
</umd-element-stat>
<umd-element-stat data-display="block">
<span slot="stat">300+</span>
<p>Academic Programs</p>
</umd-element-stat>
<umd-element-stat data-display="block">
<span slot="stat">90%</span>
<p>Job Placement Rate</p>
</umd-element-stat>
</div>
Statistic Display
A component for displaying key statistics, metrics, and numerical data with supporting context. Supports various display styles and sizes to emphasize important numbers and achievements.
Custom Element
<umd-element-stat>Slots
stat- The statistic value or number (optional, accepts: span, strong, em, b)sub-text- Additional context or details (optional, accepts: text elements)Attributes
data-theme- Color theme of the component:dark- Dark background with light textdata-display- Display style variant:block- Block-level displaydata-visual-size- Size of the statistic display:large- Prominent sizedata-decoration-line- Add decorative line element: