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.
<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>
.
795 Folsom Ave, Suite 600
San Francisco, CA 94107
P: (123) 456-7890Full 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.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
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.
Nullam id dolor id nibh ultricies vehicula ut id elit.
Duis mollis, est non commodo luctus, nisi erat porttitor ligula.
Maecenas sed diam eget risus varius blandit sit amet non magna.
Etiam porta sem malesuada magna mollis euismod.
Donec ullamcorper nulla non metus auctor fringilla.
... and more ...
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
<p class="bg-primary">...</p>
<p class="bg-success">...</p>
<p class="bg-info">...</p>
<p class="bg-warning">...</p>
<p class="bg-danger">...</p>
... and more ...
<p class="bg-black">...</p>
<p class="bg-white">...</p>
<p class="bg-grey">...</p>
<p class="bg-brown">...</p>
<p class="bg-blue">...</p>
<p class="bg-green">...</p>
<p class="bg-turquoise">...</p>
<p class="bg-orange">...</p>
<p class="bg-red">...</p>
<p class="bg-violet">...</p>
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.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
<p class="bg-green bg-shadow-light">...</p>
<p class="bg-green 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.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
Lorem ipsum dolor sit amet, sed diam nonummy nibh euismod tincidunt.
<p class="bg-orange">...</p>
<p class="bg-orange radius-4">...</p>
<p class="bg-orange radius-8">...</p>
<p class="bg-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-110/..." />
<img class="no-style" src="/template-joomla/template-110/..." />