Basic Formatting Example Page

Module Test Page

Link to new Design Pattern Library

This is a Level 2 or H2 Heading

This is Paragraph or Normal formatted text Ad mod min ex ex exerosto do dolor sum dolendit nim quisi tat, quam vullam ver summy nullaor alit etuer se euis nos aut wissed min henibh eugait. Consequisi essit velendion hent nosto dit in henisim zzriliq uametumsan ut lor sit nis num quat. Duisit nim quat ullan henim adit lore faccumsan ut wis el ing elessed euguerosto doloreros eu faccum vulput wisi.

An additional paragraph with bold text, and then italicized text. And then here is a hyperlink.

This is a Level 3 or h3 Heading

Paragraph of text. Ad mod min ex ex exerosto do dolor sum dolendit nim quisi tat.

This is a Level 4 or h4 Heading

Paragraph nim quat ullan henim adit lore faccumsan ut wis el ing elessed euguerosto doloreros eu faccum vulput wisi.

This is a level 5 or H5 Heading

Paragraph essit velendion hent nosto dit in henisim zzriliq uametumsan ut lor sit nis num quat.

This is an level 6 or h6 Heading

Paragraph mod min ex ex exerosto do dolor sum dolendit nim quisi tat, quam vullam ver summy nullaor alit etuer se euis nos aut wissed min henibh eugait.

Below is a Horizontal Rule

List Styles

Unordered List (bulleted list)

  • item
  • another item
  • a third thing

Ordered List (numeric list)

  1. number one
  2. the second item
  3. I am number three

Definition List

This is the Term
This is the definition for the term
Jerome Betttis
the "bus"
Pittsburgh Steelers running back

Tables

Note: Do Not Use tables for design purposes. Only use tables for presenting tabular data.

Caption: My Table of Data
This is a Header Row Another column header The Third Column

This is the first cell of the first row of data. This column has had its width set by the properties on the header row first cell (50%). This cell has also been set so that the text is aligned with the top of the cell in its properties settings.

 The second cell. This column has had its width set by the properties on the header row second cell (25%) The third cell. This column has had its width set by the properties on its header cell (25%)

This is the second row of data This text is a header

This text is a paragraph

 The second row second cell

the third row third cell

Custom Content

Action Menus

These are unordered lists of links with special classes added in the code itself.

Two column action menu

<ul class="action-menu col2">

Three column action menu

<ul class="action-menu col3">

Four column action menu

<ul class="action-menu col4">

Call to Action (CTA) Links

These links will appear as buttons and should be used as a call to action within the body of a page. To use these, special classes will need to be added to the link tag    <a href="/some-link">    within the code in order for this to work. The special classes will need to be added using the code view of the content. Below are examples of the options.

 

Basic CTA

<a href="/some-link" class="action-btn">

You Should Click Me!

Helper Classes

There are additonal helper classes to set width, text-size, text alignment, button alignment, color. When using more than one class, you will need to include spaces between the classes.

Width Classes

Options include span_3 for 25% width, span_4 for 1/3 width, span_6 for 50% width, and span_12 for full width.

<a href="/some-link" class="action-btn span_3">

You Should Click Me!

<a href="/some-link" class="action-btn span_4">

You Should Click Me!

<a href="/some-link" class="action-btn span_6">

You Should Click Me!

<a href="/some-link" class="action-btn span_12">

You Should Click Me!

Alignment Classes

Options include alignc for centered text within the button, and center for centering the button on the page

<a href="/some-link" class="action-btn span_6 alignc">

You Should Click Me!

<a href="/some-link" class="action-btn span_4 center">

You Should Click Me!

Text Size Classes

Options include med and lrg larger/bolder button text.

<a href="/some-link" class="action-btn med">

You Should Click Me!

<a href="/some-link" class="action-btn lrg">

You Should Click Me!

Color Classes

Options include drk for a dark blue background.

<a href="/some-link" class="action-btn span_6 drk">

You Should Click Me!

 

Social Media Links

Connect with us on social media   Facebook   Twitter  Instagram  email

youtube

youtube

 

Video Player tags

Use the following code to imbed a video in an iframe. Use the embed link in place of the hashtag for source with the extension "?rel=0" appended on the end.

<div class="video-container"><iframe allowfullscreen="" frameborder="0" height="315" src="#?rel=0"></iframe></div>

FAQs

< p class="clickable" >< font color="#ef5f5f" >< span class="sign" >+</span><strong> QUESTION GOES HERE </strong></font></p>

<div class="collapse hide">

ANSWER GOES HERE

< / div >