This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.

This template features a wide array of beautiful typography and layout snippets that puts the power back at your finger tips. In conjunction with the JB Type plugin you can harness the power of Bootstrap and Joomla 3 to create some truly beautiful and unique in page layouts.

Basic

Heading 1

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

Heading 2

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

Heading 3

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

Heading 4

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

Heading 5

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

Heading 6

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

This is a heading with the class headline.

And a p tag with a class subheading.

A simple <blockquote> style.

A simple paragraph.

With some italic text, some bold text and an underline. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Code / Pre Tags

<li>Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
<li>Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

Notices and warnings

×

Warning!

Best check yo self, you're not...

Error!

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Success!

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Information

Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.

Unordered, ordered and nested lists

• Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.
• Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.
  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus:
    1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    2. Aliquam tincidunt mauris eu risus.
    3. Vestibulum auctor dapibus neque.
  • Vestibulum auctor dapibus neque.
• Phasellus ultrices nulla quis nibh. Quisque a lectus. Donec consectetuer ligula vulputate sem tristique cursus. Nam nulla quam, gravida non, commodo a, sodales sit amet, nisi.
• Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.

A list with the class "simple"

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus:
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus.
• Vestibulum auctor dapibus neque.

A list with the class "striped" you can also use "list-striped" or "striped-list"

• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus:
• Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
• Aliquam tincidunt mauris eu risus.
• Vestibulum auctor dapibus neque.

Images

An image with a border class.

Images will also scale to the width of the content when the browser is resized.

Buttons

I am a button

I am a success button

I am a primary button

I am a warning button

I am an info button

I am a danger button

Other markup code

hyperlink
abbreviation
offset text typically styled in bold
cited title of a work
deleted text
defining instance
emphatic stress
offset text typically styled in italic
inserted text
user input
marked (highlighted) text
sample output
small print
strong importance
^superscript _subscript
variable or placeholder text

Colours and Blocks

Primary and secondary styles

The primary1 and secondary2 colours are defined in the template theme settings, while the primary2, primary3 and secondary2, secondary3 colours are calculated using LESS to deliver shades slightly darker and slightly lighter than the original..  The code used to create the blocks below are as follows:

Blocks of colour

These blocks are generated based on the markup below. The block class is used to determine the type of display whereas primary1 etc is used to determine it'as appearance.

<div class="block primary1">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Primary1

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

 

Secondary1

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Borders

These blocks are generated based on the markup below.

<div class="primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Primary1 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

 

Secondary1 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3 border

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Rounded

The following items have a class " rounded" added to them to create the subtle rounded edge.

<div class="primary1 border">
<p><strong>Primary1 </strong></p>
<p>Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.</p>
</div>

Primary1 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary2 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Primary3 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

 

Secondary1 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary2 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Secondary3 rounded

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Other styles and effects

The following classes can be applied to modules and html markup.

Shadow

Morbi tincidunt lectus nec sapien tempus at faucibus ante fermentum.

Shadow2

Morbi tincidunt lectus nec sapien tempus at faucibu.

Border

Aliquam condimentum volutpat odio lacinia vehicula.

Numbers

Am assortment of css3 styling that is suited to displaying numbers.

Anvil styling

To replicate the style below please use the following html markup.

<div class="anvil primary1">1</div>

 

1

2

3

4

5

6

Rounded-big styling

To replicate the style below please use the following html markup.

<div class="rounded-big primary1">1</div>

1

2

3

4

5

6