Typography

Dropcaps

Dropcap style 1

[dropcap1]L[/dropcap1]orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[code][dropcap1]Y[/dropcap1]ou paragraph.[/code]

Dropcap style 2

[dropcap2]L[/dropcap2]orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[code][dropcap2]Y[/dropcap2]ou paragraph.[/code]

Dropcap style 3

[dropcap3]L[/dropcap3]orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[code][dropcap3]Y[/dropcap3]ou paragraph.[/code]

Dropcap style 4

[dropcap4]L[/dropcap4]orem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
[code][dropcap4]Y[/dropcap4]ou paragraph.[/code]

[divider_top]

Block Quotes

[blockquote align=”left”]Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.[/blockquote]

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris metus tortor, commodo sit amet tempor id, gravida eget orci. In molestie feugiat nunc ac lobortis. Ut non nisi dolor, ac ultricies lorem. Vestibulum non lectus in arcu gravida malesuada. Curabitur sed sollicitudin mi. Aenean sit amet tortor ac arcu gravida rutrum eget ac dui. Phasellus rutrum dapibus nulla, a venenatis tortor eleifend vitae. Ut tincidunt vestibulum blandit. Nulla aliquet urna non enim convallis in vehicula mi scelerisque. Aliquam blandit imperdiet lorem eu ultrices. Nulla in dolor non ipsum fringilla sodales sed ac turpis. Nam nisi arcu, tincidunt sodales porta vel, ornare ac magna. Morbi in metus a felis accumsan interdum. Aliquam eros est, suscipit sit amet iaculis non, sagittis in lorem. Fusce bibendum sagittis sem, sit amet scelerisque tortor pharetra eu. Nullam facilisis ante vulputate metus accumsan lobortis.

[code]
[blockquote align=”left”]
the blockquote you want align left
[/blockquote]
[/code]
[blockquote align=”right”]Lorem ipsum dolor sit amet, consectetur adipiscing elit sed pharetra aliquet metus.[/blockquote]

Etiam sit amet lobortis justo. Donec gravida semper nisl, sit amet interdum ligula condimentum et. Etiam eleifend laoreet arcu eu dictum. Pellentesque vel sem lectus. Curabitur ut urna eu elit molestie egestas. Nunc ac nibh sit amet turpis consectetur fermentum in in mauris. Etiam tristique orci nec nibh euismod tempor. In nulla lorem, blandit blandit sagittis id, vulputate ut risus. Sed accumsan, dui at rutrum auctor, ipsum tellus bibendum lorem, et sollicitudin felis mauris id nunc. Fusce congue ullamcorper massa, sit amet lobortis dolor auctor et. Phasellus ipsum ligula, posuere sed rutrum non, scelerisque vitae sem. Cras vehicula molestie enim, ut sagittis quam aliquet sed. Maecenas ac lectus ut massa iaculis volutpat nec a diam. Fusce at massa at elit feugiat tincidunt vitae at tortor. Praesent gravida, mi ut cursus imperdiet, lectus magna congue justo, non consequat massa orci nec turpis. Aliquam neque lorem, interdum a scelerisque vel, sodales id neque.

[code]
[blockquote align=”right”]
the blockquote you want align right
[/blockquote]
[/code]

[blockquote cite=”Henry Brown, EndUser, Inc.”]Lorem ipsum dolor sit amet, adipisicing elit, sed do eiusmod tempor ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. [/blockquote]

[code]
[blockquote cite=”user”]
the blockquote text with user name
[/blockquote]
[/code]
[divider_top]

Pre and Code

[pre]
[code]
.highlight {
background: #FFFF99;
}
[/code]
[/pre]

[code]
[pre]
.highlight {
background: #FFFF99;
}
[/pre]
[/code]

[divider_top]

styled list with colors

[list style=”list1″ color=”black”]

  • style = list1
  • style = list1
  • style = list1

[/list]

[list style=”list2″ color=”gray”]

  • style = list2
  • style = list2
  • style = list2

[/list]

[list style=”list3″ color=”red”]

  • style = list3
  • style = list3
  • style = list3

[/list]

[list style=”list4″ color=”yellow”]

  • style = list4
  • style = list4
  • style = list4

[/list]

[list style=”list5″ color=”blue”]

  • style = list5
  • style = list5
  • style = list5

[/list]

[list style=”list6″ color=”pink”]

  • style = list6
  • style = list6
  • style = list6

[/list]

[list style=”list7″ color=”green”]

  • style = list7
  • style = list7
  • style = list7

[/list]

[list style=”list8″ color=”rosy”]

  • style = list8
  • style = list8
  • style = list8

[/list]


[list style=”list9″ color=”orange”]

  • style = list9
  • style = list9
  • style = list9

[/list]

[list style=”list10″ color=”magenta”]

  • style = list10
  • style = list10
  • style = list10

[/list]

[list style=”list11″ color=”red”]

  • style = list11
  • style = list11
  • style = list11

[/list]

[list style=”list12″ color=”blue”]

  • style = list12
  • style = list12
  • style = list12

[/list]

[code]
[list style=”list1″ color=”gray”]

  • your list item
  • your list item
  • your list item

[/list]
[/code]

[divider_top]

Text with Icon

[icon style=”globe” color=”black”]globe[/icon]
[icon style=”home” color=”gray”]home[/icon]
[icon style=”email” color=”red”]email[/icon]
[icon style=”user” color=”yellow”]user[/icon]
[icon style=”multiuser” color=”blue”]multiuser[/icon]
[icon style=”id” color=”pink”]id[/icon]
[icon style=”addressbook” color=”green”]addressbook[/icon]
[icon style=”phone” color=”rosy”]phone[/icon]
[icon style=”link” color=”orange”]link[/icon]
[icon style=”chain” color=”magenta”]chain[/icon]
[icon style=”calendar” color=”red”]calendar[/icon]
[icon style=”tag” color=”yellow”]tag[/icon]
[icon style=”download” color=”blue”]download[/icon]

[code]
[icon style=”user” color=”gray”]user[/icon]
[/code]

Link with Icon

[icon_link style=”globe” color=”black”]globe[/icon_link]
[icon_link style=”home” color=”gray”]home[/icon_link]
[icon_link style=”email” color=”red”]email[/icon_link]
[icon_link style=”user” color=”yellow”]user[/icon_link]
[icon_link style=”multiuser” color=”blue”]multiuser[/icon_link]
[icon_link style=”id” color=”pink”]id[/icon_link]
[icon_link style=”addressbook” color=”green”]addressbook[/icon_link]
[icon_link style=”phone” color=”rosy”]phone[/icon_link]
[icon_link style=”link” color=”orange”]link[/icon_link]
[icon_link style=”chain” color=”magenta”]chain[/icon_link]
[icon_link style=”calendar” color=”red”]calendar[/icon_link]
[icon_link style=”tag” color=”yellow”]tag[/icon_link]
[icon_link style=”download” color=”blue”]download[/icon_link]

[code]
[icon_link style=”user” href=”#” color=”gray”]user[/icon_link]
[/code]

[divider_top]

Highlight

[highlight]Morbi blandit, eros non blandit dictum, orci enim tincidunt odio, vitae tempus ipsum nibh quis est. [/highlight]Donec vehicula nisi sed dolor volutpat commodo. Nullam scelerisque varius tellus, in dapibus velit aliquet sit amet. Nullam tempus, [highlight type=”dark”]metus aliquam pretium tempus[/highlight], elit elit vehicula nisl, ut mattis nibh urna in sem. Curabitur eget libero vitae nibh lobortis adipiscing.

[code]
[highlight]your text with yellow highlight[/highlight]

[highlight type=”dark”]your text with dark highlight[/highlight]
[/code]

[divider_top]