Navigation

Shortcodes Typography

  1. Home
  2. Shortcodes
Typography

Headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Paragraphs

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci

Inline Text Elements

Mark

Mark can be used by adding <mark>...</mark> tag or by adding .mark class in <span> tag


Default Mark

Lorem ipsum dolor sit amet, consectetuer adipiscing elit


Primary Mark

Lorem ipsum dolor sit amet, consectetuer adipiscing elit


Success Mark

Lorem ipsum dolor sit amet, consectetuer adipiscing elit


Info Mark

Lorem ipsum dolor sit amet, consectetuer adipiscing elit


Warning Mark

Lorem ipsum dolor sit amet, consectetuer adipiscing elit


Danger Mark

Lorem ipsum dolor sit amet, consectetuer adipiscing elit


White Mark

Lorem ipsum dolor sit amet, consectetuer adipiscing elit

Small

Small can used by adding <small>...</small> tag or by adding .small class in <span> tag


Example `small`
This is small text

Bordered

Small can used by adding .txt-border class


Example `small`
This is bordered text

Underline

Underline can used by adding <u>...</u> tag or by adding .txt-u class


Example `underline`
This is underlined text

Bold

Bold text can used by adding <b>...</b> tag or by adding .txt-b class


Example `Bold text`
This is bold text

Normal

Normal text can used by adding .txt-n class


Example `Normal text`
This is normal text

Itelic

Bold text can used by adding <i>...</i> tag or by adding .txt-i class


Example `Itelic text`
This is itelic text 

<!-- Heading H1 - H6 -->

<h1>Heading 1</h1>
<h2>Heading 2</h2>
<h3>Heading 3</h3>
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>

<!-- Pragraph -->

<p>...</p>

<!-- Inline Text Elements -->

	<!-- Mark Text -->
		
		<!-- Default Mark -->
		
		<p>Lorem <mark>Ipsum</mark> doller...</p>
		
		<!-- Primary Mark -->
		
		<p>Lorem <mark class="primary">Ipsum</mark> doller...</p>
		
		<!-- Success Mark -->
		
		<p>Lorem <mark class="success">Ipsum</mark> doller...</p>
		
		<!-- Info Mark -->
		
		<p>Lorem <mark class="info">Ipsum</mark> doller...</p>
		
		<!-- Warning Mark -->
		
		<p>Lorem <mark class="warning">Ipsum</mark> doller...</p>
		
		<!-- Danger Mark -->
		
		<p>Lorem <mark class="danger">Ipsum</mark> doller...</p>
		
		<!-- White Mark -->
		
		<p>Lorem <mark class="default">Ipsum</mark> doller...</p>
	
	<!-- Small Text -->
	
	<small>This is small text</small>
	
	<!-- Bordered Text -->
	
	<span class="txt-border">This is bordered text</span>
	
	<!-- Underlined Text -->
	
	<span class="txt-u">This is Underlined text</span>
	
	<!-- Normal Text -->
	
	<span class="txt-n">This is Normal text</span>
	
	<!-- Bold Text -->
	
	<span class="txt-b">This is Bold text</span>
	
	<!-- Itellic Text -->
	
	<span class="txt-i">This is itellic text</span>