Typography
Click to preview the Typography demo. View demo
Heading Style
Code:
html
<p><span class="label bg-accent">Mauris viverra,</span> dui atle cursus suscipit, lectus hendrerit anute, neicd iaculis felis nulla quils tellus. In rhoncus pharetra ailnm. Quisque toer odio, feugiat vitae velitndle atncuion, feuiat euismod nuiednlc. Morbi lectus nellque, mollios quisnt tellus egendt, placerat viverra enaoim. </p>
<p class="lead">Mauris viverra, dui atle cursus suscipit, lectus hendrerit anute, neicd iaculis felis nulla quils tellus.</p>
<p class="text-lowercase">Pellentesque ornare sem lacinia quam venenatis alesuada mollisd.</p>
<p class="text-uppercase">Pellentesque ornare sem lacinia quam venenatis alesuada mollisd.</p>
<p class="text-capitalize">Pellentesque Ornare Sem Lacinia Quam Venenatis Alesuada Mollisd.</p>
<p>Nam liber tempor cum soluta nobis eleifend option cone facnauer possim assum. </p>
<p class="color-accent">Typi non habent claritatem insitams qui facit eorum claritatem.</p>
<p class="color-primary">Investigati ones demonstraverunt lectores legerefeugiat euismod nunc. </p>
<p class="color-success">Morbi lectus neque, mollis quis tellus eget, placerat viverra enim. </p>
<p class="color-info">Sed rhoncus neque adipiscing biben dum. </p>
<p class="color-warning">Ut euismod et metus non pulvinar. </p>
<p class="color-danger">Typi non habent claritatem insitam estend usus legentis claritatem. </p>
<p>The following snippet of text is <strong>rendered as bold text.</strong></p>
<p>The following snippet of text is <big>rendered as big text.</big></p>
<p>The following snippet of text is <em>rendered as italicized text.</em></p>
<p>The following snippet of text is <small>rendered as small text.</small></p>
<p>The following snippet of text is as <sub>subscript</sub> and <sup>superscript</sup>.</p>
<p>The following snippet of text is rendered as <code>computer code.</code></p>
<p>You can use the mark tag to <mark class="bg-accent">highlight</mark> text.</p>
<p>The following snippet of text is rendered as <span class="color-accent" data-container="body" data-placement="top" data-toggle="tooltip" title="" type="button" data-original-title="Top tooltip">tooltip.</span></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>Text Alignment
Code:
html
<div class="text-center">
<h4>Center Aligned Text</h4>
<p class="mb-20">Nam liber tempor cum soluta nobis eleifend option cone nihil imperdiet doming id quod mazim placerat facnauer possim assum... </p>
</div>
<div class="text-left">
<h4>Left Aligned Text</h4>
<p class="mb-20">Nam liber tempor cum soluta nobis eleifend option cone nihil imperdiet doming id quod mazim placerat facnauer possim assum... </p>
</div>
<div class="text-right">
<h4>Right Aligned Text</h4>
<p class="mb-20">Nam liber tempor cum soluta nobis eleifend option cone nihil imperdiet doming id quod mazim placerat facnauer possim assum... </p>
</div>
<div class="text-justify">
<h4>Justified Text</h4>
<p class="mb-20">Nam liber tempor cum soluta nobis eleifend option cone nihil imperdiet doming id quod mazim placerat facnauer possim assum... </p>
</div>Heading Color
Code:
html
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr class="bg-black">
<td><h1 class="color-white">H1. Heading</h1></td>
<td><h2 class="color-white">H2. Heading</h2></td>
<td><h3 class="color-white">H3. Heading</h3></td>
<td><h4 class="color-white">H4. Heading</h4></td>
<td><h5 class="color-white">H5. Heading</h5></td>
<td><h6 class="color-white">H6. Heading</h6></td>
</tr>
<tr>
<td><h1>H1. Heading</h1></td>
<td><h2>H2. Heading</h2></td>
<td><h3>H3. Heading</h3></td>
<td><h4>H4. Heading</h4></td>
<td><h5>H5. Heading</h5></td>
<td><h6>H6. Heading</h6></td>
</tr>
<tr>
<td><h1 class="color-accent">H1. Heading</h1></td>
<td><h2 class="color-accent">H2. Heading</h2></td>
<td><h3 class="color-accent">H3. Heading</h3></td>
<td><h4 class="color-accent">H4. Heading</h4></td>
<td><h5 class="color-accent">H5. Heading</h5></td>
<td><h6 class="color-accent">H6. Heading</h6></td>
</tr>
<tr>
<td><h1 class="color-primary">H1. Heading</h1></td>
<td><h2 class="color-primary">H2. Heading</h2></td>
<td><h3 class="color-primary">H3. Heading</h3></td>
<td><h4 class="color-primary">H4. Heading</h4></td>
<td><h5 class="color-primary">H5. Heading</h5></td>
<td><h6 class="color-primary">H6. Heading</h6></td>
</tr>
<tr>
<td><h1 class="color-success">H1. Heading</h1></td>
<td><h2 class="color-success">H2. Heading</h2></td>
<td><h3 class="color-success">H3. Heading</h3></td>
<td><h4 class="color-success">H4. Heading</h4></td>
<td><h5 class="color-success">H5. Heading</h5></td>
<td><h6 class="color-success">H6. Heading</h6></td>
</tr>
<tr>
<td><h1 class="color-info">H1. Heading</h1></td>
<td><h2 class="color-info">H2. Heading</h2></td>
<td><h3 class="color-info">H3. Heading</h3></td>
<td><h4 class="color-info">H4. Heading</h4></td>
<td><h5 class="color-info">H5. Heading</h5></td>
<td><h6 class="color-info">H6. Heading</h6></td>
</tr>
<tr>
<td><h1 class="color-warning">H1. Heading</h1></td>
<td><h2 class="color-warning">H2. Heading</h2></td>
<td><h3 class="color-warning">H3. Heading</h3></td>
<td><h4 class="color-warning">H4. Heading</h4></td>
<td><h5 class="color-warning">H5. Heading</h5></td>
<td><h6 class="color-warning">H6. Heading</h6></td>
</tr>
<tr>
<td><h1 class="color-danger">H1. Heading</h1></td>
<td><h2 class="color-danger">H2. Heading</h2></td>
<td><h3 class="color-danger">H3. Heading</h3></td>
<td><h4 class="color-danger">H4. Heading</h4></td>
<td><h5 class="color-danger">H5. Heading</h5></td>
<td><h6 class="color-danger">H6. Heading</h6></td>
</tr>
</table>Text Formatting
Code:
html
<p><span class="label bg-accent">Mauris viverra,</span> dui atle cursus suscipit, lectus hendrerit anute, neicd iaculis felis nulla quils tellus. In rhoncus pharetra ailnm. Quisque toer odio, feugiat vitae velitndle atncuion, feuiat euismod nuiednlc. Morbi lectus nellque, mollios quisnt tellus egendt, placerat viverra enaoim. </p>
<p class="lead">Mauris viverra, dui atle cursus suscipit, lectus hendrerit anute, neicd iaculis felis nulla quils tellus.</p>
<p class="text-lowercase">Pellentesque ornare sem lacinia quam venenatis alesuada mollisd.</p>
<p class="text-uppercase">Pellentesque ornare sem lacinia quam venenatis alesuada mollisd.</p>
<p class="text-capitalize">Pellentesque Ornare Sem Lacinia Quam Venenatis Alesuada Mollisd.</p>
<p>Nam liber tempor cum soluta nobis eleifend option cone facnauer possim assum. </p>
<p class="color-accent">Typi non habent claritatem insitams qui facit eorum claritatem.</p>
<p class="color-primary">Investigati ones demonstraverunt lectores legerefeugiat euismod nunc. </p>
<p class="color-success">Morbi lectus neque, mollis quis tellus eget, placerat viverra enim. </p>
<p class="color-info">Sed rhoncus neque adipiscing biben dum. </p>
<p class="color-warning">Ut euismod et metus non pulvinar. </p>
<p class="color-danger">Typi non habent claritatem insitam estend usus legentis claritatem. </p>
<p>The following snippet of text is <strong>rendered as bold text.</strong></p>
<p>The following snippet of text is <big>rendered as big text.</big></p>
<p>The following snippet of text is <em>rendered as italicized text.</em></p>
<p>The following snippet of text is <small>rendered as small text.</small></p>
<p>The following snippet of text is as <sub>subscript</sub> and <sup>superscript</sup>.</p>
<p>The following snippet of text is rendered as <code>computer code.</code></p>
<p>You can use the mark tag to <mark class="bg-accent">highlight</mark> text.</p>
<p>The following snippet of text is rendered as <span class="color-accent" data-container="body" data-placement="top" data-toggle="tooltip" title="" type="button" data-original-title="Top tooltip">tooltip.</span></p>
<p><ins>This line of text is meant to be treated as an addition to the document.</ins></p>
<p><del>This line of text is meant to be treated as deleted text.</del></p>
<p>An abbreviation of the word attribute is <abbr title="attribute">attr</abbr>.</p>
<p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
<address>
<strong>Twitter, Inc.</strong><br>
795 Folsom Ave, Suite 600<br>
San Francisco, CA 94107<br>
<abbr title="Phone">P:</abbr> (123) 456-7890
</address>
<address>
<strong>Full Name</strong><br>
<a href="mailto:#">[email protected]</a>
</address>