DESIGN SYSTEM EDITION · v0.8.3.8.4
Thirty reusable 2026 design treatments powered by the shared Monarch fonts, colors, typography, spacing, Flow, and token architecture.
Source: components/content/statistic.php
Tokens: --fs-xxl, --font-secondary, --site-color-primary
Classes: .statistic, .component-value, .composition-stat
Standard Monarch treatment
A practical Default treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'default']); ?>Reduced decoration and visual weight
A practical Minimal treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'minimal']); ?>Transparent surface with a defined tokenized stroke
A practical Outlined treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'outlined']); ?>Quiet low-contrast surface
A practical Soft treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'soft']); ?>Layered surface with tokenized shadow
A practical Elevated treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'elevated']); ?>Dense interface treatment
A practical Compact treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'compact']); ?>Generous presentation rhythm
A practical Spacious treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'spacious']); ?>Designed to sit within surrounding content
A practical Inline treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'inline']); ?>Vertical component anatomy
A practical Stacked treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'stacked']); ?>Two-region composition
A practical Split treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'split']); ?>Strong accent edge with neutral body
A practical Accent Border treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'accent-border']); ?>Attention without semantic status
A practical Highlight treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'highlight']); ?>Prominent section anchor
A practical Feature treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'feature']); ?>Highly visual featured presentation
A practical Showcase treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'showcase']); ?>Distinct Monarch branded treatment
A practical Signature treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'signature']); ?>Long-form and publishing treatment
A practical Editorial treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'editorial']); ?>Structured restrained business treatment
A practical Corporate treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'corporate']); ?>Promotion and conversion treatment
A practical Marketing treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'marketing']); ?>Transactional information treatment
A practical Commerce treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'commerce']); ?>Metrics and application interface treatment
A practical Dashboard treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'dashboard']); ?>People and participation treatment
A practical Community treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'community']); ?>Media and leisure treatment
A practical Entertainment treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'entertainment']); ?>Functional tool-interface treatment
A practical Utility treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'utility']); ?>Neutral educational or system information
A practical Information treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'info']); ?>Completed or positive state
A practical Success treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'success']); ?>Cautionary state requiring attention
A practical Warning treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'warning']); ?>Critical, destructive, or failed state
A practical Danger treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'danger']); ?>Secondary lower-priority information
A practical Muted treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'muted']); ?>Centralized Monarch gradient treatment
A practical Gradient treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'gradient']); ?>High-contrast treatment for strong surfaces
A practical Inverse treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.
Anatomy: Semantic wrapper, component content, optional metadata, and actions.
Accessibility: Uses native semantic HTML and visible labels where applicable.
<?php monarch_render_component('content', 'statistic', ['style' => 'inverse']); ?>