Bootstrap tabs
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home">Home</a></li>
<li><a data-toggle="tab" href="#menu1">Menu 1</a></li>
<li><a data-toggle="tab" href="#menu2">Menu 2</a></li>
<li><a data-toggle="tab" href="#menu3">Menu 3</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>HOME</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Menu 1</h3>
<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Menu 2</h3>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Menu 3</h3>
<p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
</div>
</div>
Bootstrap grids
Grids need to be wrapped in a div class of row. An example would be:
<div class="row">
<div class="col-md-6">Column 1, half of page</div>
<div class="col-md-6">Column 2, half of page</div>
</div>
See more examples at https://getbootstrap.com/docs/3.3/examples/grid/
Font
Heading font = Clarendon Text Pro
Body font = Canada Type Gibson
This is an H1 style
This is an H2 style
This is an H3 style
This is an H4 style
This is an H5 style
This is an H6 style
Color Palette
Light Blue #89C3E1 Light Blue
This color is used within the navigation links and footer headers.
Medium blue: #0d88d5 Medium Blue
This color is used as the default blue background for grid blocks.
Dark blue: #1a438a Dark Blue
This color is used as the default blue text for white buttons on focus, blue backgrounds on sidebar navigation and modals, and masthead background.
Dark blue: #122e5f Complementary dark blue
This color is used as the complimentary blue on sidebar navigation.
Dark blue: #093259 Complementary dark blue
This color is used as a complimentary blue on sidebars.
Light Gray #a5acb2 Light Gray
This color is used for breadcrumbs, captions, news story categories, and upcoming event dates.
Dark Gray #788085 Light Gray
This color is used for gray buttons and taxonomy text.
Black #242424 Black
This color is used for body text.
Red #EA1921 Red
This color is used for form submit buttons, masthead announcement background, and map markers.
Dark red #bf1118 Red
This color is used for form submit buttons on focus.
Responsive video classes
<!-- 21:9 aspect ratio -->
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
<!-- 1:1 aspect ratio -->
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
This is an ordered list
- First Item
- Second Item
- Third Item
This an unordered list
- First item
- Second item
- Third item
Horizontal rules default to a small, 1 grid-width gray line
Gray ghost button (class is hallow-btn-gray)
White ghost button-hover to see button (class is hallow-btn-white)
Dark text on light background (color: #242424)
Use class="dark-text-on-light"
Light text on dark background
Use class="light-text-on-dark
Blockquote displayed here
Gray content area (class="gray-content-area")
In sunt kevin jerky porchetta flank consectetur excepteur biltong cupim. Pork loin porchetta prosciutto, ea tenderloin dolor meatball ut pork ipsum labore shankle. Pastrami kevin ut non biltong. Turducken rump fugiat, biltong lorem do labore porchetta adipisicing mollit magna dolore beef ribs kevin. Dolore aliqua incididunt adipisicing strip steak culpa. Voluptate quis jerky, tempor in shankle elit veniam do picanha lorem magna salami.
Panels
Panel title
Carousel image
Image size should be 2000 x 570 px
Featured News image
Image size should be 800 X 400 px
Alternate News image
Image size should be 2000 X 450 px
Events
Image size:
400 X 250 px
Image style is no longer required
Excerpt
No more than 2 lines of text.
No links
External URL
Use this as a redirect only.
Location
Use two character state abbreviation
News Story image styles:
.insertright486 { width: 504px; float:right; margin: 5px 5px 15px 15px;}
.insertright424 { width: 442px; float:right; margin: 5px 5px 15px 15px;}
.insertright400 { width: 418px; float:right; margin: 5px 5px 15px 15px;}
.insertright350 { width: 368px; float:right; margin: 5px 5px 15px 15px;}
.insertright300 { width: 318px; float:right; margin: 5px 5px 15px 15px;}
.insertright275 { width: 293px; float:right; margin: 5px 5px 15px 15px;}
.insertright264 { width: 282px; float:right; margin: 5px 5px 15px 15px;}
.insertright250 { width: 268px; float:right; margin: 5px 5px 15px 15px;}
.insertright230 { width: 248px; float:right; margin: 5px 5px 15px 15px;}
.insertright200 { width: 218px; float:right; margin: 5px 5px 15px 15px;}
.insertright150 { width: 168px; float:right; margin: 5px 5px 15px 15px;}
.insertright144 { width: 162px; float:right; margin: 5px 5px 15px 15px;}
.insertright100 { width: 118px; float:right; margin: 5px 5px 15px 15px;}
.insertright96 { width: 114px; float:right; margin: 5px 5px 15px 15px;}
.insertright80 { width: 98px; float:right; margin: 5px 5px 15px 15px;}
.insertleft486 { width: 504px; float:left; margin: 5px 15px 15px 5px;}
.withinsertleft486 { float: left; width: 172px; }
.insertleft450 { width: 468px; float:left; margin: 5px 15px 15px 5px;}
.insertleft424 { width: 442px; float:left; margin: 5px 15px 15px 5px;}
.insertleft400 { width: 418px; float:left; margin: 5px 15px 15px 5px;}
.insertleft400 { width: 418px; float:left; margin: 5px 15px 15px 5px;}
.insertleft350 { width: 368px; float:left; margin: 5px 15px 15px 5px;}
.insertleft300 { width: 318px; float:left; margin: 5px 15px 15px 5px;}
.insertleft275 { width: 293px; float:left; margin: 5px 15px 15px 5px;}
.insertleft264 { width: 282px; float:left; margin: 5px 15px 15px 5px;}
.insertleft250 { width: 268px; float:left; margin: 5px 15px 15px 5px;}
.insertleft230 { width: 248px; float:left; margin: 5px 15px 15px 5px;}
.insertleft200 { width: 218px; float:left; margin: 5px 15px 15px 5px;}
.insertleft150 { width: 168px; float:left; margin: 5px 15px 15px 5px;}
.insertleft144 { width: 162px; float:left; margin: 5px 15px 15px 5px;}
.insertleft100 { width: 118px; float:left; margin: 5px 15px 15px 5px;}
.withinsertleft144 { float: left; width: 514px; }
.insertleft96 { width: 114px; float:left; margin: 5px 15px 15px 5px;}
.withinsertleft96 { float: left; width: 562px; }
.insertleft80 { width: 98px; float:left; margin: 5px 15px 15px 5px;}
.withinsertleft80 { float: left; width: 578px; }
.photo590 { margin: 5px 0; width: 590px; }
.photo1000 { margin: 5px 0; width: 1000px; }
