Dashtic logo
Projects
App Design Projects Web Design Projects App Development Projects Back-End Projects
View Projects
Message Sent.
3 hours ago
Order Placed
5 hour ago
Event Started
45 mintues ago
Your Admin lanuched
1 daya ago
View All Notifications
img
John Thomson App Developer
Profile
Settings
Messages
Sign Out

Typography

  1. Home
  2. Elements
  3. Typography

Default Heading Text

Examples using standard h1 to h6 html tags

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Html

Heading with color Text

Examples using standard h1 to h6 html tags

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Html

Heading-Inverse

Examples using heading-inverse css

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Html

Heading primary to danger

Examples using heading-primary to heading-danger css

h1. Heading

h2. Heading

h3. Heading

h4. Heading

h5. Heading
h6. Heading
Html

Paragraph Text

Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts. Separated they live in Bookmarksgrove right at the coast of the Semantics, a large language ocean. A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country, in which roasted parts of sentences fly into your mouth.

Most designers set their type arbitrarily, either by pulling values out of the sky or by adhering to a baseline grid. The former case isn’t worth discussing here, but the latter requires a closer look.

You can use the mark tag to highlight text.

Html

Text alignment

Easily realign text to components with text alignment classes.

Left aligned text on all viewport sizes.

Center aligned text on all viewport sizes.

Right aligned text on all viewport sizes.

Both aligned text on all viewport sizes. Ambitioni dedisse scripsisse iudicaretur. Cras mattis iudicium purus sit amet fermentum. Donec sed odio operae, eu vulputate felis rhoncus.

Html

Text transform

Transform text in components with text capitalization classes.

Lowercased text.

Uppercased text.

Capitalized text.

Html

Letter spacing

Utilities for controlling the tracking (letter spacing) of an element.

Lorem ipsum dolor sit amet. Tight letter spacing.

Lorem ipsum dolor sit amet. Normal letter spacing.

Lorem ipsum dolor sit amet. Wide letter spacing.

Html

Line Height

Utilities for controlling the leading (line height) of an element.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Lorem ipsum dolor sit amet.
Dolor sit amet.

Html

Text-styles

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.

This line rendered as italicized text.

Html

Unorder List Style

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Html

Unorder List Style2

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Html

Unorder List Style3

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Html

Unorder List Style4

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Html

Unorder List Style5

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Html

Unorder List Style6

  • Lorem ipsum dolor sit amet
  • Consectetur adipiscing elit
  • Integer molestie lorem at massa
  • Facilisis in pretium nisl aliquet
  • Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  • Faucibus porta lacus fringilla vel
  • Aenean sit amet erat nunc
  • Eget porttitor lorem
Html

Order list

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    1. Phasellus iaculis neque
    2. Purus sodales ultricies
    3. Vestibulum laoreet porttitor sem
    4. Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Html

Order With unorder

  1. Lorem ipsum dolor sit amet
  2. Consectetur adipiscing elit
  3. Integer molestie lorem at massa
  4. Facilisis in pretium nisl aliquet
  5. Nulla volutpat aliquam velit
    • Phasellus iaculis neque
    • Purus sodales ultricies
    • Vestibulum laoreet porttitor sem
    • Ac tristique libero volutpat at
  6. Faucibus porta lacus fringilla vel
  7. Aenean sit amet erat nunc
  8. Eget porttitor lorem
Html

Inline Style

  • Lorem ipsum
  • Phasellus iaculis
  • Nulla volutpat
Html

Description Align

Description lists
A description list is perfect for defining terms.
Euismod

Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

Donec id elit non mi porta gravida at eget metus.

Malesuada porta
Etiam porta sem malesuada magna mollis euismod.
Truncated term is truncated
Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
Nesting
Nested definition list
Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.
Html

Quote Left

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Html

Quote Center

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Html
Font Size

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Classes .fs-[size]
Values 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 18 | 20 | 25 | 30 | ... | 100
Font Weight

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Classes .font-[weight]
Weight bold | semibold | normal | light
Font Color

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Demo Content Title

Classes .text-[color]
Colors primary | success | warning | danger | info | indigo | purple | orange | teal | pink | black | white | inverse