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/card.php
Tokens: --site-color-stroke, --radius-lg, --shadow-sm
Classes: .card, .card-body, .card-align-start
Standard Monarch treatment
Default
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', 'card', ['style' => 'default']); ?>Reduced decoration and visual weight
Minimal
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', 'card', ['style' => 'minimal']); ?>Transparent surface with a defined tokenized stroke
Outlined
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', 'card', ['style' => 'outlined']); ?>Quiet low-contrast surface
Soft
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', 'card', ['style' => 'soft']); ?>Layered surface with tokenized shadow
Elevated
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', 'card', ['style' => 'elevated']); ?>Dense interface treatment
Compact
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', 'card', ['style' => 'compact']); ?>Generous presentation rhythm
Spacious
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', 'card', ['style' => 'spacious']); ?>Designed to sit within surrounding content
Inline
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', 'card', ['style' => 'inline']); ?>Vertical component anatomy
Stacked
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', 'card', ['style' => 'stacked']); ?>Two-region composition
Split
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', 'card', ['style' => 'split']); ?>Strong accent edge with neutral body
Accent Border
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', 'card', ['style' => 'accent-border']); ?>Attention without semantic status
Highlight
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', 'card', ['style' => 'highlight']); ?>Prominent section anchor
Feature
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', 'card', ['style' => 'feature']); ?>Highly visual featured presentation
Showcase
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', 'card', ['style' => 'showcase']); ?>Distinct Monarch branded treatment
Signature
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', 'card', ['style' => 'signature']); ?>Long-form and publishing treatment
Editorial
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', 'card', ['style' => 'editorial']); ?>Structured restrained business treatment
Corporate
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', 'card', ['style' => 'corporate']); ?>Promotion and conversion treatment
Marketing
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', 'card', ['style' => 'marketing']); ?>Transactional information treatment
Commerce
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', 'card', ['style' => 'commerce']); ?>Metrics and application interface treatment
Dashboard
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', 'card', ['style' => 'dashboard']); ?>People and participation treatment
Community
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', 'card', ['style' => 'community']); ?>Media and leisure treatment
Entertainment
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', 'card', ['style' => 'entertainment']); ?>Functional tool-interface treatment
Utility
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', 'card', ['style' => 'utility']); ?>Neutral educational or system information
Info
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', 'card', ['style' => 'info']); ?>Completed or positive state
Success
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', 'card', ['style' => 'success']); ?>Cautionary state requiring attention
Warning
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', 'card', ['style' => 'warning']); ?>Critical, destructive, or failed state
Danger
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', 'card', ['style' => 'danger']); ?>Secondary lower-priority information
Muted
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', 'card', ['style' => 'muted']); ?>Centralized Monarch gradient treatment
Gradient
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', 'card', ['style' => 'gradient']); ?>High-contrast treatment for strong surfaces
Inverse
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', 'card', ['style' => 'inverse']); ?>