Headings

All HTML headings, <h1> through <h5> are available.

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

Lead paragraph

Make a paragraph stand out by adding .lead.

Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus.

<p class="lead">...</p>

Alignment classes

Easily realign text to components with text alignment classes.

Left aligned text.

Center aligned text.

Right aligned text.

Justified text.

<p class="text-left">Left aligned text.</p>
<p class="text-center">Center aligned text.</p>
<p class="text-right">Right aligned text.</p>
<p class="text-justify">Justified text.</p>

Bold

For emphasizing a snippet of text with important

The following snippet of text is rendered as bold text.

<strong>rendered as bold text</strong>

Italics

For emphasizing a snippet of text with stress

The following snippet of text is rendered as italicized text.

<em>rendered as italicized text</em>

Drop Cap

To enlarge the first letter of a paragraph

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

<span class="dropcap" >L</span>orem ipsum dolor sit amet, ...

Inset left

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. your text on the left sideUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

... aliquam erat volutpat. <span class="inset-left" >your text on the left side</span> Ut wisi enim ad minim veniam, ...

Inset right

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. your text on the right sideUt wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.

... aliquam erat volutpat. <span class="inset-right" >your text on the right side</span> Ut wisi enim ad minim veniam, ...

Blockquotes

For quoting blocks of content from another source within your document.

Default blockquote

Wrap <blockquote> around any HTML as the quote. For straight quotes we recommend a <p>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

<blockquote>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
</blockquote>

Blockquote options

Style and content changes for simple variations on a standard blockquote.

Naming a source

Add <small> tag for identifying the source. Wrap the name of the source work in <cite>.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<blockquote>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
<footer>Someone famous in <cite title="Source Title">Source Title</cite></footer>
</blockquote>

Alternate displays

Use .pull-right for a floated, right-aligned blockquote.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Someone famous in Source Title

<blockquote class="blockquote-reverse">
  ...
</blockquote>

Addresses

Present contact information for the nearest ancestor or the entire body of work. Preserve formatting by ending all lines with <br>.

Twitter, Inc.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890

Full Name
This email address is being protected from spambots. You need JavaScript enabled to view it.

<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:#">This email address is being protected from spambots. You need JavaScript enabled to view it.</a>
</address>

Contextual colors

Convey meaning through color with a handful of emphasis utility classes. These may also be applied to the inside links with a darken color.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="text-muted">...</p>
<p class="text-black">...</p>
<p class="text-white">...</p>
<p class="text-blue">...</p>
<p class="text-green">...</p>
<p class="text-turquoise">...</p>
<p class="text-orange">...</p>
<p class="text-red">...</p>
<p class="text-violet">...</p>

Contextual backgrounds

Similar to the contextual text color classes, easily set the background of an element to any contextual class.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="color-black">...</p>
<p class="color-lightgrey">...</p>
<p class="color-grey">...</p>
<p class="color-brown">...</p>
<p class="color-blue">...</p>
<p class="color-green">...</p>
<p class="color-turquoise">...</p>
<p class="color-orange">...</p>
<p class="color-red">...</p>
<p class="color-violet">...</p>

148 background colors available :

maroon

brown

rosybrown

sienna

saddlebrown

chocolate

sandybrown

peru

bisque

burlywood

tan

navajowhite

blanchedalmond

wheat

darkgoldenrod

goldenrod

cornsilk

whitesmoke

white

snow

mistyrose

seashell

linen

antiquewhite

oldlace

floralwhite

beige

ivory

honeydew

mintcream

azure

aliceblue

ghostwhite

lavenderblush

lightgray

slategrey

lightslategrey

grey

dimgrey

darkslategrey

darkgrey

black

silver

lightgrey

gainsboro

tomato

orangered

coral

lightsalmon

darkorange

orange

mediumvioletred

deeppink

hotpink

palevioletred

pink

lightpink

rebeccapurple

magenta

lavender

darkslateblue

slateblue

mediumslateblue

mediumpurple

blueviolet

indigo

darkorchid

darkviolet

mediumorchid

purple

darkmagenta

fuchsia

violet

plum

thistle

orchid

deepskyblue

blue

cyan

aquamarine

turquoise

mediumturquoise

aqua

paleturquoise

lightcyan

darkturquoise

cadetblue

powderblue

lightblue

skyblue

lightskyblue

steelblue

dodgerblue

lightsteelblue

cornflowerblue

royalblue

midnightblue

navy

darkblue

mediumblue

mediumslateblue

darkred

firebrick

red

indianred

lightcoral

salmon

darksalmon

lightsalmon

crimson

darkcyan

olive

olivedrab

yellowgreen

darkolivegreen

greenyellow

chartreuse

lawngreen

darkgreen

green

forestgreen

lime

limegreen

lightgreen

palegreen

darkseagreen

seagreen

mediumseagreen

springgreen

mediumspringgreen

mediumaquamarine

lightseagreen

teal

darkcyan

cyan

lightcyan

peachpuff

papayawhip

moccasin

goldenrod

gold

khaki

lemonchiffon

palegoldenrod

darkkhaki

yellow

lightgoldenrodyellow

lightyellow

Alternate displays

Use .bg-shadow-light or .bg-shadow-dark to enlight the paragraph or a DIV.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="color-bisque bg-shadow-light">...</p>

<p class="color-bisque bg-shadow-dark">...</p>

Use .radius4, .radius6, .radius8 or .radius10 to add a border radius.

Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.



<p class="color-orange">...</p>

<p class="color-orange radius-4">...</p>

<p class="color-orange radius-8">...</p>

<p class="color-orange radius-8 bg-shadow-dark">...</p>

Image

By default, a border is added around all your images in your articles. You can disable this option in the section "General" of Template manager.

If you want add this border only on specific images, disable this option and add the class .js-border in the HTML code of your image.

If you want remove this border only on specific images, enable this option and add the class .no-style in the HTML code of your image.

<img class="js-border" src="/template-joomla/template-137/..." />

<img class="no-style" src="/template-joomla/template-137/..." />

Typography

Headings

h1. Heading 1

h2. Heading 2

h3. Heading 3

h4. Heading 4

h5. Heading 5

Lead paragraph

Alignment classes

Bold

Italics

Drop Cap

Inset left

Inset right

Blockquotes

Default blockquote

Blockquote options

Naming a source

Alternate displays

Addresses

Contextual colors

Contextual backgrounds

148 background colors available :

Alternate displays

Image