DESIGN SYSTEM EDITION · v0.8.3.8.4

Heading Library

Thirty reusable 2026 design treatments powered by the shared Monarch fonts, colors, typography, spacing, Flow, and token architecture.

Source: components/typography/heading.php

Tokens: --font-primary, --font-secondary, --fs-xxl

Classes: h1, h2, h3, .section-heading

Component DirectoryStyle Guide
01

Default

PresentationContent

Standard Monarch treatment

Default

Default Heading

A practical Default treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'default']); ?>
02

Minimal

PresentationContent

Reduced decoration and visual weight

Minimal

Minimal Heading

A practical Minimal treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'minimal']); ?>
03

Outlined

UtilityContent

Transparent surface with a defined tokenized stroke

Outlined

Outlined Heading

A practical Outlined treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'outlined']); ?>
04

Soft

CommunityContent

Quiet low-contrast surface

Soft

Soft Heading

A practical Soft treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'soft']); ?>
05

Elevated

CommerceMarketing

Layered surface with tokenized shadow

Elevated

Elevated Heading

A practical Elevated treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'elevated']); ?>
06

Compact

ProductivityUtility

Dense interface treatment

Compact

Compact Heading

A practical Compact treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'compact']); ?>
07

Spacious

PresentationMarketing

Generous presentation rhythm

Spacious

Spacious Heading

A practical Spacious treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'spacious']); ?>
08

Inline

ContentCommunity

Designed to sit within surrounding content

Inline

Inline Heading

A practical Inline treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'inline']); ?>
09

Stacked

PresentationProductivity

Vertical component anatomy

Stacked

Stacked Heading

A practical Stacked treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'stacked']); ?>
10

Split

MarketingCommerce

Two-region composition

Split

Split Heading

A practical Split treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'split']); ?>
11

Accent Border

PresentationContent

Strong accent edge with neutral body

Accent Border

Accent Border Heading

A practical Accent Border treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'accent-border']); ?>
12

Highlight

MarketingCommerce

Attention without semantic status

Highlight

Highlight Heading

A practical Highlight treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'highlight']); ?>
13

Feature

MarketingPresentation

Prominent section anchor

Feature

Feature Heading

A practical Feature treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'feature']); ?>
14

Showcase

EntertainmentMarketing

Highly visual featured presentation

Showcase

Showcase Heading

A practical Showcase treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'showcase']); ?>
15

Signature

PresentationMarketing

Distinct Monarch branded treatment

Signature

Signature Heading

A practical Signature treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'signature']); ?>
16

Editorial

ContentPresentation

Long-form and publishing treatment

Editorial

Editorial Heading

A practical Editorial treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'editorial']); ?>
17

Corporate

PresentationProductivity

Structured restrained business treatment

Corporate

Corporate Heading

A practical Corporate treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'corporate']); ?>
18

Marketing

MarketingCommerce

Promotion and conversion treatment

Marketing

Marketing Heading

A practical Marketing treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'marketing']); ?>
19

Commerce

CommerceMarketing

Transactional information treatment

Commerce

Commerce Heading

A practical Commerce treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'commerce']); ?>
20

Dashboard

ProductivityUtility

Metrics and application interface treatment

Dashboard

Dashboard Heading

A practical Dashboard treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'dashboard']); ?>
21

Community

CommunityContent

People and participation treatment

Community

Community Heading

A practical Community treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'community']); ?>
22

Entertainment

EntertainmentCommunity

Media and leisure treatment

Entertainment

Entertainment Heading

A practical Entertainment treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'entertainment']); ?>
23

Utility

UtilityProductivity

Functional tool-interface treatment

Utility

Utility Heading

A practical Utility treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'utility']); ?>
24

Information

UtilityContent

Neutral educational or system information

Info

Information Heading

A practical Information treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'info']); ?>
25

Success

CommerceProductivity

Completed or positive state

Success

Success Heading

A practical Success treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'success']); ?>
26

Warning

CommerceProductivity

Cautionary state requiring attention

Warning

Warning Heading

A practical Warning treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'warning']); ?>
27

Danger

UtilityProductivity

Critical, destructive, or failed state

Danger

Danger Heading

A practical Danger treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'danger']); ?>
28

Muted

ContentPresentation

Secondary lower-priority information

Muted

Muted Heading

A practical Muted treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'muted']); ?>
29

Gradient

MarketingEntertainment

Centralized Monarch gradient treatment

Gradient

Gradient Heading

A practical Gradient treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'gradient']); ?>
30

Inverse

EntertainmentMarketing

High-contrast treatment for strong surfaces

Inverse

Inverse Heading

A practical Inverse treatment adaptable to Presentation, Content, Commerce, Community, Productivity, Marketing, Utility, and Entertainment websites.

Classes, source, anatomy, and accessibility

Anatomy: Semantic wrapper, component content, optional metadata, and actions.

Accessibility: Uses native semantic HTML and visible labels where applicable.

<?php monarch_render_component('typography', 'heading', ['style' => 'inverse']); ?>