Paragraph Formatting

Examples on icon paragraphs, block number paragraphs and dropcaps.

Icon Paragraph

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

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>

All 220+ icons icons available here.

Block Numbers

Block Number Blue

ALorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

BLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Block Number Turquoise

Block Number Magenta

Block Number Purple

01Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

02Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.

Block Number Red

Block Number Pink

Block Number Brown

Block Number Orange

Block Number Green

Block Number Yellow

Block Number Gray

Block Number Black

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>

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!

Expo Senda Duotonal

Mujeres

Expo Chava Flores

50 aniversario Luctuoso de Agustin Lara

Servicios

Rumores de Sevilla Exposición

Microcircuito

Viajeros de la galaxia

Margo Glantz Podcast