Icon Paragraph

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Example Icon Paragraph Styles Sample Code

<p class="typo-icon"><span class="icon icon-phone"> </span>Your message goes here!</p>
<p class="typo-icon"><span class="icon icon-edit"> </span>Your message goes here!</p>
<p class="typo-icon"><span class="icon icon-cloud"> </span>Your message goes here!</p>
<p class="typo-icon"><span class="icon icon-circle-arrow-right"> </span>Your message goes here!</p>
<p class="typo-icon"><span class="icon icon-cog"> </span>Your message goes here!</p>


Block Numbers

Block Number Blue

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Turquoise

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Magenta

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Purple

01Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

02Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Red

01Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

02Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Pink

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Brown

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Orange

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Green

01Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

02Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Yellow

01Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

02Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Gray

01Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

02Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Block Number Black

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

All Blockquotes Code

<p class="blocknumber"><span class="bignumber orange">04</span>Text for Orange Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber green">02</span>Text for Green Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber yellow">03</span>Text for Yellow Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber blue">03</span>Text for Blue Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber turquoise">03</span>Text for Turquoise Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber pink">05</span>Text for Pink Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber red">05</span>Text for Red Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber brown">05</span>Text for Brown Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber">01</span>Text for Gray Blocknumber goes here.</p>	
<p class="blocknumber"><span class="bignumber black">06</span>Text for Black Blocknumber goes here.</p>	

Ordered List

  1. This is a sample Ordered List.
  2. Lorem ipsum dolor sit consectetur
  3. Lorem ipsum dolor sit consectetur
  4. Lorem ipsum dolor sit consectetur

Un-Ordered List

  • This is a sample Unordered List.
  • Lorem ipsum dolor sit consectetur
  • Lorem ipsum dolor sit consectetur
  • Lorem ipsum dolor sit consectetur

Definition List

This is a sample Definition List.
Condimentum quis.
Congue Quisque augue elit dolor.
Congue Quisque augue elit dolor.

Icon Lists With All Icons By Category

Web Application Icons

  • icon-adjust
  • icon-asterisk
  • icon-ban-circle
  • icon-bar-chart
  • icon-barcode
  • icon-beaker
  • icon-beer
  • icon-bell
  • icon-bell-alt
  • icon-bolt
  • icon-book
  • icon-bookmark
  • icon-bookmark-empty
  • icon-briefcase
  • icon-bullhorn
  • icon-calendar
  • icon-camera
  • icon-camera-retro
  • icon-certificate
  • icon-check
  • icon-check-empty
  • icon-circle
  • icon-circle-blank
  • icon-cloud
  • icon-cloud-download
  • icon-cloud-upload
  • icon-coffee
  • icon-cog
  • icon-cogs
  • icon-comment
  • icon-comment-alt
  • icon-comments
  • icon-comments-alt
  • icon-credit-card
  • icon-dashboard
  • icon-desktop
  • icon-download
  • icon-download-alt
  • icon-edit
  • icon-envelope
  • icon-envelope-alt
  • icon-exchange
  • icon-exclamation-sign
  • icon-external-link
  • icon-eye-close
  • icon-eye-open
  • icon-facetime-video
  • icon-fighter-jet
  • icon-film
  • icon-filter
  • icon-fire
  • icon-flag
  • icon-folder-close
  • icon-folder-open
  • icon-folder-close-alt
  • icon-folder-open-alt
  • icon-food
  • icon-gift
  • icon-glass
  • icon-globe
  • icon-group
  • icon-hdd
  • icon-headphones
  • icon-heart
  • icon-heart-empty
  • icon-home
  • icon-inbox
  • icon-info-sign
  • icon-key
  • icon-leaf
  • icon-laptop
  • icon-legal
  • icon-lemon
  • icon-lightbulb
  • icon-lock
  • icon-unlock
  • icon-magic
  • icon-magnet
  • icon-map-marker
  • icon-minus
  • icon-minus-sign
  • icon-mobile-phone
  • icon-money
  • icon-move
  • icon-music
  • icon-off
  • icon-ok
  • icon-ok-circle
  • icon-ok-sign
  • icon-pencil
  • icon-picture
  • icon-plane
  • icon-plus
  • icon-plus-sign
  • icon-print
  • icon-pushpin
  • icon-qrcode
  • icon-question-sign
  • icon-quote-left
  • icon-quote-right
  • icon-random
  • icon-refresh
  • icon-remove
  • icon-remove-circle
  • icon-remove-sign
  • icon-reorder
  • icon-reply
  • icon-resize-horizontal
  • icon-resize-vertical
  • icon-retweet
  • icon-road
  • icon-rss
  • icon-screenshot
  • icon-search
  • icon-share
  • icon-share-alt
  • icon-shopping-cart
  • icon-signal
  • icon-signin
  • icon-signout
  • icon-sitemap
  • icon-sort
  • icon-sort-down
  • icon-sort-up
  • icon-spinner
  • icon-star
  • icon-star-empty
  • icon-star-half
  • icon-tablet
  • icon-tag
  • icon-tags
  • icon-tasks
  • icon-thumbs-down
  • icon-thumbs-up
  • icon-time
  • icon-tint
  • icon-trash
  • icon-trophy
  • icon-truck
  • icon-umbrella
  • icon-upload
  • icon-upload-alt
  • icon-user
  • icon-user-md
  • icon-volume-off
  • icon-volume-down
  • icon-volume-up
  • icon-warning-sign
  • icon-wrench
  • icon-zoom-in
  • icon-zoom-out

Text Editor Icons

  • icon-file
  • icon-file-alt
  • icon-cut
  • icon-copy
  • icon-paste
  • icon-save
  • icon-undo
  • icon-repeat
  • icon-text-height
  • icon-text-width
  • icon-align-left
  • icon-align-center
  • icon-align-right
  • icon-align-justify
  • icon-indent-left
  • icon-indent-right
  • icon-font
  • icon-bold
  • icon-italic
  • icon-strikethrough
  • icon-underline
  • icon-link
  • icon-paper-clip
  • icon-columns
  • icon-table
  • icon-th-large
  • icon-th
  • icon-th-list
  • icon-list
  • icon-list-ol
  • icon-list-ul
  • icon-list-alt

Directional Icons

  • icon-angle-left
  • icon-angle-right
  • icon-angle-up
  • icon-angle-down
  • icon-arrow-down
  • icon-arrow-left
  • icon-arrow-right
  • icon-arrow-up
  • icon-caret-down
  • icon-caret-left
  • icon-caret-right
  • icon-caret-up
  • icon-chevron-down
  • icon-chevron-left
  • icon-chevron-right
  • icon-chevron-up
  • icon-circle-arrow-down
  • icon-circle-arrow-left
  • icon-circle-arrow-right
  • icon-circle-arrow-up
  • icon-double-angle-left
  • icon-double-angle-right
  • icon-double-angle-up
  • icon-double-angle-down
  • icon-hand-down
  • icon-hand-left
  • icon-hand-right
  • icon-hand-up
  • icon-circle
  • icon-circle-blank

Video Player Icons

  • icon-play-circle
  • icon-play
  • icon-pause
  • icon-stop
  • icon-step-backward
  • icon-fast-backward
  • icon-backward
  • icon-forward
  • icon-fast-forward
  • icon-step-forward
  • icon-eject
  • icon-fullscreen
  • icon-resize-full
  • icon-resize-small

Medical Icons

  • icon-ambulance
  • icon-beaker
  • icon-h-sign
  • icon-hospital
  • icon-medkit
  • icon-plus-sign-alt
  • icon-stethoscope
  • icon-user-md

Social Icons

  • social-icon-arrow-right-metro
  • social-icon-arrow-left-metro
  • social-icon-arrow-up-metro
  • social-icon-arrow-down-metro
  • social-icon-minus-metro
  • social-icon-plus-metro
  • social-icon-picasa-metro
  • social-icon-dribbble-metro
  • social-icon-stumble-metro
  • social-icon-rss-metro
  • social-icon-pinterest-metro
  • social-icon-linkedin-metro
  • social-icon-google-plus-metro
  • social-icon-forrst-metro
  • social-icon-flickr-metro
  • social-icon-facebook-metro
  • social-icon-deviantart-metro
  • social-icon-delicious-metro
  • social-icon-apple
  • social-icon-mac-os
  • social-icon-android
  • social-icon-windows
  • social-icon-soundcloud
  • social-icon-soundcoud-rectangle
  • social-icon-dribbble
  • social-icon-dribbble-round
  • social-icon-dribbble-rectangle
  • social-icon-flickr
  • social-icon-flickr-round
  • social-icon-flickr-rectangle
  • social-icon-picasa
  • social-icon-picasa-rectangle
  • social-icon-delicious
  • social-icon-delicious-round
  • social-icon-delicious-rectangle
  • social-icon-pinterest
  • social-icon-pinterest-round
  • social-icon-pinterest-rectangle
  • social-icon-stumble-upon
  • social-icon-stumble-upon-round
  • social-icon-stumble-upon-rectangle
  • social-icon-linkedin
  • social-icon-linkedin-round
  • social-icon-linkedin-rectangle
  • social-icon-last-fm
  • social-icon-last-fm-rectangle
  • social-icon-forrst
  • social-icon-forrst-rectangle
  • social-icon-deviantart
  • social-icon-deviantart-round
  • social-icon-deviantart-rectangle
  • social-icon-youtube-fill
  • social-icon-youtube
  • social-icon-vimeo
  • social-icon-vimeo-rectangle
  • social-icon-facebook
  • social-icon-facebook-round
  • social-icon-facebook-rectangle
  • social-icon-twitter
  • social-icon-twitter-round
  • social-icon-twitter-rectangle
  • social-icon-rss
  • social-icon-rss-round
  • social-icon-rss-rectangle
  • social-icon-google
  • social-icon-google-plus
  • social-icon-google-plus-round
  • social-icon-google-plus-rectangle
  • social-icon-google-plus-menu
  • social-icon-google-drive
  • social-icon-xing-round
  • social-icon-xing-rectangle
  • social-icon-git
  • social-icon-git-rectangle
  • social-icon-github
  • social-icon-github-mascot
  • social-icon-tumbler
  • social-icon-tumbler-rectangle
  • social-icon-skype
  • social-icon-yahoo
  • social-icon-yahoo-rectangle
  • social-icon-microsoft-word-document
  • social-icon-microsoft-excel-document
  • social-icon-pdf-document
  • social-icon-joomla
  • social-icon-wodrpress
  • social-icon-wordpress-rectangle
  • social-icon-paypal
  • social-icon-html5-fill
  • social-icon-html5
  • social-icon-css3
  • social-icon-google-chrome
  • social-icon-firefox
  • social-icon-internet-explorer
  • social-icon-opera
  • social-icon-safari

Icon List Styles Sample Code

<ul class="typo-list"><li><span class="social-icon-linkedin"> </span>List's content goes here!</li></ul>
<ul class="typo-list"><li><span class="social-icon-google-plus"> </span>List's content goes here!</li></ul>
<ul class="typo-list"><li><span class="social-icon-pinterest"> </span>List's content goes here!</li></ul>
<ul class="typo-list"><li><span class="social-icon-twitter"> </span>List's content goes here!</li></ul>
<ul class="typo-list"><li><span class="social-icon-facebook"> </span>List's content goes here!</li></ul>

Dropcaps

The first letter in this paragraph is exageratedly big to atract attention, and this represents the most used typographycal technique by magazines. This enables your Joomla! template to use the magazine style drop capitalize technique and CSS2 styling for the first-letter pseudo class.
Use <p><span class="dropcap">Y</span>our content goes here!</p> to form a dropcap!


Content Columns DIV based

2 Columns

Column 1

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.

Column 2

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Sample Code

<div class="row-fluid">
	<div class="span6">
		<p>Text goes here.</p>
	</div>
	<div class="span6">
		<p>Text goes here.</p>
	</div>
</div>

3 Columns

Column 1

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.

Column 2

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Column 3

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.

Sample Code

<div class="row-fluid">
	<div class="span4">
		<p>Text goes here.</p>
	</div>
	<div class="span4">
		<p>Text goes here.</p>
	</div>
	<div class="span4">
		<p>Text goes here.</p>
	</div>
</div>

4 Columns

Column 1

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.

Column 2

The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English.

Column 3

Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy.

Column 4

There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable.

Sample Code

<div class="row-fluid">
	<div class="span3">
		<p>Text goes here.</p>
	</div>
	<div class="span3">
		<p>Text goes here.</p>
	</div>
	<div class="span3">
		<p>Text goes here.</p>
	</div>
	<div class="span3">
		<p>Text goes here.</p>
	</div>
</div>

Price Tables

Examples of juicy and responsive price tables for your products. With code snipet of course.

FREE
  • 10 MB of Storage
  • 1 Website 100Mb trafic
  • 1 Email Account
  • 1 Domain
  • 1 Database
$
9
.99
monthly
  • 10 MB of Storage
  • Unlimited Bandwidth
  • 100 Email Accounts
  • 10 Domains
  • 10 Databases
$
19
.99
monthly
  • 150 MB of Storage
  • Unlimited Bandwidth
  • 500 Email Accounts
  • Unlimited Domains
  • 25 Databases
$
29
.99
monthly
  • Unlimited Storage
  • Unlimited Bandwidth
  • 1000 Email Accounts
  • Unlimited Domains
  • Unlimited Databases

Code

<div class="price-table row-fluid">	
    <div class="column green span3">
		<div class="header">
			<div class="header pricerow">
				<div class="price">FREE</div>
			</div>	
		</div>
		<ul class="features">
			<li><b>10 MB</b> of Storage</li>
			<li><b>1</b> Website <b>100Mb</b> trafic</li>
			<li><b>1</b> Email Account</li>
			<li><b>1</b> Domain</li>
			<li><b>1</b> Database</li>
		</ul>
    </div>
	
	
    <div class="column red span3">
		<div class="header pricerow">
			<div class="curency">$</div>
			<div class="price">9</div>
			<div class="cents">.99</div>
			<div class="priceby">monthly</div>
		</div>
		<ul class="features">
			<li><b>10 MB</b> of Storage</li>
			<li><b>Unlimited</b> Bandwidth</li>
			<li><b>100</b> Email Accounts</li>
			<li><b>10</b> Domains</li>
			<li><b>10</b> Databases</li>
		</ul>	
    </div>
	
    <div class="column blue span3">		
		<div class="header pricerow">
			<div class="curency">$</div>
			<div class="price">19</div>
			<div class="cents">.99</div>
			<div class="priceby">monthly</div>
		</div>
		<ul class="features">
			<li><b>150 MB</b> of Storage</li>
			<li><b>Unlimited</b> Bandwidth</li>
			<li><b>500</b> Email Accounts</li>
			<li><b>Unlimited</b> Domains</li>
			<li><b>25</b> Databases</li>
		</ul>
    </div>
	
    <div class="column span3">
		<div class="header pricerow">
			<div class="curency">$</div>
			<div class="price">29</div>
			<div class="cents">.99</div>
			<div class="priceby">monthly</div>
		</div>

		<ul class="features">
			<li><b>Unlimited</b> Storage</li>
			<li><b>Unlimited</b> Bandwidth</li>
			<li><b>1000</b> Email Accounts</li>
			<li><b>Unlimited</b> Domains</li>
			<li><b>Unlimited</b> Databases</li>
		</ul>
    </div>
</div>

antares Options

Headings: Roboto Condensed
Content: Titillium Web
About   Reset