Typography

Joomlead comes with a robust set of typography options that you can use to bring your content to life. In this page, we will list and give examples of the many typography options you can use.

Variations

Variations are classes that can be applied inline, as well as put to use in some particles through **Variations** or applied directly to content as CSS classes.

Buttons

Buttons have a number of great variations to choose from. You should note that in the HTML breakdown we have added a button class in addition to the variation, which is a requirement for these particular variations to work. You can also combine these variations.

Primary   Secondary Green Green Light Black

Orange Button Red Button Grey Orange Light Button Yellow 

<a href="#" class="button btn--primary">Default Button</a>
<a href="#" class="button btn--secondary">Button Secondary</a>
<a href="#" class="button btn--green">Button Green</a>
<a href="#" class="button btn--black">Button Black</a>
<a href="#" class="button btn--green-light">Green Light</a>
<a href="#" class="button btn--orange">Orange Light</a>
<a href="#" class="button btn--red">Red Button</a>
<a href="#" class="button btn--orange-light">Orange Light</a>
<a href="#" class="button btn--yellow">Button Yellow</a>

Buttons Shadow

Buttons have a number of great variations to choose from. You should note that in the HTML breakdown we have added a button class in addition to the variation, which is a requirement for these particular variations to work. You can also combine these variations.

Primary   Secondary Green Green Light Button Black

Orange Button Red Button Grey Orange Light Button Yellow 

<a href="#" class="button btn--primary btn--with-shadow">Default Button</a>
<a href="#" class="button btn--secondary btn--with-shadow">Button Secondary</a>
<a href="#" class="button btn--green btn--with-shadow">Button Green</a>
<a href="#" class="button btn--black btn--with-shadow">Button Black</a>
<a href="#" class="button btn--green-light btn--with-shadow">Green Light</a>

Buttons with icon

Default Button Icon right

Buttons full width

Button Block

<a href="#" class="button btn--primary full-width">Button Block</a>

Buttons Large

Button Large

<a href="#" class="button btn--large btn--primary">Button Large</a>

Buttons Small

Button Small

<a href="#" class="button btn-small btn--primary">Button Small</a>

Buttons XSmall

Button XSmall

<a href="#" class="button btn-x-small btn--primary">Button Small</a>

Headings

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

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5
Heading 6

Notice Styles

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-success">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-info">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-warning">…</p>

Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

<p class="alert alert-error">…</p>

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><small>Someone famous <cite title="Source Title">Source Title</cite></small></blockquote>

Code

Inline

Wrap inline snippets of code with <code>.

For example, <section> should be wrapped as inline. 
For example, <code><section></code> should be wrapped as inline.

Note: Be sure to keep code within <pre> tags as close to the left as possible; it will render all tabs.

 

Basic block

Use <pre> for multiple lines of code. Be sure to escape any angle brackets in the code for proper rendering.

<p>Sample text here…</p>
<pre>&lt;p&gt;Sample text here…&lt;/p&gt;</pre>

Tables

# First Name Last Name Username
1 John Doe JohnDoe
2 Jane Doe JaneDoe
3 Bob Doe BobDoe 
<table class="table">…</table>