Header tags

Heading 1

to style text like above wrap your text like this <h1>Heading 1</h1>
NOTE: notice "Heading 1" is wrapped in a h1 tag. The first h1 tag opens it, and the second one with the forward-slash closes it. You must always have these before and after the text you want to style. Whatever text you put in the place of "Heading 1" will be styled like above.

Heading 2

to style text like above wrap your text like this <h2>Heading 2</h2>

Heading 3

to style text like above wrap your text like this <h3>Heading 3</h3>

Heading 4

to style text like above wrap your text like this <h4>Heading 4</h4>
Heading 5
to style text like above wrap your text like this <h5>Heading 5</h5>
Heading 6
to style text like above wrap your text like this <h6>Heading 6</h6>

Blockquotes

"quoted text"

Someone famous in Source Title
<blockquote><p>"quoted text"</p>
<small>Someone famous in <cite title="Source Title">
Source Title</cite></small></blockquote>

Body Text

A paragraph is marked up as follows: <p>This is some text in a paragraph.</p>


This line of text is meant to be treated as fine print.

to style text like above wrap your text like this <p><small>This line of text is meant to be treated as fine print.</small></p>


The following snippet of text is rendered as bold text.

to style text like above wrap your text like this <p>The following snippet of text is<strong>rendered as bold text</strong></p>


The following snippet of text is rendered as italicized text.

to style text like above wrap your text like this <p>The following snippet of text is<em>rendered as italicized text</em></p>


Useful item: <br> tags can be inserted anywhere you need a return space. They do not need close tags.

Spans and Classes

The <span> is used to style a part of a text within a paragraph:

He has blue eyes.

to style the word blue like above use the <span> tag

<p>He has <span class="text-info">blue</span> eyes.</p>

The class is used to specify which style is used.

NOTE: See how the word "blue" is wrapped in a <span> tag with a class of "text-info"? The <span> tag provides no visual change by itself. The class "text-info" makes it blue. Within the parentheses is the class' name. Within the parentheses you can replace that name with any other class name to change the color or style. See Emphasis classes section for different names of classes.

IMPORTANT: the class="class-name" must be within the <span> tag like above. After the word span between the < >. Classes can be added to any tag whether it's <span> or <p> or <h1>, <h2> etc. with the same parameters.

Emphasis classes

These are the names of the classes you can use.

IMPORTANT: the class="class-name" must be within the tag like this<span class="class-name"></span>
These classes can be added to any tag whether it's <span> or <p> or <h1>, <h2> etc. It does not have to be <span>.


Color Classes

your text here

to style text like above wrap your text like this<span class="text-muted">your text here</span>

your text here

to style text like above wrap your text like this<span class="text-primary">your text here</span>

your text here

to style text like above wrap your text like this<span class="text-warning">your text here</span>

your text here

to style text like above wrap your text like this<span class="text-danger">your text here</span>

your text here

to style text like above wrap your text like this<span class="text-success">your text here</span>

your text here

to style text like above wrap your text like this<span class="text-info">your text here</span>


Font Size Class

your text here

to style text like above wrap your text like this<span class="lead">your text here</span>


Font Classes and Combining Classes

Class names can be combined like so...

this is .greeting

to style text like above wrap your text like this<span class="greeting text-primary lead">this is .greeting</span>

NOTE: the word "greeting" gives you the cursive font, the word "text-primary" makes it red, and "lead" makes it font-size: 21px. Remember must be within the parentheses each divided by a space.

this is .handwritten

to style text like above wrap your text like this<span class="handwritten text-info lead">this is .handwritten</span>

NOTE: the word "handwritten" gives you the handwritten font, the word "text-info" makes it blue, and "lead" makes it font-size: 21px.

Images classes

These classes can be added to images like this <img class="class-name" src="image.jpg"/>

"img-responsive"IMPORTANT: always include this class on ANY image so that image resizes for different devices.

(these classes need to be used together)

"hero-img img-responsive" (spans full width - good for 16:9 ratio)

"pull-left pull-left-img" (floats right & gives the image margins)

"pull-right pull-right-img" (floats right & gives the image margins)

Lists

Unordered

A list of items in which the order does not explicitly matter.

  • Item
  • Item
    • Sub-Item
    • Sub-Item
<ul>
  <li>Item</li>
  <li>Item
 <ul>
   <li>Sub-Item</li>
   <li>Sub-Item</li>
 </ul>
  </li>
<ul>

Ordered

A list of items in which the order does explicitly matter.

  1. Item 1
  2. Item 2
  3. Item 3
<ol>
 <li>Item 1</li>
 <li>Item 2</li>
 <li>Item 3</li>
<ol>

For more info on list. Click Here.



Call To Action Bubbles


Media Heading
Media Body

call to action

COPY ALL CODE BELOW: (replace hightlighted areas)

<div class="media">
<span class="pull-left">

<img class="img-circle" src="insert avatar image url" style="background:#E1E1E1;max-width: 7em;border: .35em solid #F1F1F1;"/>

</span>
<td style="margin: 0; padding: 0;">
<div class="media-body" style="display: block; position: relative; margin: 0 auto; padding: 10px;"> <table style="width: 100%; margin: 0; padding: 0;"><tr style="margin: 0; padding: 0;"><td style="margin: 0; padding: 0;">
<p class="well ne-10-bg">

<span class="handwritten text-primary lead">Media Heading</span><br><span>Media Body</span><br><br><a href="insert link here" type="button" class="btn btn-primary">call to action</a> <span style="position: absolute; top: 20%; left: 0px; margin: 0; padding: 0;"><img src="https://noesisimg.s3.amazonaws.com/Marketing/pages/triangle-sm-gry-left.png" style="max-width: 100%; margin: 0; padding: 0;"></span> </p>

</td>
</tr></table></div>
</td>
</div>

Media Heading
Media Body

call to action

COPY ALL CODE BELOW: (replace hightlighted areas)

<div class="media">
<span class="pull-left">

<img class="img-circle" src="insert avatar image url" style="background:#E1E1E1;max-width: 7em;border: .35em solid #F1F1F1;"/>

</span>
<td style="margin: 0; padding: 0;">
<div class="media-body" style="display: block; position: relative; margin: 0 auto; padding: 10px;"> <table style="width: 100%; margin: 0; padding: 0;"><tr style="margin: 0; padding: 0;"><td style="margin: 0; padding: 0;">
<p class="well ne-5-bg">

<span class="handwritten text-primary lead">Media Heading</span><br><span>Media Body</span><br><br><a href="insert link here" type="button" class="btn btn-primary">call to action</a> <span style="position: absolute; top: 20%; left: 0px; margin: 0; padding: 0;"><img src="http://noesisimg.s3.amazonaws.com/Marketing/pages/triangle-sm-blu-left.png" style="max-width: 100%; margin: 0; padding: 0;"></span> </p>

</td>
</tr></table></div>
</td>
</div>

Pull-Right

NOTE: To pull any call-to-action bubble right replace all instances of the word "left" with the words "right". In the code below all 3 instances of the word "right" highlighted below have replaced the word "left" from the examples above. Remember you must replace ALL 3 instances of the word right or left to be the same direction.

Media Heading
Media Body

call to action

COPY ALL CODE BELOW: (replace hightlighted areas)

<div class="media">
<span class="pull-right">

<img class="img-circle" src="insert avatar image url" style="background:#E1E1E1;max-width: 7em;border: .35em solid #F1F1F1;"/>

</span>
<td style="margin: 0; padding: 0;">
<div class="media-body" style="display: block; position: relative; margin: 0 auto; padding: 10px;"> <table style="width: 100%; margin: 0; padding: 0;"><tr style="margin: 0; padding: 0;"><td style="margin: 0; padding: 0;">
<p class="well ne-8-bg">

<span class="handwritten text-primary lead">Media Heading</span><br><span>Media Body</span><br><br><a href="insert link here" type="button" class="btn btn-primary">call to action</a> <span style="position: absolute; top: 20%; right: 0px; margin: 0; padding: 0;"><img src="https://noesisimg.s3.amazonaws.com/Marketing/pages/triangle-sm-lgt-gry-right.png" style="max-width: 100%; margin: 0; padding: 0;"></span> </p>

</td>
</tr></table></div>
</td>
</div>

Sidebar Call-to-Action

NOTE: to change background color of any call-out replace the highlighted code "ne-#-bg" with any background colors (for background colors see list section below)

NOTE: you can replace highlighted text "pull-left" with "pull-right".


Unordered List


Call to action
<div role="form" style="margin-left:10px;margin-right:10px" class="col-md-6 col-sm-6 well ne-10-bg pull-left">
<h3 style="margin-top:0" class="handwritten text-primary">Header Text</h3>
<ul>
<li>Item</li>
<li>Item</li>
</ul><br>
<a href="insert link here" class="btn btn-primary">Call to action</a> </div>




Ordered List

  1. Item 1
  2. Item 2
  3. Item 3
Call to action
<div role="form" style="margin-left:10px;margin-right:10px" class="col-md-6 col-sm-6 well ne-5-bg pull-left">
<h3 style="margin-top:0" class="handwritten text-primary">Header Text</h3>
<ol class="handwritten text-primary lead">
<li><span class="ne-13 h5 text-normal">Item 1</span></li>
<li><span class="ne-13 h5 text-normal">Item 2</span></li>
<li><span class="ne-13 h5 text-normal">Item 3</span></li>
</ol>
<a href="insert link here" class="btn btn-primary">Call to action</a> </div>




Call to action bubble w/ multiple buttons


64x64

Media Heading

Media Body

call to action 1 call to action 2 call to action 3

COPY ALL CODE BELOW: (replace hightlighted areas)

<div class="well ne-12b-bg">
<div class="media">
<a class="pull-left" href="#">
<img class="media-object" src="https://noesisimg.s3.amazonaws.com/Marketing/pages/arrow.svg" style="width: 75px; height: 75px;">
</a>
<div class="media-body">
<h4 class="media-heading handwritten">Media Heading</h4>
<p>Media Body</p>
<div class="col-md-12" style="padding-left:0px">
<a href="insert link here" type="button" class="btn btn-primary" style="margin-bottom:5px">call to action 1</a>
<a href="insert link here" type="button" class="btn btn-primary" style="margin-bottom:5px">call to action 2</a>
<a href="insert link here" type="button" class="btn btn-primary" style="margin-bottom:5px">call to action 3</a>
</div>
</div>
</div>
</div>

Background Colors:

ne-5-bg {background: #c3edf2;}/* lt-blue */

ne-5b-bg {background: #deeff1;}/* ltr-blue */

ne-5c-bg {background: #45ced4;}/* bright-blue */

ne-6-bg {background: #006990; box-shadow: 0px 2px 0px navy;}/* drk-blue */

ne-8-bg {background: #e1e1e1;box-shadow: 0px 2px 0px #ccc;}/* lt-gray */

ne-9-bg {background: #444;box-shadow: 0px 2px 0px #000}/* drk-gray */

ne-10-bg {background: #333;box-shadow: 0px 2px 0px #000}/* black */