Content
Badge
Content status or classification pill.
components/content/badge.php
Metadata
- Status: stable
- Classes: .badge, .component-inline, .component-soft
- Tokens: --site-color-accent, --radius-pill, --space-xs
Components · v0.8.3.8.4
Monarch Component Explorer
Browse metadata-backed component families with source paths, CSS classes, tokens, dependencies, and accessibility guidance.
Showing 36 component families.
Content
Label
Small category or state label used above headings and inside cards.
components/content/label.php
Metadata
- Status: stable
- Classes: .label, .label-gradient, .label-outline
- Tokens: --label-padding-x, --label-radius, --font-primary
Content
Card
Reusable content container for summaries, features, products, and navigation.
components/content/card.php
Metadata
- Status: stable
- Classes: .card, .card-body, .card-align-start
- Tokens: --site-color-stroke, --radius-lg, --shadow-sm
Content
Statistic
Numeric highlight component for dashboard and marketing metrics.
components/content/statistic.php
Metadata
- Status: stable
- Classes: .statistic, .component-value, .composition-stat
- Tokens: --fs-xxl, --font-secondary, --site-color-primary
Content
Quote
Pull quote or testimonial presentation.
components/content/quote.php
Metadata
- Status: stable
- Classes: blockquote, .component-editorial, .component-accent-border
- Tokens: --font-text, --site-color-stroke, --space-lg
Content
Alert
Semantic status message for information, success, warning, and danger.
components/content/alert.php
Metadata
- Status: stable
- Classes: .component-alert, .component-info, .component-warning
- Tokens: --semantic-information, --semantic-danger, --semantic-warning
Content
Callout
Emphasized content block for page-level notices or promotions.
components/content/callout.php
Metadata
- Status: stable
- Classes: .component-highlight, .composition-callout
- Tokens: --site-color-accent, --surface-soft, --radius-md
Content
Empty State
Helpful message for empty lists, missing results, or future content.
components/content/empty-state.php
Metadata
- Status: stable
- Classes: .component-muted, .component-neutral
- Tokens: --semantic-neutral, --space-lg, --site-color-muted
Typography
Heading
Heading hierarchy and display typography.
components/typography/heading.php
Metadata
- Status: stable
- Classes: h1, h2, h3, .section-heading
- Tokens: --font-primary, --font-secondary, --fs-xxl
Typography
Paragraph
Readable text blocks with Monarch typography rhythm.
components/typography/paragraph.php
Metadata
- Status: stable
- Classes: p, .lead, .section-intro
- Tokens: --font-text, --fs-md, --space-md
Typography
List
Ordered, unordered, featured, task, and description lists.
components/typography/list.php
Metadata
- Status: stable
- Classes: .list-primary, .list-feature, .description-list
- Tokens: --space-sm, --site-color-primary, --font-text
Typography
Code
Inline code and code-block presentation.
components/typography/code.php
Metadata
- Status: stable
- Classes: code, pre, .code-example
- Tokens: --color-code, --color-code-background, --font-secondary
Typography
Blockquote
Indented long-form quotation styling.
components/typography/blockquote.php
Metadata
- Status: stable
- Classes: blockquote, .component-editorial
- Tokens: --font-text, --site-color-stroke, --space-lg
Forms
Form
Complete form wrapper and layout shell.
components/forms/form.php
Metadata
- Status: stable
- Classes: .form-grid, .form-panel, .form-action
- Tokens: --space-lg, --radius-lg, --site-color-stroke
Forms
Fieldset
Grouped controls with labels and accessible legends.
components/forms/fieldset.php
Metadata
- Status: stable
- Classes: fieldset, .form-field, .form-label
- Tokens: --space-md, --site-color-accent, --radius-md
Forms
Input
Text, email, search, number, password, and date controls.
components/forms/input.php
Metadata
- Status: stable
- Classes: .form-control, input
- Tokens: --surface-medium, --color-border-light, --color-focus
Forms
Textarea
Multi-line text input.
components/forms/textarea.php
Metadata
- Status: stable
- Classes: textarea.form-control
- Tokens: --space-md, --radius-md, --font-text
Forms
Select
Native select dropdown styling.
components/forms/select.php
Metadata
- Status: stable
- Classes: select.form-control
- Tokens: --surface-medium, --site-color-text, --radius-md
Forms
Checkbox
Native checkbox aligned with form-choice rhythm.
components/forms/checkbox.php
Metadata
- Status: stable
- Classes: .form-choice, input[type="checkbox"]
- Tokens: --site-color-accent, --space-xs
Forms
Radio
Native radio input aligned with form-choice rhythm.
components/forms/radio.php
Metadata
- Status: stable
- Classes: .form-choice, input[type="radio"]
- Tokens: --site-color-accent, --space-xs
Forms
Switch
Toggle-like binary control.
components/forms/switch.php
Metadata
- Status: stable
- Classes: .component-switch
- Tokens: --site-color-accent, --space-sm
Forms
Range
Range slider input.
components/forms/range.php
Metadata
- Status: stable
- Classes: input[type="range"]
- Tokens: --site-color-accent, --space-md
Forms
File Upload
File input control for upload workflows.
components/forms/file-upload.php
Metadata
- Status: stable
- Classes: input[type="file"], .form-help
- Tokens: --site-color-accent, --font-text
Forms
Search
Search form built on the shared Forms system.
components/forms/search.php
Metadata
- Status: stable
- Classes: .form-grid, input[type="search"]
- Tokens: --color-focus, --surface-medium, --space-lg
Forms
Submit
Form action submit control using Button conventions.
components/forms/submit.php
Metadata
- Status: stable
- Classes: button.button, input[type="submit"]
- Tokens: --button-padding-x, --button-radius, --site-color-primary
Navigation
Navigationbar
Horizontal navigation bar pattern.
components/navigation/navbar.php
Metadata
- Status: stable
- Classes: .component-navbar, .nav-list
- Tokens: --space-sm, --site-color-accent, --radius-sm
Navigation
Breadcrumb
Hierarchical location trail.
components/navigation/breadcrumb.php
Metadata
- Status: stable
- Classes: .component-breadcrumb, ol
- Tokens: --space-xs, --site-color-muted
Navigation
Pagination
Paged listing controls.
components/navigation/pagination.php
Metadata
- Status: stable
- Classes: .component-pagination
- Tokens: --space-sm, --radius-sm, --site-color-primary
Navigation
Menu
Compact menu list for grouped links.
components/navigation/menu.php
Metadata
- Status: stable
- Classes: .component-menu
- Tokens: --space-sm, --font-primary
Navigation
Tabs
Tab-like navigation for related panels.
components/navigation/tabs.php
Metadata
- Status: stable
- Classes: .component-tabs
- Tokens: --space-sm, --site-color-secondary, --radius-sm
Navigation
Sidebar Navigation
Vertical navigation for documentation and dashboard layouts.
components/navigation/sidebar-nav.php
Metadata
- Status: stable
- Classes: .component-sidebar-nav
- Tokens: --space-sm, --site-color-stroke
Media
Image
Responsive image display component.
components/media/image.php
Metadata
- Status: stable
- Classes: .component-media, img
- Tokens: --radius-md, --shadow-sm
Media
Figure
Image with caption and semantic figure markup.
components/media/figure.php
Metadata
- Status: stable
- Classes: figure, figcaption, .component-media
- Tokens: --font-text, --site-color-muted, --radius-md
Media
Avatar
Profile image or initials treatment.
components/media/avatar.php
Metadata
- Status: stable
- Classes: .component-avatar
- Tokens: --radius-pill, --site-color-accent
Media
Icon
Icon display block for symbolic content.
components/media/icon.php
Metadata
- Status: stable
- Classes: .component-icon, .component-icon-sample
- Tokens: --fs-xxl, --site-color-primary
Media
Video
Responsive video container component.
components/media/video.php
Metadata
- Status: stable
- Classes: .component-media, video
- Tokens: --radius-md, --shadow-md