Text : Typography

[teaser]Structure your content into paragraphs and headings for clear communication. This block of text is styled as a teaser. [/teaser]

This is an h1 heading

This is body text. This is a link. Following is just placeholder text… Readable content on a page is distracting when looking at the page layout and design. The point of using Lorem Ipsum text below is to have placeholder text that is less distracting.

This is an h2 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

This is an h3 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

This is an h4 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

This is an h5 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

This is an h6 heading

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

[teaser]This paragraph is styled as teaser text. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.[/teaser]

[teaser_small]This paragraph is styled as small teaser text. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.[/teaser_small]

[divider_top]

[fancy_header]This is a fancy header[/fancy_header]
The header above automatically takes the color you selected for your theme. If you want, you can also choose from the colors below.

[one_third]

[fancy_header variation=”red”]Color: red[/fancy_header]
[fancy_header variation=”orange”]Color: orange[/fancy_header]
[fancy_header variation=”yellow”]Color: yellow[/fancy_header]
[fancy_header variation=”green”]Color: green[/fancy_header]
[fancy_header variation=”olive”]Color: olive[/fancy_header]
[fancy_header variation=”teal”]Color: teal[/fancy_header]
[fancy_header variation=”blue”]Color: blue[/fancy_header]
[/one_third]

[one_third]
[fancy_header variation=”deepblue”]Color: deepblue[/fancy_header]
[fancy_header variation=”purple”]Color: purple[/fancy_header]
[fancy_header variation=”hotpink”]Color: hotpink[/fancy_header]
[fancy_header variation=”slategrey”]Color: slategrey[/fancy_header]
[fancy_header variation=”mauve”]Color: mauve[/fancy_header]
[fancy_header variation=”pearl”]Color: pearl[/fancy_header]
[fancy_header variation=”steelblue”]Color: steelblue[/fancy_header]
[/one_third]

[one_third_last]
[fancy_header variation=”mossgreen”]Color: mossgreen[/fancy_header]
[fancy_header variation=”wheat”]Color: wheat[/fancy_header]
[fancy_header variation=”coffee”]Color: coffee[/fancy_header]
[fancy_header variation=”copper”]Color: copper[/fancy_header]
[fancy_header variation=”silver”]Color: silver[/fancy_header]
[fancy_header variation=”black”]Color: black[/fancy_header]
[/one_third_last]

[divider_top]

[fancy_header2]Fancy Header 2[/fancy_header2]

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

[divider_top]

[fancy_header3]This is fancy header 3[/fancy_header3]

[dropcap1]1[/dropcap1]Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

[fancy_header3]Section 2[/fancy_header3]

[dropcap1]2[/dropcap1]Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

[one_half]

[fancy_header3]Section 3[/fancy_header3]

[dropcap1]3[/dropcap1]Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

[/one_half]

[one_half_last]

[fancy_header3]Section 4[/fancy_header3]

[dropcap1]4[/dropcap1]Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem.

[/one_half_last]

[divider_top]

Highlighting

[highlight1]This is highlight style #1.[/highlight1] Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. [highlight2]This is highlight style #2.[/highlight2] Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

[divider_top]

Tooltips

Hover over the [tooltip trigger=”tooltip trigger text” width=”300px” sticky=”true”]

  • Scelerisque aliquet lorem orci.
  • Convallis odio est.
  • Dolor sit amet dignissim convallis.
  • Nullam dignissim convallis.

[/tooltip] to see more information. Tooltips provide a great way for adding information in context. Many options are available, such as stickiness, custom background, close icon (useful on iOS devices), alignment, positioning and displaying rich content such as images and [tooltip sticky=”true” bgColor=”#666″ width=”440″ position=”right” trigger=”video”]

[/tooltip]. Tooltips can be applied to text, images, buttons, etc.

[divider_top]

Fancy Ampersand – [fancy_amp]

You can use a fancy ampersand like this one [fancy_amp] or the one in the heading above.

[divider_top]

Quotes

Block Quotes

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. – Anonymous

Pull Quotes

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. [pullquote_right]This is a pull quote. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec.[/pullquote_right] Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus dignissim convallis tincidunt.

Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. [pullquote_left]This is a pull quote. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec.[/pullquote_left] Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

[pullquote1 quotes=”true” align=”center” cite=”Unknown” citelink=”http://www.lipsum.com”]This is a pull quote, style 1, centered. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec.[/pullquote1]

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

[pullquote2 quotes=”true” align=”left” cite=”Unkown” citeLink=”http://www.lipsum.com”]This is a pull quote, style 2. Lorem ipsum lorem ipsum lorem ipsum![/pullquote2]

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

[pullquote3 quotes=”true” align=”right” cite=”Unkown” citeLink=”http://www.lipsum.com”]This is a pull quote, style 3. Lorem ipsum lorem ipsum lorem ipsum![/pullquote3]

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

[pullquote4 quotes=”true” align=”left” bgColor=”#aaa”]This is a pull quote, style 4. Lorem ipsum lorem ipsum lorem ipsum![/pullquote4]

Lorem ipsum dolor sit amet, adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.

[divider_top]

Tables

[fancy_table]

Header 1 Header 2 Header 3 Header 4 Header 5
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell
Table cell Table cell Table cell Table cell Table cell

[/fancy_table]

[divider_top]

Code formatting

This formatting is helpful if you ever need to show any computer code on your pages.

Fixed-width formatting: pre tag

[fancy_pre_box]
Preformatted text is displayed in fixed-width and preserves spaces, tabs and line breaks.
1 ********
2 ********
3 ********
[/fancy_pre_box]

Computer code formatting: code tag

[fancy_code_box]
select, input {
background:url(“styles/_shared/input.png”) no-repeat scroll 0 0 #FFFFFF;
border:1px solid #DDDDDD;
color:#666666;
padding: 5px;
}
[/fancy_code_box]

[divider_top]

Other text formatting

HTML text tags: sup, sub, cite, acronym, abbr, del, ins, big, small.

Following text is superscript and following text is subscript followed by citation text. WYSIWYG is an acronym and is followed by AVE, which is an abbreviation. You can show this text was deleted. You can show this text was inserted. Following text is meant to show big and following text is meant to show small.

[divider_top]

Dividers

There are a number of dividers available to insert some white space where needed, separate content with a gray line, and provide navigation to the Top of the page like the line below…

[divider_top]

Leave a Reply

Your email address will not be published.