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">

#jv-leftcol {
 width: 180px;
 float: right;
 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!

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 feed message. Use <p class="feed">Your tips goes here!</p>.

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.

Content arranged in 2 columns

Example: <div class=”grid2”><div class=”grid-col”>…</div><div class=”grid-col grid-lastcol”>…</div></div>

Content arranged in 3 columns

Example: <div class=”grid3”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>

Content arranged in 4 columns

Example: <div class=”grid4”><div class=”grid-col”>…</div>...<div class=”grid-col grid-lastcol”>…</div></div>

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. With JV Kentro you have 3 table styles to present virtually any kind of tabular data you have.

Plain Rows table style

Example: <table class="plainrows"><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

Color Stripes table style

Example: <table class="colorstripes"><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

Grey Stripes table style

Example: <table class="greystripes"><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