Friday 01 Aug 2014
Print

Typography

This is an Heading 1

Lorem tortor Curabitur urna interdum Maecenas ut felis Sed euismod id. Congue Quisque augue elit dolor nibh id lobortis egestas tristique fringilla. Laoreet elit.

This is an Heading 2

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst

Below is a sample of <pre> or <div class="code">

#mx-left {
width: 25%;
float: left;
color: #EEEEEE;
}

This is an Heading 3

Nam eleifend, mauris eu volutpat semper, libero eros fermentum mauris, vel faucibus mauris enim quis mi. Vivamus a elit. Aenean eget neque. Pellentesque ornare, massa ut scelerisque faucibus, nisl purus laoreet lectus, sed tempor pede risus ut tellus. Aliquam erat volutpat.

  1. Suspendisse hendrerit ante vel quam.
  2. Vestibulum nisl. Integer urna.
  3. Aenean hendrerit. Maecenas condimentum.
  4. Sed odio sem, placerat faucibus.

This is an Heading 4

Wisi sed pede Phasellus Vestibulum elit consequat consequat eu pellentesque metus. Laoreet Vestibulum pharetra pede mattis nunc dapibus id magna a dictumst

This is a sample clip note. Use <p class="stickynote">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="download">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="cart">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="date">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="film">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="folder">Your clip note goes here!</p> to form a clip note!

This is a sample clip note. Use <p class="lock">Your clip note goes here!</p> to form a clip note!

Lorem ipsum dolor sit amet consectetuer interdum pulvinar orci Nunc elit. Wisi Ut ac Vestibulum sit venenatis Nullam convallis odio condimentum sit. Ipsum urna pretium elit Pellentesque porttitor nibh Nullam Maecenas dui eros.Sit id Phasellus orci Sed lobortis.

01 This is a sample block number. Use <p class="blocknumber"><span class="bignumber">01</span>Your content goes here!</p> to form a block number!

02 This is a sample block number. Use <p class="blocknumber"><span class="bignumber">02</span>Your content goes here!</p> to form a block number!

03 This is a sample block number. Use <p class="blocknumber"><span class="bignumber">03</span>Your content goes here!</p> to form a block number!

This is a sample error message. Use <p class="error">Your error message goes here!</p>.

This is a sample tips message. Use <p class="tips">Your tips goes here!</p>.

This is a sample message. Use <p class="message">Your tips goes here!</p>.

This is a sample feed message. Use <p class="feed">Your tips goes here!</p>.

  • This is a sample Checklist.
  • Dolor Curabitur Nam Nulla augue id.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.
  • This is a sample Star list
  • Dolor Curabitur Nam Nulla augue id iaculis.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.
  • This is a sample Arrow list.
  • Dolor Curabitur Nam Nulla augue id iaculis.
  • Lorem et nunc congue pede auctor
  • Nunc cursus sem et pretium.

This is a highlight phrase. Use <span class="highlight">Your highlight phrase goes here!</span>.

Drop cap symbol

Example: <p class="dropcap">This is the text with dropcap symbol </p>.

This is special drop cap symbol styling for magazine / newspaper text paragraph. Vestibulum elementum consectetur nunc sed auctor. Phasellus sed nulla enim, vitae dignissim augue.

Legend style

Use Lorem ipsum dolor sit amet consectetuer at elit augue In lorem. Quis Donec libero at Vivamus mi fringilla neque commodo at vitae. A mauris risus consequat ac egestas netus est Vestibulum Curabitur consectetuer.

This is a sample Bubble. Use <div class="bubble1"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE </span>
ROUNDED SPEECH BUBBLE
This is a sample Bubble. Use <div class="bubble2"> <div> <div> <div> <div> <div> Your Bubble goes here! </div> </div> </div> </div> </div><span class="author">ROUNDED SPEECH BUBBLE</span>
SQUARE SPEECH BUBBLE

Table styling

Tabular data is very common type of information to be presented on the web. By default tables look ugly and not much readable. You have 3 table styles to present virtually any kind of tabular data you have.

Plain Rows table style

Example: <table class="simplerows"><thead>...</thead><tbody>...</tbody><tfoot>...</tfoot></table>

Table header Column header 1 Column header 2 Column header 3 Column header 4 Column header 5
Table footer Footer data
Row header 1 Lorem ipsum Dolor sit amet Consectetuer adipiscing Aliquam quis urna Sed felis
Row header 2 Nullam nec odio Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent
Row header 3 Pulvinar sed Tincidunt sit amet Massa Dolor sit amet Consectetuer adipiscing
Row header 4 Vivamus turpis metus Feugiat sit amet Class aptent Ad litora torquent Nullam nec odio
Row header 5 Massa Dolor sit amet Tincidunt sit amet Pulvinar sed Consectetuer adipiscing