Typography and other styles

Headings

This is a h1 heading

This is a h2 heading

This is a h3 heading

This is a h4 heading

This is a h5 heading

This is a h6 heading

You can also add attribute class="bar" to any of the headings to make it look like the section headings on this page.

Lists

Unordered list – tag <ul>

List item one
List item two
List item three

Ordered list – tag <ol>

List item one
List item two
List item three

Unordered list with class="arrow-list"

List item one
List item two
List item three

Unordered list with class="check-list"

List item one
List item two
List item three

Unordered list with class="lines-list"

List item one
List item two
List item three

Unordered list with class="arrow-link-list"

Forms

Text field

Text area

Password field

Checkboxes Option one Option two

Radio buttons Option one Option two

Tables

Here are three examples of table styles. Fist, a very basic table:

Table Header One	Table Header Two
Table cell one	Table cell two
Table cell three	Table cell four
Table cell five	Table cell six

This is a complex table with a <caption> and with <thead>, <tfoot> and <tbody> sections.

This is text is inside a table caption tag.
Table Header One	Table Header Two
Table footer cell one	Table footer cell two
Table body cell one	Table body cell two
Table body cell three	Table body cell four
Table body cell five	Table body cell six

This table is wrapped in a rounded box (a <div> tag with classes aligncenter, pad, border and round).

Table Header One	Table Header Two
Table footer cell one	Table footer cell two
Table body cell one	Table body cell two
Table body cell three	Table body cell four
Table body cell five	Table body cell six

Paragraph styles

This is a normal paragraph (the <p> tag). This is a hyperlink. Maecenas bibendum dictum magna, quis bibendum lorem ultricies eu. Class aptent taciti sociosqu ad litora torquent per conubia inceptos himenaeos.

This paragraph is inside a <blockquote> tag. Maecenas bibendum dictum magna, quis bibendum lorem ultricies eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

These two paragraphs are separated with a vertical line. Maecenas bibendum dictum magna, quis bibendum lorem ultricies.

This is another normal paragraph. Maecenas bibendum dictum magna, quis bibendum lorem ultricies eu. Class aptent taciti sociosqu.

This is a paragraph with attribute class="large". Maecenas bibendum dictum magna, quis bibendum lorem ultricies eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra.

This paragraph has attribute class="small". Maecenas bibendum dictum magna, quis bibendum lorem ultricies eu. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras lobortis massa in nisl lacinia.

// This is a <pre> element with a code snippet
for ($i = 0; $i < 10; $i++) {
  $x += $i;
}

Images and content boxes

Neutrino tempalate provides 3 basic classes for styling images:

border - adds a border around the image
pad - adds shaded padding
round - rounds corners of padding and border (note: rounded corners will only appear in browsers supporting CSS3).

These classes can be used in any combination:

Image with border

Image with padding

Image with rounded padding

Image with rounded padding and border

Additionally images can be aligned to the right, to the left or centred:

Image aligned to the right
class="alignright pad border round"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem quam. Praesent nisl ante, pulvinar a tincidunt eget diam odio, tempus vulputate tristique et, sagittis consequat varius.

Image aligned to the left
class="alignleft pad border round"

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nec lorem quam. Praesent nisl ante, pulvinar a tincidunt eget diam odio, tempus vulputate tristique et, sagittis consequat varius.

Image centred: class="aligncenter pad border round"

The same classes applied to a <div> will create a floating content block:

Block aligned to the right
class="alignright pad border round"

Maecenas bibendum dictum magna.

Lorem ipsum dolor sit amet, vestibulum nec lorem quam. Praesent nisl ante, pulvinar a tincidunt eget consectetur adipiscing elit. Phasellus diam odio, tempus vulputate tristique et, sagittis consequat varius.

Block aligned to the left
class="alignleft pad border round"