Typography

This is a sample blockquote. Use <blockquote><p>Your content goes here!</p></blockquote> to create a blockquote.

<div class=”s5_greenbox”> <div class=”point”> Your text here </div> </div>
<div class=”s5_redbox”> <div class=”point”> Your text here </div> </div>
<div class=”s5_bluebox”> <div class=”point”> Your text here </div> </div>
<div class=”s5_graybox”> <div class=”point”> Your text here </div> </div>
This is a styled box. Use <div class=”black_box”>Your content goes here!</div>

This is a styled box. Use <div class=”gray_box”>Your content goes here!</div>

This is a styled box. Use <div class=”red_box”>Your content goes here!</div>

This is a styled box. Use <div class=”blue_box”>Your content goes here!</div>

This is a styled box. Use <div class=”green_box”>Your content goes here!</div>

This is a styled box. Use <div class=”yellow_box”>Your content goes here!</div>

This is a styled box. Use <div class=”orange_box”>Your content goes here!</div>

This is an image with the “boxed” class applied:

This is an image with the “boxed_black” class applied:

This is an image with the “padded” class applied:

This is an image with the “full_width” class applied. This can also be done automatically in the template configuration. Be sure to review our Vertex Guide here for other full width image options.

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

<a> With readon_highlight1 class applied:

readon_highlight1

<a> With readon_highlight2 class applied:

readon_highlight2

<a> With highlight1_button class applied:

highlight1_button

<a> With highlight2_button class applied:

highlight2_button

<span> With highlight1_text class applied:

highlight1_text

<span> With highlight2_text class applied:

highlight2_text

<span> With uppercase_letters class applied:

uppercase_letters

This is a sample code div. Use <div class=”code”>Your content goes here!</div> to create a code div.

#s5_code { width: 30px; color: #fff; line-height: 45px; }

  1. This is an Ordered List
  2. Congue Quisque augue elit dolor nibh.
  3. Condimentum elte quis.
  4. Opsum dolor sit amet consectetuer.
  • This is an Unordered List
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.
  • This is an Unordered List with class plus
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.
  • This is an Unordered List with class ul_arrow
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.
  • This is an Unordered List with class ul_star
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.
  • This is an Unordered List with class ul_bullet
  • Congue Quisque augue elit dolor nibh.
  • Condimentum elte quis.
  • Opsum dolor sit amet consectetuer.

The following list will support lists up to number 9, add the following class to the UL wrapping the below LI elements, class=”ul_numbers”:

  • This is a sample styled number list <li class=”li_number1″>Your content goes here!</li>
  • This is a sample styled number list <li class=”li_number2″>Your content goes here!</li>
  • This is a sample styled number list <li class=”li_number3″>Your content goes here!</li>
  • This is a sample styled number list <li class=”li_number4″>Your content goes here!</li>
Basic

$49/per month

Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back

Premium

$99/per month

Unlimited Space & Traffic
99.9% Server Uptime
24/7 Customer Care
30 Days Money Back
FREE Domain Name

To use the price table on your site grab the following example code below and add to your site. The price table is fully responsive and can display up to 7 price columns. Once you have determined the number of columns you will be using set the wrapper div to the number of columns that you’ve added. You can use the wrapping classes of “s5_pricetable_1” to “s5_pricetable_7”.

<div class=”s5_pricetable_3″>

<div class=”s5_pricetable_column”>
<div class=”s5_pricetable_column_padding”>
<div class=”s5_title”>Basic</div>

<span class=”dollarsign”>$</span><span class=”price”>49</span><span class=”month”>/per month</span>

<div class=”s5_options”>
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br><br>
</div>

<div class=”s5_horizontalrule”></div>
<div class=”s5_buttoncenter”><a class=”button s5_pricetable” href=”#”>Choose</a></div>

</div>
</div>

<div class=”s5_pricetable_column recommended”>
<div class=”s5_pricetable_column_padding”>
<div class=”s5_title”>Standard</div>

<span class=”dollarsign”>$</span><span class=”price”>79</span><span class=”month”>/per month</span>

<div class=”s5_options”>
Unlimited Space & Traffic<br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name<br>
Personal Concierge
</div>

<div class=”s5_horizontalrule”></div>
<div class=”s5_buttoncenter”><a class=”button s5_pricetable” href=”#”>Choose</a></div>

</div>
</div>

<div class=”s5_pricetable_column”>
<div class=”s5_pricetable_column_padding”>
<div class=”s5_title”>Premium</div>

<span class=”dollarsign”>$</span><span class=”price”>99</span><span class=”month”>/per month</span>

<div class=”s5_options”>
Unlimited Space & Traffic <br>
99.9% Server Uptime<br>
24/7 Customer Care<br>
30 Days Money Back<br>
FREE Domain Name

</div>

<div class=”s5_horizontalrule”></div>
<div class=”s5_buttoncenter”><a class=”button s5_pricetable” href=”#”>Choose</a></div>

</div>
</div>

<div style=”clear:both;”></div>
</div>

Make any Youtube, Vimeo, etc video you embed to your site work with responsive by wrapping with a DIV with a class of “s5_video_container”. The below Youtube Video will shrink when the area its contained in gets too small for it:

Use the icons below in conjunction with the class icon_circle:

<i class="icon-cogs icon_circle" style="float:left"></i>

icon-adjust
icon-anchor
icon-archive
icon-asterisk
icon-barcode
icon-beer
icon-bell
icon-bolt
icon-book
icon-bookmark
icon-briefcase
icon-bug
icon-bullhorn
icon-bullseye
icon-calendar

icon-bullhorn

icon-bullseye

icon-calendar

icon-camera

icon-camera-retro

icon-certificate

icon-check

icon-circle

icon-cloud

icon-cloud-download

icon-cloud-upload

icon-code

icon-code-fork

icon-coffee

icon-cog

icon-cogs

icon-comment

icon-comments

icon-compass

icon-credit-card

icon-crop

icon-dashboard

icon-desktop

icon-download

icon-edit

icon-envelope

icon-eraser

icon-exchange

icon-exclamation

icon-external-link

icon-female

icon-fighter-jet

icon-film

icon-filter

icon-fire

icon-fire-extinguisher

icon-flag

icon-flag-checkered

icon-folder-open

icon-gamepad

icon-gear

icon-gears

icon-gift

icon-glass

icon-globe

icon-group

icon-headphones

icon-heart

icon-home

icon-inbox

icon-info

icon-key

icon-laptop

icon-leaf

icon-legal

icon-level-down

icon-level-up

icon-location-arrow

icon-lock

icon-magic

icon-magnet

icon-mail-forward

icon-mail-reply

icon-mail-reply-all

icon-male

icon-map-marker

icon-microphone

icon-minus

icon-mobile-phone

icon-money

icon-music

icon-pencil

icon-phone

icon-plane

icon-power-off

icon-print

icon-puzzle-piece

icon-qrcode

icon-question

icon-quote-left

icon-quote-right

icon-random

icon-refresh

icon-reply

icon-reply-all

icon-retweet

icon-road

icon-rocket

icon-search

icon-share

icon-shield

icon-shopping-cart

icon-signal

icon-sitemap

icon-sort

icon-sort-up

icon-spinner

icon-star

icon-star-half

icon-star-half-empty

icon-star-half-full

icon-subscript

icon-suitcase

icon-superscript

icon-tablet

icon-tag

icon-tags

icon-tasks

icon-terminal

icon-thumbs-down

icon-thumbs-up

icon-ticket

icon-trophy

icon-truck

icon-umbrella

icon-unlock

icon-unlock-alt

icon-upload

icon-user

icon-volume-down

icon-volume-off

icon-volume-up

icon-wrench