Joomla! Typography Styles are a great way to customize the appearance of content elements. They are simple to use - just type the following code in your text editor. Make sure the code is added in the html mode.

Blockquote

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 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse.

This is the blockquote element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<blockquote>...Your content goes here...</blockquote>

Drop Caps

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 ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

This is the drop cap element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.
<p class="dropcap">...Your content goes here...</div>

Content boxes

This is the info box. To use it just type the following code in your text editor in the html mode: <div class="info-box"> ...Your content goes here... </div>
This is the success box. To use it just type the following code in your text editor in the html mode: <div class="success-box"> ...Your content goes here... </div>
This is the warning box. To use it just type the following code in your text editor in the html mode: <div class="warning-box"> ...Your content goes here... </div>
This is the error box. To use it just type the following code in your text editor in the html mode: <div class="error-box"> ...Your content goes here... </div>
This is the simple box. To use it just type the following code in your text editor in the html mode: <div class="simple-box"> ...Your content goes here... </div>

Inline labels

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

This is the red label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-red">...Your content goes here...</span></p>

 

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

This is the blue label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-blue">...Your content goes here...</span></p>

 

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

This is the green label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-green">...Your content goes here...</span></p>

 

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

This is the grey label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-grey">...Your content goes here...</span></p>

 

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

This is the orange label. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<span class="label-orange">...Your content goes here...</span></p>

Speech Bubbles

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

Author - Lorem ipsum

This is the red speech bubble element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-red">...Your content goes here...</p>

 

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

Author - Lorem ipsum

This is the green speech bubble element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-green">...Your content goes here...</p>

 

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

Author - Lorem ipsum

This is the blue speech bubble element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-blue">...Your content goes here...</p>

 

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

Author - Lorem ipsum

This is the orange speech bubble element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-orange">...Your content goes here...</p>

 

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

Author - Lorem ipsum

This is the grey speech bubble element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<p class="bubble-grey">...Your content goes here...</p>

Pre Element

pre { 
background: #f1f1f1; 
border:1px solid #eeeeee; 
}
This is the pre element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.
<pre>...Your content goes here...</pre>

Headings

This is a Heading 1

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

This is a Heading 2

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

This is a Heading 3

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

This is a Heading 4

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

This is a Heading 5

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

This is a Heading 6

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 duis aute irure dolor in reprehenderit in voluptate velit esse.

Buttons

This is the info button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-info">...Button label here...</button>

This is the success button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-success">...Button label here...</button>

This is the warning button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-warning">...Button label here...</button>

This is the danger button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-danger">...Button label here...</button>

This is the inverse button element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<button class="btn btn-inverse">...Button label here...</button>

Image styles

image-styles

Image Right

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 ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

This is the image right element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img src="..." class="img-right">

image-styles

Image Left

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 ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is the image left element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img src="..." class="img-left">

image-styles

Image Rounded

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 ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is the image rounded element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img src="..." class="img-rounded">

For an image that needs to be both rounded and floated to the right or left use both classes:

<img src="..." class="img-rounded img-right">

image-styles

Image Circle

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 ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed magni dolores eos qui ratione nesciunt.

This is the image circle element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img src="..." class="img-circle">

Note that for a perfect circle the image's width has to be equal to its height (eg. width: 130px, height:130px)!

image-styles

Image Polaroid

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 ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is the image polaroid element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img src="..." class="img-polaroid">

image-styles

Image Border

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 ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is the image border element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img src="..." class="img-border">

image-styles

Image Shadow

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 ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.

This is the image shadow element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<img src="..." class="img-shadow">

Please note that .img-rounded, .img-circle and .img-shadow do not work in IE7-8 due to lack of border-radius and box-shadow support.

List check

  • list 1
  • list 2
  • list 3

This is the list check element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<ul class="list-check">...Your content goes here...</ul>

List arrow

  • list 1
  • list 2
  • list 3

This is the list arrow element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<ul class="list-arrow">...Your content goes here...</ul>

List plus

  • list 1
  • list 2
  • list 3

This is the list plus element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<ul class="list-plus">...Your content goes here...</ul>

List line

  • list 1
  • list 2
  • list 3

This is the list line element. To use it just type the following code in your text editor. Make sure the code is added in the html mode.

<ul class="list-line">...Your content goes here...</ul>
TOP

Style1

Style2

Style3

Style4

Style5

Style6

Style7

Style8

Style9

Style10