Secondary Page Wireframe

If pages need subnavigation then it blongs under the .page-title and about the first .subsection. A good example of this would be the user stories.

Use H2 Tag for Title

If you need subtext for a title use the H6 tag

All secondary pages should be surrounded with the class .secondary_page_layout. The first item in this page should be a page title which should look like the following:

<div class="p_t_3"><span class="page-title"><h1><i class="fd fd-compass"></i>Secondary Page Wireframe</h1></span></div>

Then each section should have the class .subsection coupled with a class of either .layout1, .layout2, or .layout 3.

Inside .layout1 should be a div with the classes .row and .self-clearing. Inside that div should be either one div with the classes .one-half .column or two divs with the classes .six .colums. Either way in .layout1 text information should only go in the first div. The second div should only be used for an image.

  • There is no character count limitation for secondary pages
  • Each section should be seperated by an hr tag.


Use H2 Tag for Title

The subsection of .layout2 is a full width section. You can surround the information inside this section with a div that has the classes .twelve and .column or you can omit this containing div.

Every section should begin with a title that uses an h2 tag. If you need to put in a subtitle for this section under the h2 please use an h6 tag.

After the title .layout2 should have a div with the class .laryout2_text. This class has column count styling added to it.

Unlike the main page layout, the subsections on the secondary page should not have unique colors or background images. Image should be used to emphasize the information you want to convey, not be the main focal point.

Layout Three

  • Is the most variable layout
  • Please limit it's use
  • to only one or two
  • times per page

  • H2 Tag

    This section should use the grid system with no more than four blocks across.

    Layout 3

    .add_info_box div should contain an i tag, an h2 tag, a p tag, and a button.

    Additional Info

    The button is optional however the other tags are not and need to be there.