##### Amara Evans

amara@example.com

Pro

### Upgrade to Pro

Get access to all features

- Advanced Analytics
- Team Collaboration
- API Access

Upgrade Now
Upgrade to Pro
Log Out

# Typography

Typography components are flexible UI elements designed to customize and enhance the text style, size, and appearance within an interface.

### Headings

Standard HTML headings from h1 to h6. Use these to create a clear hierarchy of content. h1 is the largest and most important, while h6 is the smallest. Each heading has default Bootstrap styling with appropriate font sizes and spacing.

Headings
Loading...
Headings
Loading...

### Uppercase Headings

Transform any heading to uppercase using the `.text-uppercase` utility class. This is useful for creating emphasis or matching specific design requirements while maintaining semantic heading structure.

Uppercase Headings
Loading...
Uppercase Headings
Loading...

### Small Headings

Create smaller headings by combining `.text-uppercase` with font size utilities like `.fs-6`. Perfect for section labels, captions, or when you need a heading that doesn't dominate the visual hierarchy.

Small Headings
Loading...
Small Headings
Loading...

### Display Headings

Display headings are larger, more prominent headings designed for hero sections, landing pages, or when you need maximum visual impact. Use classes `.display-1` through `.display-6`, where display-1 is the largest.

Display Headings
Loading...
Display Headings
Loading...

### Lead Text

Lead text makes a paragraph stand out by increasing its font size and weight. Use the `.lead` class for introductory paragraphs, article summaries, or any text that should draw the reader's attention.

Lead Text
Loading...
Lead Text
Loading...

### Lists

Styled lists with custom bullet points and colors. The `.unordered-list` class with color variants (primary, secondary, etc.) creates colored bullet points. The `.icon-list` class replaces bullets with checkmark icons, perfect for feature lists or completed tasks.

Unordered List
Loading...
Unordered List
Loading...
Icon List
Loading...
Icon List
Loading...

### Dropcap

A dropcap is a large initial letter that drops below the first line of a paragraph. Use the `.dropcap` class with color variants to create an elegant, magazine-style opening for articles or important content sections.

Dropcap
Loading...
Dropcap
Loading...

### Links

Control link opacity for subtle text effects. Use `.link-opacity-*` classes for static opacity (10, 25, 50, 75, 100) or `.link-opacity-*-hover` classes for opacity changes on hover. Great for creating secondary navigation or subtle call-to-action links.

Link Opacity
Loading...
Link Opacity
Loading...
Link Hover Opacity
Loading...
Link Hover Opacity
Loading...

### Link Underlines

Customize link underlines with color and opacity. Use `.link-underline-*` classes to match underline colors with your theme colors. Combine with `.link-underline-opacity-*` classes to control underline visibility. Perfect for creating sophisticated link styling that matches your design system.

Link Underline Color
Loading...
Link Underline Color
Loading...
Link Underline Opacity
Loading...
Link Underline Opacity
Loading...

### Link Color

Apply theme colors to links using `.link-*` classes (primary, secondary, success, danger, warning). These examples combine colored links with subtle underlines that become more prominent on hover, creating an elegant interactive effect.

Link Color
Loading...
Link Color
Loading...
`ESC`

###### Quick Links

###### Dashboard

Analytics Overview

###### Profile

View your profile

###### Settings

Manage preferences

###### Help Center

Get support

###### Recent Searches

Analytics Dashboard User Settings Email Templates