Main Menu
Boost your work

Upgrade to premium here

Upgrade Now
Kleon Admin Dashboard
Made with by WPThemeBooster
Theme Customizer
Theme Color Mode
Navigation Layout
Vertical Navigation Styles
Header Position
Topbar Style

Typography

Lorem ipsum dolor sit amet

Heading Styles

h1. Heading text

h2. Heading text

h3. Heading text

h4. Heading text

h5. Heading text
h6. Heading text
<!-- Heading Styles -->
    <h1>h1. Heading text</h1>
    <hr>
    <h2>h2. Heading text</h2>
    <hr>
    <h3>h3. Heading text</h3>
    <hr>
    <h4>h4. Heading text</h4>
    <hr>
    <h5>h5. Heading text</h5>
    <hr>
    <h6>h6. Heading text</h6>

Heading Styles with class

.h1 through .h6 classes are also available, for when you want to match the font styling of a heading but cannot use the associated HTML element.

h1. Heading text

h2. Heading text

h3. Heading text

h4. Heading text

h5. Heading text

h6. Heading text

<!-- Heading Styles with class-->
<p class="h1">h1. Heading text</p>
<hr>
<p class="h2">h2. Heading text</p>
<hr>
<p class="h3">h3. Heading text</p>
<hr>
<p class="h4">h4. Heading text</p>
<hr>
<p class="h5">h5. Heading text</p>
<hr>
<p class="h6">h6. Heading text</p>

Inline text elements

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.

<!-- Inline text elements -->
<p>You can use the mark tag to <mark>highlight</mark> text.</p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p><s>This line of text is meant to be treated as no longer accurate.</s></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><u>This line of text will render as underlined.</u></p>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p><strong>This line rendered as bold text.</strong></p>
<p><em>This line rendered as italicized text.</em></p>

Abbreviations

attr

HTML

<!-- Abbreviations -->
<p><abbr title="attribute">attr</abbr></p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr></p>

Blockquotes

A well-known quote, contained in a blockquote element.

A well-known quote, contained in a blockquote element.

Someone famous in Source Title

A well-known quote, contained in a blockquote element.

Someone famous in Source Title 
<!-- Blockquotes -->
<blockquote class="blockquote">
    <p>A well-known quote, contained in a blockquote element.</p>
</blockquote>

<hr>

<figure>
    <blockquote class="blockquote">
      <p>A well-known quote, contained in a blockquote element.</p>
    </blockquote>
    <figcaption class="blockquote-footer">
      Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
</figure>

<hr>

<figure class="text-center">
    <blockquote class="blockquote">
      <p>A well-known quote, contained in a blockquote element.</p>
    </blockquote>
    <figcaption class="blockquote-footer">
      Someone famous in <cite title="Source Title">Source Title</cite>
    </figcaption>
</figure>

Lists: Unordered and ordered

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  • Nemo enim ipsam voluptatem quia voluptas sit amet
  • Ut enim ad minima veniam, quis nostrum exercitationem ullam
  • Quis autem vel eum iure reprehenderit qui in ea voluptate
  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  2. Sed ut perspiciatis unde omnis iste natus error sit voluptatem
  3. Nemo enim ipsam voluptatem quia voluptas sit amet
  4. Ut enim ad minima veniam, quis nostrum exercitationem ullam
  5. Quis autem vel eum iure reprehenderit qui in ea voluptate
<!-- Lists: Unordered and ordered -->
<!-- Lists: Unordered -->
<ul class="list-style">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
    <li>Nemo enim ipsam voluptatem quia voluptas sit amet</li>
    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam</li>
    <li>Quis autem vel eum iure reprehenderit qui in ea voluptate</li>
</ul>

<!-- Lists: Ordered -->
<ol class="list-style">
    <li>Lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
    <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
    <li>Nemo enim ipsam voluptatem quia voluptas sit amet</li>
    <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam</li>
    <li>Quis autem vel eum iure reprehenderit qui in ea voluptate</li>
</ol>

Lists: Unstyled

  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ilinventore veritatis et quasi architecto beatae vitae dicta
    • Sed ut perspiciatis unde omnis iste natus error sit voluptatem
    • Nemo enim ipsam voluptatem quia voluptas sit amet
    • Ut enim ad minima veniam, quis nostrum exercitationem ullam
  • Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
<!-- Lists: Unstyled -->
<ul class="list-unstyled">
    <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab ilinventore 
        veritatis et quasi architecto beatae vitae dicta</li>
    <li>
        <ul>
            <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem</li>
            <li>Nemo enim ipsam voluptatem quia voluptas sit amet</li>
            <li>Ut enim ad minima veniam, quis nostrum exercitationem ullam</li>
        </ul>
    </li>
    <li>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium 
        doloremque laudantium, totam rem aperiam.</li>
</ul>

Lists: Inline

  • Sed ut perspiciatis
  • Unde omnis iste natus
  • Error sit voluptatem accusantium
<!-- Lists: Inline -->
<ul class="list-inline">
    <li class="list-inline-item">Sed ut perspiciatis</li>
    <li class="list-inline-item">Unde omnis iste natus</li>
    <li class="list-inline-item">Error sit voluptatem accusantium</li>
</ul>

Description list basic example

Description Lists - First
A description list is perfect for defining terms.
Description Lists - Second
Etiam porta sem malesuada magna mollis euismod.
Description Lists - Third
Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

<!-- Description list basic example -->
<dl>
    <dt>Description Lists - First</dt>
    <dd>A description list is perfect for defining terms.</dd>
    <dt>Description Lists - Second</dt>
    <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
    <dt>Description Lists - Third</dt>
    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
</dl>

Description list alignment

Description Lists
Sed ut perspiciatis unde omnis iste natus error sit
Reprehenderit

Nemo enim ipsam voluptatem quia voluptas sit

And some more placeholder definition text.

Consequatur
Ut enim ad minima veniam, quis nostrum exercitationem ullam
Truncated term is truncated
This can be useful when space is tight. Adds an ellipsis at the end.
Nesting
Nested definition list
I heard you like definition lists. Let me put a definition list inside your definition list.

<!-- Description list alignment -->
<dl class="row">
    <dt class="col-sm-3">Description Lists</dt>
    <dd class="col-sm-9">Sed ut perspiciatis unde omnis iste natus error sit</dd>
  
    <dt class="col-sm-3">Reprehenderit</dt>
    <dd class="col-sm-9">
        <p>Nemo enim ipsam voluptatem quia voluptas sit</p>
        <p>And some more placeholder definition text.</p>
    </dd>
  
    <dt class="col-sm-3">Consequatur</dt>
    <dd class="col-sm-9">Ut enim ad minima veniam, quis nostrum exercitationem ullam</dd>
  
    <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
    <dd class="col-sm-9">This can be useful when space is tight. Adds an ellipsis at the end.</dd>
  
    <dt class="col-sm-3">Nesting</dt>
    <dd class="col-sm-9">
        <dl class="row">
            <dt class="col-sm-4">Nested definition list</dt>
            <dd class="col-sm-8">I heard you like definition lists. Let me put a definition list inside your definition list.</dd>
        </dl>
    </dd>
</dl>