Style Guide

Text Elements

Headings

This is an h1 heading

This is an h1 Link

Copy 13px Arial Regular on 18px leading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet diam. Aliquam sollicitudin tristique nulla.

This is an h2 heading

Copy 13px Arial Regular on 18px leading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet diam. Aliquam sollicitudin tristique nulla.

This is an h3 heading

Copy 13px Arial Regular on 18px leading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet diam. Aliquam sollicitudin tristique nulla.

This is an h4 heading.

This is an h4 heading

Copy 13px Arial Regular on 18px leading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet diam. Aliquam sollicitudin tristique nulla.

This is an h5 heading.

This is an h5 heading

Copy 13px Arial Regular on 18px leading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet diam. Aliquam sollicitudin tristique nulla.

This is an h6 heading.

This is an h6 heading

Copy 13px Arial Regular on 18px leading Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce sed leo. Maecenas ultrices lorem sit amet diam. Aliquam sollicitudin tristique nulla.

Block Quotes

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Author

Block Quote with Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Author

Paragraphs

P (paragraph) tags are used for new paragraphs in content areas.

Lorem ipsum dolor sit amet, porro facilisi erroribus duo ei. Quas intellegam vis cu, in everti theophrastus est. No eumLorem ipsum dolor sit amet, porro facilisi erroribus duo ei. Quas intellegam vis cu, in everti theophrastus est. No eum deserunt invenire suscipiantur. Cu ceteros invidunt principes pro.

View Code

Horizontal Rule

Lorem ipsum dolor sit amet, porro facilisi erroribus duo ei. Quas intellegam vis cu, in everti theophrastus est. No eum deserunt invenire suscipiantur. Cu ceteros invidunt principes pro.

View Code

Strong

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

View Code

Emphasized

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

View Code

Highlighted

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

View Code

Ordered Lists

Level 1
1. Level 2
  1. level 3
    1. Level 4
Ipsum
Dolar

View Code

Unordered Lists

Lorem
- Lorem
Ipsum
Dolar

View Code

Bootstrap Elements

Buttons

View Code

<button type="button" class="btn btn-default btn-lg">Large button</button>  <button type="button" class="btn btn-default">Default button</button>  <button type="button" class="btn btn-default btn-sm">Small button</button>  <button type="button" class="btn btn-default btn-xs">Extra small button</button>  <button type="button" class="btn btn-default">Default</button>  <button type="button" class="btn btn-primary">Primary</button>  <button type="button" class="btn btn-success">Success</button>  <button type="button" class="btn btn-info">Info</button>  <button type="button" class="btn btn-warning">Warning</button>  <button type="button" class="btn btn-danger">Danger</button>  <button type="button" class="btn btn-link">Link</button>

Tables

Table Name

#	First Name	Last Name	Username
1	Mark	Otto	@mdo
2	Jacob	Thornton	@fat

View Code

Responsive Images

Responsive image 1200x350 Responsive image 200x280 Responsive image 100x140 Responsive image 64x64

View Code

Edgewood Elements

infocards

Types of Identification in the U.S.

<p> <style type="text/css">/* CSS used here will be applied after bootstrap.css - css needs to be added to core */ a{ color:#810210; } a:hover{ color:#810210; } .pdf-image{ box-shadow: 3px 3px 9px #888888; margin-right:0px !important; } .well-sm { border-radius:0px !important; margin-bottom:0px !important; padding: 7px 7px 7px 7px !important; } .ecLN-PDF-Container .ecLN-PDF-media-heading { margin-top: 10px !important; margin-bottom: 10px !important; } .ecLN-PDF-Container .ecLN-PDF-meta a { color: #777 font-size: small; } .ecLN-PDF-Container .ecLN-PDF-meta a:hover { text-decoration: none; } .pdf{ background-color: #CCC; transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -webkit-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; } .pdf:hover{ background-color:#B2B2B2; } .ecLN-PDF-Container .ecLN-PDF-thumb { margin-right: 10px; } .ecLN-PDF-Container > img { width:25px; box-shadow: 3px 3px 9px #888888 } .ecLN-PDF-Container .media-heading { padding-top: 4px !important; padding-bottom: 0px !important; } .document-container { padding-left:0px !important; padding-right:0px !important; } </style> <script type="text/javascript"> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip({ placement : 'bottom' }); }); </script></p> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet" /> <div class="row"> <div class="col-md-12"> <div class="ecLN-PDF-Container well well-sm clearfix"><a class="pull-left ecLN-PDF-thumb" href="/portals/www/_resources/documents/ContentEditors/ParentsFamily/2013%20Security%20%26%20Fire%20Safety%20Report.pdf" target="_blank"><i class="fa fa-file-pdf-o fa-5x" data-original-title="Annual Security and Fire Safety Report, 2011." data-toggle="tooltip"></i> </a> <div class="media-body"> <h4 class="media-heading"><a href="/portals/www/_resources/documents/ContentEditors/ParentsFamily/2013%20Security%20%26%20Fire%20Safety%20Report.pdf" target="_blank">Annual Security and Fire Safety Report, 2013</a> <small>(PDF)</small></h4> </div> </div> </div> </div>

The page below contain examples of elements of style for the page including full width rows.

Style Guide

Text Elements

Headings

This is an h1 heading

This is an h2 heading

This is an h3 heading

This is an h4 heading.

This is an h5 heading.

This is an h6 heading.

Block Quotes

Block Quote with Image

Paragraphs

Horizontal Rule

Strong

Emphasized

Highlighted

Ordered Lists

Unordered Lists

Links

Bootstrap Elements

Buttons

Tables

Table Name

Responsive Images

Edgewood Elements

infocards

Types of Identification in the U.S.