PremiumPress Block System

typography

Get started now.

Headings

Show HTML code

H1

H2

H3

H4

H5

H6

H1

H2

H3

H4

H5

H6

H1

H2

H3

H4

H5

H6

H1

H2

H3

H4

H5

H6

H1

H2

H3

H4

H5

H6

H1

H2

H3

H4

H5

H6


	<div class="row text-center">
	<div class="col-md-3 col-lg-2"><h1>H1</h1>


	<h2>H2</h2>

<h3>H3</h3>

<h4>H4</h4>

<h5>H5</h5>

<h6>H6</h6>

</div>

	<div class="col-md-3 col-lg-2"><h1 class="font-weight-extra-bold">H1</h1>


	<h2 class="font-weight-extra-bold">H2</h2>

<h3 class="font-weight-extra-bold">H3</h3>

<h4 class="font-weight-extra-bold">H4</h4>

<h5 class="font-weight-extra-bold">H5</h5>

<h6 class="font-weight-extra-bold">H6</h6>

</div>

	<div class="col-md-3 col-lg-2"><h1 class="font-weight-bold">H1</h1>


	<h2 class="font-weight-bold">H2</h2>

<h3 class="font-weight-bold">H3</h3>

<h4 class="font-weight-bold">H4</h4>

<h5 class="font-weight-semi-bold">H5</h5>

<h6 class="font-weight-bold">H6</h6>

</div>

	<div class="col-md-3 col-lg-2"><h1 class="font-weight-semibold">H1</h1>


	<h2 class="font-weight-semibold">H2</h2>

<h3 class="font-weight-semibold">H3</h3>

<h4 class="font-weight-semibold">H4</h4>

<h5 class="font-weight-semibold">H5</h5>

<h6 class="font-weight-semibold">H6</h6>

</div>

	<div class="col-md-3 col-lg-2"><h1 class="font-weight-normal">H1</h1>


	<h2 class="font-weight-normal">H2</h2>

<h3 class="font-weight-normal">H3</h3>

<h4 class="font-weight-normal">H4</h4>

<h5 class="font-weight-normal">H5</h5>

<h6 class="font-weight-normal">H6</h6>

</div>

	<div class="col-md-3 col-lg-2"><h1 class=" text-light bg-primary rounded-lg mb-3">H1</h1>


	<h2 class="text-light bg-secondary rounded-lg mb-3">H2</h2>

<h3 class="text-light bg-dark rounded-lg mb-3">H3</h3>

<h4 class="text-light bg-light text-dark rounded-lg mb-3">H4</h4>

<h5 class="text-light bg-success rounded-lg mb-3">H5</h5>

<h6 class="text-light bg-danger rounded-lg mb-3">H6</h6>

</div>
</div>

Headings

Show HTML code

H1 Heading

Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus.

H2 Heading

H3 Heading

H4 Heading

H5 Heading

H6 Heading

Lead Pellentesque tempor tellus eget pellentesque. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesqu.

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 of text is meant to be treated as fine print.

Muted fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.

Primary nullam id dolor id nibh ultricies vehicula ut id elit.

Secondary nullam id dolor nibh ultricies vehicula ut id elit.

Tertiary nullam id dolor id ultricies vehicula ut id elit.

Quaternary nullam id dolor id nibh vehicula ut id elit.

Sucess suis mollis, est non commodo luctus, nisi erat porttitor ligula.

Info maecenas sed diam eget risus varius blandit sit amet non magna.

Warning tiam porta sem malesuada magna mollis euismod.

Danger donec ullamcorper nulla non metus auctor fringilla.


	<div class="row">
	<div class="col-lg-6"><h1 class="mb-3">H1 Heading</h1>

<p>Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus.</p>
<hr class="solid my-4">
	<h2 class="mb-3">H2 Heading</h2>

<p>Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus.</p>
<hr class="solid my-4"><h3 class="mb-3">H3 Heading</h3>

<p>Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus.</p>
<hr class="solid my-4"><h4 class="mb-3">H4 Heading</h4>

<p>Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus.</p>
<hr class="solid my-4"><h5 class="mb-3">H5 Heading</h5>

<p>Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus.</p>
<hr class="solid my-4"><h6 class="mb-3">H6 Heading</h6>

<p>Pellentesque pellentesque eget tempor tellus. Fusce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget tempor tellus. Pellentesque pellentesque eget tempor tellus ellentesque pellentesque eget.</p>
</div>

	<div class="col-lg-6"><p class="lead">Lead Pellentesque tempor tellus eget pellentesque. usce lacllentesque eget tempor tellus ellentesque pelleinia tempor malesuada. Pellentesque pellentesque eget tempor tellus ellentesqu.</p>
<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>
<p><small>This line of text is meant to be treated as fine print.</small></p>
<p class="text-muted">Muted fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
<p class="text-primary">Primary nullam id dolor id nibh ultricies vehicula ut id elit.</p>
<p class="text-secondary">Secondary nullam id dolor nibh ultricies vehicula ut id elit.</p>
<p class="text-tertiary">Tertiary nullam id dolor id ultricies vehicula ut id elit.</p>
<p class="text-quaternary">Quaternary nullam id dolor id nibh vehicula ut id elit.</p>
<p class="text-success">Sucess suis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
<p class="text-info">Info maecenas sed diam eget risus varius blandit sit amet non magna.</p>
<p class="text-warning">Warning tiam porta sem malesuada magna mollis euismod.</p>
<p class="text-danger">Danger donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
</div>

Body Text Sizes

Show HTML code

This is extra large text

This is large text

This is medium text

This is normal text

This is small text

This is extra small text

font size 14

font size 16

font size 18

<p class="fs-xxl">This is extra large text</p>
<p class="fs-xl">This is extra large text</p>
<p class="fs-lg">This is large text</p>
<p class="fs-md">This is medium text</p>
<p>This is normal text</p>
<p class="fs-sm">This is small text</p>
<p class="fs-xs">This is extra small text</p>
<p class="fs-14">font size 14</p>
<p class="fs-16">font size 16</p>
<p class="fs-18">font size 18</p>

Font Weight

Show HTML code

This is some text

text 400

text 500

text 600

text 700

text 800

<p>This is some text</p>
<p class="text-400">text 400</p>
<p class="text-500">text 500</p>
<p class="text-600">text 600</p>
<p class="text-700">text 700</p>
<p class="text-800">text 800</p>

Abbreviations

Show HTML code

attr

HTML

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

Blockquote

Show HTML code

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

<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>

Description list basic example

Show HTML code

Description lists: A description list is perfect for defining terms.
Malesuada porta: Etiam porta sem malesuada magna mollis euismod.
Euismod: Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.

<dl><dt>Description lists</dt><dd>A description list is perfect for defining terms.</dd><dt>Malesuada porta</dt><dd>Etiam porta sem malesuada magna mollis euismod.</dd><dt>Euismod</dt><dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd></dl>

Description list alignment

Show HTML code

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.

Long 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.

<dl class="row"><dt class="col-sm-3">Description lists&nbsp;</dt><dd class="col-sm-9">A description list is perfect for defining terms.</dd><dt class="col-sm-3">Euismod</dt><dd class="col-sm-9"><p class="mb-2">Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
<p class="mb-0">Donec id elit non mi porta gravida at eget metus.</p>
</dd><dt class="col-sm-3">Malesuada porta</dt><dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd><dt class="col-sm-3 text-truncate">Long truncated term is truncated</dt><dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</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">Aenean posuere, tortor sed cursus feugiat nunc augue.</dd></dl></dd></dl>

Colors

Show HTML code

Primary

Secondary

Soft

Success

Danger

Warning

Info

Light

Dark


	<div class="row">
	<div class="col-md-4">
	<div class="p-3 mb-3 bg-primary text-white rounded-lg">Primary</div>
</div>

	<div class="col-md-4">
	<div class="p-3 mb-3 bg-secondary text-white rounded-lg">Secondary</div>
</div>

	<div class="col-md-4">
	<div class="p-3 mb-3 bg-soft text-primary text-600 rounded-lg">Soft</div>
</div>

	<div class="col-12"><hr />
</div>

	<div class="col-md-2">
	<div class="p-3 mb-3 bg-success text-white rounded-lg">Success</div>
</div>

	<div class="col-md-2">
	<div class="p-3 mb-3 bg-danger text-white rounded-lg">Danger</div>
</div>

	<div class="col-md-2">
	<div class="p-3 mb-3 bg-warning text-dark rounded-lg">Warning</div>
</div>

	<div class="col-md-2">
	<div class="p-3 mb-3 bg-info text-dark rounded-lg">Info</div>
</div>

	<div class="col-md-2">
	<div class="p-3 mb-3 bg-light text-dark rounded-lg">Light</div>
</div>

	<div class="col-md-2">
	<div class="p-3 mb-3 bg-dark text-white rounded-lg">Dark</div>
</div>
</div>

Text Colors

Show HTML code

primarysecondaryorangedarktexttext


	<span class="text-primary h4 mr-4">primary</span>

	<span class="text-secondary h4 mr-4">secondary</span>

	<span class="text-orange h4 mr-4">orange</span>

	<span class="text-dark h4 mr-4">dark</span>

	<span class="text-success h4 mr-4">text</span>

	<span class="text-danger h4 mr-4">text</span>

Color Circles

Show HTML code

<style>

.group-circle span { width:40px; height:40px; border-radius:100%; display: inline-block; border: 2px solid #fff; box-shadow: 0 1px 2px 0 rgb(0 0 0 / 5%)!important; }
.group-circle span+span { margin-left:-10px; }
</style>
	<div class="badge_tooltip text-center" data-direction="top">
	<div class="badge_tooltip__initiator">
	<div class="group-circle">
	<span class="bg-primary">&nbsp;</span>

	<span class="bg-secondary">&nbsp;</span>

	<span class="bg-orange">&nbsp;</span>

	<span class="bg-dark">&nbsp;</span>

	<span class="bg-success">&nbsp;</span>

	<span class="bg-danger">&nbsp;</span>
</div>
</div>

	<div class="badge_tooltip__item"> Available Colors </div>
</div>

Opacity

Show HTML code

Opacity 10%Opacity 50%Opacity 20%


	<span class="opacity-8 mr-4">Opacity 10%</span>

	<span class="opacity-5 mr-4">Opacity 50%</span>

	<span class="opacity-2">Opacity 20%</span>

Made with love by PremiumPress