Typography styles are a great way to customize the appearance of content elements such as Font Awesome icons, menus, images, buttons, Bootstrap elements, all with different color styles.

Image Styles

Image Styles are designed for the images inside the articles or default HTML Joomla! modules. Use them to create new layout alignments, borders, shadows and shapes such as rounded or circle.

To use one or more image style just type the code from the examples below in your text editor. Make sure the code is added in the HTML mode by pressing the Toggle Editor button.

<img class="img-left">

TOPlist

Image Left

Demo Image

Use this style to align the images inside the modules or articles to the left.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="img-left">

Image Polaroid

Demo Image

Use this style for the images inside the modules or articles.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="img-polaroid">

Image Rounded

Demo Image

Use this style for the images inside the modules or articles.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="img-rounded">

Image Right

Demo Image

Use this style to align the images inside the modules or articles to the right.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="img-right">

Image Shadow

Demo Image

Use this style for the images inside the modules or articles.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="img-shadow">

Image Circle

Demo Image

Use this style for the images inside the modules or articles.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="img-circle">

Polaroid Clear Style

Demo Image

<img class="img-polaroid-clear">

Polaroid Dark Style

Demo Image

<img class="img-polaroid-dark">

Polaroid Color Style

Demo Image

<img class="img-polaroid-color">

Image Center

Demo Image

Use this style to center the images inside the modules or articles. To use it just type the following code in your text editor and make sure the code is added in the HTML mode by pressing the Toggle Editor button:

<img class="img-center">

Multiple Image Styles

The preset image styles can be combined in multiple ways to create a more complex style for the same image, for example:

Image Left Polaroid Rounded

Demo Image

 

Use this style to align the images inside the modules or articles to the left, with polaroid style frame and rounded corners.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode:

 

<img class="img-left img-polaroid img-rounded">

Image Right Shadow Circle

Demo Image

 

Use this style to align the images to the right with shadow style frame and circle shape.

To use it just type the following code in your text editor. Make sure the code is added in the HTML mode.

<img class="img-right img-shadow img-circle">