Shortcodes

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Native HTML is the best SEO friendly!

Contents

Default Buttons
Colored Buttons
Download Buttons
Alert Boxes
Bordered Table
Contact Form
Code Box

Default Buttons

<a class="button" href="https://www.vietrick.com/" target="_blank">Default</a>
<a class="button preview" href="https://www.vietrick.com/" target="_blank">Preview</a>
<a class="button download" href="https://www.vietrick.com/" target="_blank">Download</a>
<a class="button link" href="https://www.vietrick.com/" target="_blank">Link</a>
<a class="button cart" href="https://www.vietrick.com/" target="_blank">Shop cart</a>
<a class="button share" href="https://www.vietrick.com/" target="_blank">Share</a>
<a class="button info" href="https://www.vietrick.com/" target="_blank">More info</a>

Default Preview Download Link Shop cart More info

Colored Buttons

<a class="button green" href="https://www.vietrick.com/" target="_blank">Default</a>
<a class="button preview red" href="https://www.vietrick.com/" target="_blank">Preview</a>
<a class="button download yellow" href="https://www.vietrick.com/" target="_blank">Download</a>
<a class="button link purple" href="https://www.vietrick.com/" target="_blank">Link</a>
<a class="button cart blue" href="https://www.vietrick.com/" target="_blank">Shop cart</a>
<a class="button share orange" href="https://www.vietrick.com/" target="_blank">Share</a>
<a class="button info dark" href="https://www.vietrick.com/" target="_blank">More info</a>
<a class="button white preview" href="https://www.vietrick.com/" target="_blank">Preview</a>

Default Preview Download Link Shop cart More info Preview

Download Buttons

<a class="dl" href="https://www.vietrick.com/#" target="_blank">Lorem Ipsum is simply dummy text</a>
<a class="dl" file-size="Light, Fast & Creative" href="https://www.vietrick.com/#" target="_blank">VTrick Creative Blogger</a>
<a class="dl pdf" file-size="6.0 MB" href="https://www.vietrick.com/#pdf" target="_blank">VTrick Creative Blogger User Manual.pdf</a>
<a class="dl zip" file-size="5.34 MB" href="https://www.vietrick.com/#zip" target="_blank">VTrick Creative Blogger.zip</a>
<a class="dl media" file-size="326.1 MB" href="https://www.vietrick.com/#media" target="_blank">VTrick Creative Blogger Video</a>
<a class="dl code" file-size="324.3 KB" href="https://www.vietrick.com/#code" target="_blank">VTrick Creative Blogger Source Code</a>

Lorem Ipsum is simply dummy text VTrick Creative Blogger VTrick Creative Blogger User Manual.pdf VTrick Creative Blogger.zip VTrick Creative Blogger Video VTrick Creative Blogger Source Code

Alert Boxes

<blockquote class='check'>Lorem Ipsum...</blockquote>
<blockquote class='flag'>Lorem Ipsum...</blockquote>
<blockquote class='warn'>Lorem Ipsum...</blockquote>
<blockquote class='alert'>Lorem Ipsum...</blockquote>
<blockquote class='star'>Lorem Ipsum...</blockquote>

Lorem Ipsum is not simply random text. It has roots in a piece of classical test link here too Latin literature from 45 BC, making it over 2000 years old.

Bordered Table

Firstname	Lastname	Email
John	Doe	john@example.com
Mary	Moe	mary@example.com
July	Dooley	july@example.com

Contact Form

Syntax

<b>{contactForm}</b>

Code Box

Simple <pre> code

Default PRE
$("#main-nav #s").focus(function());

Codebox syntax powered by Prism

Code box syntax with param: lang="js"

<pre lang="js">$("#main-nav #s").blur(function()...</pre>

👉 Result:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});

Code box syntax with param: lang=""

<pre lang="">$("#main-nav #s").blur(function()...</pre>

Result:

$("#main-nav #s").blur(function() {
if (0 === this.value.length) this.value = c;
});
$("#main-nav #s").focus(function() {
if (this.value === c) this.value = "";
});

Code box syntax with param: lang="css"

.bi::before {
  display: inline-block;
  content: "";
  vertical-align: -.125em;
  background-image: url("data:image/svg+xml,<svg viewBox='0 0 16 16' fill='%23333' xmlns='http://www.w3.org/2000/svg'><path fill-rule='evenodd' d='M8 9.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z' clip-rule='evenodd'/></svg>");
  background-repeat: no-repeat;
  background-size: 1rem 1rem;
  }