Typography

[background bokeh=”yes” particles=”yes” overlay=”no”]
[background_image]{THEME_ROOT}/images/stars2.jpg[/background_image]
[/background]

[spacer_20][spacer_20]

[h1]Header One Text[/h1]
[h2]Header Two Text[/h2]
[h3]Header Three Text[/h3]
[h4]Header Four Text[/h4]
[h5]Header Five Text[/h5]
[h6]Header Six Text[/h6]

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line][h1]Header One Text[/h1][/code_line]
[code_line][h2]Header Two Text[/h2][/code_line]
[code_line][h3]Header Three Text[/h3][/code_line]
[code_line][h4]Header Four Text[/h4][/code_line]
[code_line][h5]Header Five Text[/h5][/code_line]
[code_line][h6]Header Six Text[/h6][/code_line]
[/code_table]
[/toggle_box]

[spacer_20][spacer_20]

[h3]Dropcaps[/h3]

[column_one_half]
[dropcap]1[/dropcap] Lorem ipsum dolor sit amet, consec tetuer adipis cing elit, nibh euis mod tinc idunt ut lao reet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nos trud exerci tation ullam corper suscipit lobor tis nisl ut aliquip ex ea commodo conse quat.

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line][dropcap]1[/dropcap] Lorem ipsum…[/code_line]
[/code_table]
[/toggle_box]
[/column_one_half]

[column_one_half]
[boxdropcap]2[/boxdropcap] Lorem ipsum dolor sit amet, consec tetuer adipis cing elit, nibh euis mod tinc idunt ut lao reet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nos trud exerci tation ullam corper suscipit lobor tis nisl ut aliquip.

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line][boxdropcap]2[/boxdropcap] Text…[/code_line]
[/code_table]
[/toggle_box]
[/column_one_half]

[spacer_10]

[column_one_half]
[boxdropcap color=”red”]3[/boxdropcap] Lorem ipsum dolor sit amet, consec tetuer adipis cing elit, nibh euis mod tinc idunt ut lao reet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nos trud exerci tation ullam corper suscipit lobor tis nisl ut aliquip.

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line][boxdropcap color=”red”]3[/boxdropcap][/code_line]
[/code_table]
[/toggle_box]
[/column_one_half]

[column_one_half]
[boxdropcap color=”orange”]4[/boxdropcap] Lorem ipsum dolor sit amet, consec tetuer adipis cing elit, nibh euis mod tinc idunt ut lao reet dolore magna aliquam erat volut pat. Ut wisi enim ad minim veniam, quis nos trud exerci tation ullam corper suscipit lobor tis nisl ut aliquip.

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line][boxdropcap color=”orange”]4[/boxdropcap][/code_line]
[/code_table]
[/toggle_box]
[/column_one_half]

[spacer_20][spacer_20]

[h3]Text Color[/h3]

Lorem ipsum dolor sit amet, consec tetuer adipis cing elit, nibh euis mod tinc idunt ut lao reet dolore magna aliquam erat volut pat. [color color=”red”]Ut wisi enim ad minim veniam, quis nos trud exerci tation[/color] ullam corper suscipit lobor tis nisl ut aliquip ex ea commodo conse quat.

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line]Lorem ipsum [color color=”red”]Ut wisi[/color] ullam corper.[/code_line]
[/code_table]
[/toggle_box]

[spacer_20][spacer_20]

[h3]Text Highlight[/h3]

Lorem ipsum dolor sit amet, consec tetuer adipis cing elit, nibh euis mod tinc idunt ut lao reet dolore magna aliquam erat volut pat. [highlight color=”red” textcolor=”white”]Ut wisi enim ad minim veniam, quis nos trud exerci tation[/highlight] ullam corper suscipit lobor tis nisl ut aliquip ex ea commodo conse quat.

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line]Lorem ipsum [highlight color=”red” textcolor=”white”]Ut wisi[/highlight] ullam.[/code_line]
[/code_table]
[/toggle_box]

[spacer_20][spacer_20]

[h3]Tooltips[/h3]

Lorem ipsum dolor [tooltip tiptext=”Some Hover Text!” url=”javascript:;”]sit amet, consec tetuer[/tooltip] adipis cing elit, nibh euis mod tinc idunt ut lao reet dolore magna aliquam erat volut pat.Ut wisi enim ad minim veniam, quis nos trud exerci tation ullam corper suscipit lobor tis nisl ut aliquip ex ea commodo conse quat.

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line]Lorem ipsum [tooltip tiptext=”Text!” url=”link-here”]Ut wisi[/tooltip] ullam.[/code_line]
[/code_table]
[/toggle_box]

[spacer_20][spacer_20]

[h3]Line Separators[/h3]

[line]

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line][line][/code_line]
[/code_table]
[/toggle_box]

[spacer_20][spacer_20]

[h3]Spacers[/h3]

To insert extra space between elements it’s easy to use the following shortcodes:

[toggle_box title=”Shortcodes:”]
[code_table]
[code_line][spacer] or [spacer_10] (both add 10px) or [spacer_20] (adds 20px)[/code_line]
[/code_table]
[/toggle_box]

Leave a Reply

Your email address will not be published. Required fields are marked *