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

php

Sized Title

The title size can be customized using the size() method.

Section Heading

php

Weighted Title

The font weight can be customized using the weight() method.

Bold Heading

php

Title with Subtext

Additional descriptive text can be added using the subtext() method.

Main Heading

This is a descriptive subtext

php

Combined Options

Multiple options can be combined to create custom styled titles.

Custom Heading

Additional context here

php
Options
The Title component supports various options for customization.
  • Title::SMALL: Small title size
  • Title::MEDIUM: Medium title size
  • Title::LARGE: Large title size
  • Title::EXTRA_LARGE: Extra large title size

API

The title component extends from HtmlElement 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