CMS Page Example

This is the CMS Example Page. Here you will find instructions on how to properly format your HTML code.

Header Titles, Bold & Italic

Note: According to the HTML 5 specification, the <b> tag should be used as a LAST resort when no other tag is more appropriate. The HTML 5 specification states that headings should be denoted with the <h1> to <h6> tags, emphasized text should be denoted with the <em> tag, important text should be denoted with the <strong> tag, and marked/highlighted text should use the <mark> tag.

Header 1

Lorem ipsum dolor sit amet, wisi sonet cum te, cum ea posse efficiendi referrentur, mel no nisl expetenda mnesarchum. Per ei erat consul cotidieque, no mel nostro senserit, ei vix sale quaeque meliore. Eos cu fugit ludus. His at mediocrem maluisset, ius eu graeci indoctum, ex option voluptaria elaboraret duo.
Header 2

Lorem ipsum dolor sit amet, wisi sonet cum te, cum ea posse efficiendi referrentur, mel no nisl expetenda mnesarchum. Per ei erat consul cotidieque, no mel nostro senserit, ei vix sale quaeque meliore. Eos cu fugit ludus. His at mediocrem maluisset, ius eu graeci indoctum, ex option voluptaria elaboraret duo.
Header 3

Lorem ipsum dolor sit amet, wisi sonet cum te, cum ea posse efficiendi referrentur, mel no nisl expetenda mnesarchum. Per ei erat consul cotidieque, no mel nostro senserit, ei vix sale quaeque meliore. Eos cu fugit ludus. His at mediocrem maluisset, ius eu graeci indoctum, ex option voluptaria elaboraret duo.
Header 4

Lorem ipsum dolor sit amet, wisi sonet cum te, cum ea posse efficiendi referrentur, mel no nisl expetenda mnesarchum. Per ei erat consul cotidieque, no mel nostro senserit, ei vix sale quaeque meliore. Eos cu fugit ludus. His at mediocrem maluisset, ius eu graeci indoctum, ex option voluptaria elaboraret duo.
Header 5

Lorem ipsum dolor sit amet, wisi sonet cum te, cum ea posse efficiendi referrentur, mel no nisl expetenda mnesarchum. Per ei erat consul cotidieque, no mel nostro senserit, ei vix sale quaeque meliore. Eos cu fugit ludus. His at mediocrem maluisset, ius eu graeci indoctum, ex option voluptaria elaboraret duo.
<strong> as bold
<em> as italic

<p> tag

Anytime you have a block of text, it is important to wrap it with <p> </p> tags. If not, that group of text will not have padding on the bottom to separate it from the next paragraph.

Wrong Way

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.

Right Way

Unordered Lists & Ordered Lists

For lists, you can create unordered and ordered lists. <ul> for unordered lists. <ol> for ordered lists.

Note: Anytime you create a list <li> etc., you must wrap it in a <ul> or <ol>

Unordered List

Item 1
Item 2
Item 3
Item 4

Ordered List

Item 1
Item 2
Item 3
Item 4

No Bullets Unordered List

Item 1
Item 2
Item 3

If you want a no bullets list, you can modify the <ul> by adding "nobullets" to class.

Grid System

Your content can be managed by a grid system. You can set the width of the content into 12 sizes. Just imagine dividing the width of the website into 12 columns. By assigning a class to the div or tag, you can determine the size of the content.

For example, let's say you wanted to create two columns each taking up a halve of the page. You would wrap the left column with <div class="grid_6 column"> </div> and the right column with <div class="grid_5 column"> </div>.

Grid 12

Grid 11

Grid 10

Grid 9

Grid 8

Grid 7

Grid 6

Grid 5

Grid 4

Grid 3

Grid 2

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Grid 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo.

Embedding Video

Please be mindful of the width and height set for the video. This should be modified based upon the width of the total page. And the proportion of the video should be kept the same.

CMS Page Example

Header Titles, Bold & Italic

Header 1

Header 2

Header 3

Header 4

Header 5