Typography
Typographic
JEZ Rego has a CSS framework which implement modern and professional typographic rules:
- All semantic markup tags is styled to separated from others.
- 3 button styles.
- 7 list styles.
- 12 styles for paragraph text.
- 14 text colors predefined.
- 3 styles predefined for message box.
- Text links iconized.
- Menu module's view has been overriden for link title support.
- Express individual menu item re-styling: ability to re-style any menu item of any menu module at any position. This allow unlimited menu item styling for both background graphic and link text.
Level 1 heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 1 heading class="fancy"
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 1 heading class="thin"
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 1 heading class="caps"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 1 heading class="byline"
Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.
Level 2 Heading
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 2 heading class="fancy"
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 2 heading class="thin"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 2 heading class="caps"
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 2 heading class="byline"
Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.
Level 3 Heading
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 3 heading class="fancy"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 3 heading class="thin"
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 3 heading class="caps"
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 3 heading class="byline"
Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.
Level 4 Heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 4 heading class="fancy"
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 4 heading class="thin"
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 4 heading class="caps"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 4 heading class="byline"
Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.
Level 5 Heading
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 5 heading class="fancy"
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 5 heading class="thin"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 5 heading class="caps"
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 5 heading class="byline"
Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.
Level 6 Heading
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 6 heading class="fancy"
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Fusce sodales ligula sed urna. Aliquam posuere arcu viverra erat. Pellentesque et enim dapibus ante facilisis bibendum. Nam congue dapibus urna. Vestibulum consequat arcu at magna. Nunc faucibus mollis lacus. Nulla tempor luctus tellus. Donec blandit lobortis pede. Vestibulum vel pede ut urna eleifend lacinia. Maecenas ligula nibh, imperdiet at, interdum eget, sagittis eu, enim. Vivamus vel urna. Donec fringilla ullamcorper sem. In risus arcu, pellentesque cursus, faucibus cursus, consequat quis, est. Aliquam id erat. Aliquam arcu. Phasellus vulputate. Integer sem diam, mattis vel, viverra ullamcorper, ultricies quis, nisl. Sed sollicitudin quam ut nisi. Vivamus velit sapien, volutpat eu, faucibus id, nonummy id, urna.
Level 6 heading class="thin"
Nunc tincidunt vehicula pede. Integer consequat quam sed nisl. Aenean elit massa, porta at, lacinia ut, elementum vel, metus. Integer eget mauris a quam rutrum ullamcorper. Morbi tempus nunc id mi. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Mauris ut nunc. Maecenas euismod accumsan diam. Ut quam nunc, eleifend at, dignissim a, tincidunt sed, leo. Ut non ligula. Etiam pretium. Proin vulputate. Sed volutpat dui vitae elit. In nec sapien eget elit suscipit scelerisque. Aenean egestas dictum odio. Proin scelerisque turpis.
Level 6 heading class="caps"
Praesent iaculis pellentesque est. Nulla facilisi. Etiam fringilla vehicula orci. Aliquam fermentum ipsum id nulla. Aliquam interdum laoreet leo. Cras accumsan. Nam pharetra diam id nunc. Integer blandit tellus vulputate felis. Cras aliquam, eros in euismod aliquam, enim nisl mollis metus, quis fringilla ipsum diam ut pede. Mauris a libero ac velit interdum pulvinar. Nunc ipsum mauris, semper rhoncus, feugiat ut, egestas id, diam. Nullam porttitor condimentum risus. Vivamus nec enim eget nisi commodo euismod. Ut turpis. Nullam malesuada rutrum neque. Nam sodales porta elit. Mauris mollis nisl vel augue.
Level 6 heading class="byline"
Sed scelerisque sagittis lorem. Phasellus sodales. Nulla urna justo, vehicula in, suscipit nec, molestie sed, tellus.
Paragraphs
A paragraph using "oldbook" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "note" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "fancy" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "caps" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "small" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "large" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "quiet" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "loud" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "highlight" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "thin" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
A paragraph using "bold" class
Pellentesque tempor, dui ut ultrices viverra, neque urna blandit nisi, id accumsan dolor est vitae risus.
Unordered lists
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
ul class="accept"
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
ul class="add"
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
ul class="bell"
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
ul class="star"
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
ul class="tick"
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
ul class="starburst"
- Lorem ipsum dolor sit amet
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- Ut enim ad minim veniam
Ordered lists
- Consectetur adipisicing elit
- Sed do eiusmod tempor incididunt ut labore
- Et dolore magna aliqua
ol class="starburst"
- li class="i1": Lorem ipsum dolor sit amet
- li class="i2": Consectetur adipisicing elit
- li class="i3": Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- li class="i4": Ut enim ad minim veniam
- li class="i5": Lorem ipsum dolor sit amet
- li class="i6": Consectetur adipisicing elit
- li class="i7": Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua
- li class="i8": Ut enim ad minim veniam
- li class="i9": Lorem ipsum dolor sit amet
- li class="etc": Consectetur adipisicing elit
Nested unordered and ordered lists
- Unordered list 01
- Unordered list 02
- Unordered list 03
- Unordered list inside list level 2
- Unordered list inside list level 2
- Ordered list inside list level 3
- Ordered list inside list level 3
- Unordered list inside list level 4
- Unordered list inside list level 4
- Ordered list 01
- Ordered list 02
- Ordered list 03
- Ordered list inside list level 2
- Ordered list inside list level 2
- Unordered list inside list level 3
- Unordered list inside list level 3
- Ordered list inside list level 4
- Ordered list inside list level 4
Description list
- Description list title 01
- Description list description 01
- Description list title 02
- Description list description 02
- Description list description 03
Blockquotes
Lorem 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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
blockquote class="qmarks"
Paragraph inside blockquote: Nam libero leo, elementum in, dapibus a, suscipit vitae, purus. Duis arcu. Integer dignissim fermentum enim. Morbi convallis felis vel nibh. Sed scelerisque sagittis lorem.
Tables
| Album | Year | Price |
|---|---|---|
| Album | Year | Price |
| Are You Experienced | 1967 | $10.00 |
| Axis: Bold as Love | 1967 | $12.00 |
| Electric Ladyland | 1968 | $10.00 |
| Band of Gypsys | 1970 | $12.00 |
table class="borders"
| Table head th | Table head td |
|---|---|
| Table foot th | Table foot td |
| Table body th | Table body td |
| Table body td | Table body td |
Forms
Colorization
An heading using "water" class
An heading using "earth" class
An heading using "air" class
(effective only on dark background)
An heading using "fire" class
An heading using "wine" class
An heading using "beer" class
An heading using "caffe" class
An heading using "caffe-cream" class
An heading using "espresso" class
An heading using "caramel" class
An heading using "chocolate" class
An heading using "black-pepper" class
An heading using "pepper-lite" class
An heading using "lipstick" class
Text link iconization
I am a word document link, so readers know that I'm not a normal link.
I am an excel spreadsheet link, so readers know that I'm not a normal link.
I am a pdf document link, so readers know that I'm not a normal link.
I am an rss feed link, so readers know that I'm not a normal link.
I am an AIM screenname link, so readers know that I'm not a normal link.
I am an email address link, so readers know that I'm not a normal link.
I am an external website link, so readers know that I'm not a normal link.
I am an internal link. Set internal link domains in template parameters so I don't look like an external link.
Code block
<html>
<head>
<title>
</title>
</head>
<body>
<div class="header">
</div>
<div class="content">
</div>
<div class="footer">
</div>
</body>
</html>
Preformated block
Preformated: Testing one row
and another.
Below is a code block inside preformated block:
<html>
<head>
<title>
</title>
</head>
<body>
<div class="content">
</div>
</body>
</html>
Message boxes
I am a paragraph with class="success" and a link.
Below is HTML code to create a message box like me:
<p class="success">
<img src="http://any_image" class="fl mr1" />
I am a paragraph with class="success" and
<a href="#any_link">a link</a>.
</p>
I am a paragraph with class="error" and a link.
Below is HTML code to create a message box like me:
<p class="error">
<img src="http://any_image" class="fl mr1" />
I am a paragraph with class="error" and
<a href="#any_link">a link</a>.
</p>
I am a paragraph with class="notice" and a link.
Below is HTML code to create a message box like me:
<p class="notice">
<img src="http://any_image" class="fl mr1" />
I am a paragraph with class="notice" and
<a href="#any_link">a link</a>.
</p>
Other semantic markups
I am the a tag example
I am the span tag example
I am a span using "oldbook" class example
I am a span using "note" class example
I am a span using "fancy" class example
I am a span using "caps" class example
I am a span using "small" class example
I am a span using "large" class example
I am a span using "quiet" class example
I am a span using "loud" class example
I am a span using "highlight" class example
I am a span using "thin" class example
I am a span using "bold" class example
I am the b tag example
I am the i tag example
I am the u tag example
I am the em tag example
I am the big tag example
I am the strong tag example
I am the small tag example
I am the sup tag example
I am the sub tag example
I am the code tag example
I am the tt tag example
I am the kbd tag example
I am the var tag example
I am the samp tag example
I am the dfn tag example
I am the dfn tag with title attribute set example
I am the acronym tag example
I am the acronym tag with title attribute set example
I am the abbr tag example
I am the abbr tag with title attribute set example
I am the acronym tag inside an a tag example
I am the abbr tag inside an a tag example
I am the q tag
example
I am the s tag example
I am the cite tag example
I am the strike tag example
I am the ins tag example
I am the del tag example