Typography

Laratic includes a comprehensive typography system built with Tailwind CSS 4. The system provides consistent heading styles, link utilities, and reusable typography components that automatically adapt to your theme's color scheme and support dark mode.

Heading Utilities

The typography system includes six heading utility classes that provide responsive font sizes and consistent styling. These utilities use the theme's title font and automatically scale across different screen sizes.

Heading 1

Use heading-1 for the main page title or hero headings:

<h1 class="heading-1">Main Page Title</h1>

Heading 2

Use heading-2 for major section headings:

<h2 class="heading-2">Section Heading</h2>

Heading 3

Use heading-3 for subsection headings:

<h3 class="heading-3">Subsection Heading</h3>

Heading 4

Use heading-4 for smaller section headings:

<h4 class="heading-4">Smaller Section Heading</h4>

Heading 5

Use heading-5 for card titles or minor headings:

<h5 class="heading-5">Card Title</h5>

Heading 6

Use heading-6 for the smallest headings:

<h6 class="heading-6">Smallest Heading</h6>

Link Utility

The link utility class provides consistent link styling with underline decoration and theme-aware colors:

<a href="#" class="link">This is a styled link</a>

Typography Components

Laratic includes several reusable typography components designed for specific use cases. These components provide consistent styling and spacing for common page header patterns.

Guest Page Header

The guest-page-header component is designed for public-facing pages like landing pages, marketing pages, or documentation sections. It supports centered text, optional divider dots, and multiple heading sizes.

Basic Usage

<x-typography.guest-page-header
    title="Welcome to Our Platform"
    description="Get started with our amazing features and tools."
/>

With Different Heading Sizes

The component supports three heading sizes: h1 (default), h2, and h3:

<x-typography.guest-page-header
    title="Smaller Heading"
    description="This uses an h2 heading."
    size="h2"
/>

Without Divider Dots

You can disable the divider dots by setting dividerDots to false:

<x-typography.guest-page-header
    title="No Divider Dots"
    description="This header doesn't have divider dots."
    :dividerDots="false"
/>

Auth Header

The auth-header component is designed for authentication pages (login, register, password reset). It provides centered text styling perfect for auth flows.

<x-typography.auth-header
    title="Sign in to your account"
    description="Enter your credentials to access your dashboard."
/>

Admin Page Header

The admin-page-header component is designed for admin dashboard pages. It provides a compact header with a title and description, perfect for admin interfaces.

<x-typography.admin-page-header
    title="User Management"
    description="Manage users, roles, and permissions from this dashboard."
/>

Settings Header

The settings-header component is designed for settings pages. It provides a compact header similar to the admin header but uses an h2 tag instead of h1.

<x-typography.settings-header
    title="Profile Settings"
    description="Update your personal information and preferences."
/>

Theme Integration

All typography utilities and components automatically adapt to your application's theme. They use CSS custom properties (CSS variables) defined in your theme configuration, ensuring consistent colors across light and dark modes.

The typography system uses these theme variables:

• --color-on-surface-strong - Primary text color
• --color-on-surface-dark-strong - Primary text color (dark mode)
• --color-on-surface-muted - Muted/secondary text color
• --color-on-surface-dark-muted - Muted/secondary text color (dark mode)
• --color-primary - Link color
• --color-primary-dark - Link color (dark mode)

Component Props Reference

Guest Page Header

Prop	Type	Default	Description
title	string	—	The main heading text
description	string	—	The description text displayed below the title
dividerDots	boolean	true	Whether to show decorative divider dots between title and description
size	string	h1	The heading size. Options: h1, h2, h3

Auth Header

Prop	Type	Default	Description
title	string	—	The main heading text (required)
description	string	—	The description text displayed below the title (required)

Admin Page Header

Prop	Type	Default	Description
title	string	null	The main heading text
description	string	null	The description text displayed below the title

Settings Header

Prop	Type	Default	Description
title	string	—	The main heading text (required)
description	string	—	The description text displayed below the title (required)

References

Category	Path / Name	Description
CSS Utility	resources/css/app.css	Heading utilities (heading-1 through heading-6) and link utility
Component	resources/views/components/typography/guest-page-header.blade.php	Guest page header component with optional divider dots
Component	resources/views/components/typography/auth-header.blade.php	Authentication page header component
Component	resources/views/components/typography/admin-page-header.blade.php	Admin dashboard page header component
Component	resources/views/components/typography/settings-header.blade.php	Settings page header component