Title
A flexible heading component that provides consistent styling and hierarchy for titles across the application.Basic Title
The title component can be created by calling the UI::title()
method with the desired heading level (h1-h6).
Welcome to UXMAL
Sized Title
The title size can be customized using the size()
method.
Section Heading
Weighted Title
The font weight can be customized using the weight()
method.
Bold Heading
Title with Subtext
Additional descriptive text can be added using the subtext()
method.
Main Heading
This is a descriptive subtext
Combined Options
Multiple options can be combined to create custom styled titles.
Custom Heading
Additional context here
Options
The Title component supports various options for customization.Title::SMALL
: Small title sizeTitle::MEDIUM
: Medium title sizeTitle::LARGE
: Large title sizeTitle::EXTRA_LARGE
: Extra large title size
API
The title component extends fromHtmlElement
so it has all its methods available.API PHP
Common alternative names: Heading, Header, Section Title, Page Title, Content Title
Types: Default Titles, Size Variants, Weight Variants, Subtext Titles, Custom Titles
Principles
Semantic Structure
Titles maintain proper HTML heading hierarchy (h1-h6) for better document structure and accessibility.
Visual Hierarchy
Titles establish clear content hierarchy through size and weight variations.
Flexibility
Titles can be customized with different sizes, weights, and subtext while maintaining semantic structure.
Usage
Use titles to create clear content hierarchy. They're particularly effective for:
- Page headers
- Section headings
- Content organization
- Feature titles
- Form sections