h1. Heading
Notifications
Clear All

You have 3 new messages

2 minutes ago

Your report is ready

1 hour ago

System update scheduled

Yesterday
View All Notifications
Theme Customization
Theme Presets
Color Scheme
Layouts
Sidebar Size
Smart Theme
Direction
Header Theme
Sidebar Theme
Headings (h1 - h6)

All HTML headings, <h1> through <h6>, are styled for clean, weighted readability.

h1. Heading

32px (2rem)

h2. Heading

24px (1.5rem)

h3. Heading

20px (1.25rem)

h4. Heading

16px (1rem)
h5. Heading
14px (0.875rem)
h6. Heading
12px (0.75rem)
Display Headings

When you need a heading to stand out, use a larger, more prominent display heading.

Display 1

Display 2

Display 3

Display 4

Secondary Headings (Muted Subtext)

Add faded secondary text directly inside a heading to display auxiliary details.

Fancy Heading With secondary text

Sub Section Detailed log view

Component Panel Active configurations

Inline Text Elements

Styling elements for common inline HTML tags to emphasize words or content segments.

You can use the mark tag to highlight text.

This line of text is meant to be treated as deleted text.

This line of text is meant to be treated as no longer accurate.

This line of text is meant to be treated as an addition to the document.

This line of text will render as underlined.

This line of text is meant to be treated as fine print.

This line rendered as bold text.

This line rendered as italicized text.

Lead & Blockquotes

Make a paragraph stand out by applying `.lead`, or format citations using blockquotes.

This is a lead paragraph. It stands out with a larger font size and lighter weight.

"A well-designed dashboard template brings clarity to complex operations."

DashLite UX Team
Weights, Colors & Transformations

Combine weights, transforms, and brand colors to guide the reader's focus.

Weights & Transforms

Light Text (300)

Bold Text (700)

LOWERCASE TEXT

uppercase text

capitalize text

Themed Colors

Primary Accent Color

Success Action Color

Danger Alert Color

Warning Caution Color

Muted Secondary Text

Description List Alignment

Align terms and descriptions horizontally using responsive grid columns.

Description List
A description list is perfect for defining terms in key-value pairs.
Egestas
Vestibulum id ligula porta felis euismod semper.
Truncated Title Term
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh.
Nesting
Nested Title
Nested details.
Unstyled & Inline Lists

Remove default list bullets using `.list-unstyled`, or lay them out inline using `.list-inline`.

Unstyled List
  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
Inline List
  • Item One
  • Item Two
  • Item Three