Style Guide

1 Color Palette

#2B80C0 .blue / primary

#50B948 .green / secondary

#3B4597 .purple / tertiary

#1F394D .dark-blue

#091A26 .black

#768389 .gray

#AAB7BD .medium-gray

#E4E8EB .light-gray

#F7FAFC .off-white

#2B80C0 > #57B7E0 .bg-gradient-blue

#50B948 > #3F9C81 > #2B80C0 > #3B4597 .bg-gradient-multi-color


<div class="blue">Text Color</div>
<div class="bg-blue">Background Color</div>
<div class="green">Text Color</div>
<div class="bg-green">Background Color</div>
<div class="purple">Text Color</div>
<div class="bg-purple">Background Color</div>
<div class="dark-blue">Text Color</div>
<div class="bg-dark-blue">Background Color</div>
<div class="black">Text Color</div>
<div class="bg-black">Background Color</div>
<div class="gray">Text Color</div>
<div class="bg-gray">Background Color</div>
<div class="medium-gray">Text Color</div>
<div class="bg-medium-gray">Background Color</div>
<div class="light-gray">Text Color</div>
<div class="bg-light-gray">Background Color</div>
<div class="off-white">Text Color</div>
<div class="bg-off-white">Background Color</div>

2 Typography

Fonts

Aa Bio Sans

regular regular italic semi-bold bold


<p class="bio-sans">Example copy lorem ipsum dolor sit amet.</p>
<p class="bio-sans italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="bio-sans semi-bold">Example copy lorem ipsum dolor sit amet.</p>
<p class="bio-sans bold">Example copy lorem ipsum dolor sit amet.</p>

Helpers

Italic Font

Uppercase Font

Regular Case Font

Normal Font Weight

Semi-Bold Font Weight

Bold Font Weight

Font Size t1

Font Size t2

Font Size t3

Font Size t4

Font Size t5

Font Size t6

Font Size t7

Font Size t8

Font Size t9

Font Size t10


<p class="italic">Italic Font</p>
<p class="caps">Uppercase Font</p>
<p class="regular-case">Regular Case Font</p>
<p class="bold">Bold Font Weight</p>
<p class="regular">Normal Font Weight</p>
<p class="t1">Font Size t1</p>
<p class="t2">Font Size t2</p>
<p class="t3">Font Size t3</p>
<p class="t4">Font Size t4</p>
<p class="t5">Font Size t5</p>
<p class="t6">Font Size t6</p>
<p class="t7">Font Size t7</p>
<p class="t8">Font Size t8</p>
<p class="t9">Font Size t9</p>
<p class="t10">Font Size t10</p>

Headings

Title — This is a giant heading

h1 - Heading

h1 - Sub Heading

h2 - Heading

h2 - Sub Heading

h3 - Heading

h3 - Sub Heading

h4 - Heading

h4 - Sub Heading

h5 - Heading

h5 - Sub Heading

h6 - Heading

h6.Sub Heading

Heading Sizer h1

Heading Sizer h2

Heading Sizer h3

Heading Sizer h4

Heading Sizer h5

Heading Sizer h6


<h1 class="page-title">Title — This is a giant heading</h1>
<h1>h1 - Heading</h1>
<h1 class="subheader">h1 - Sub Heading</h1>
<h2>h2 - Heading</h2>
<h2 class="subheader">h2 - Sub Heading</h2>
<h3>h3 - Heading</h3>
<h3 class="subheader">h3 - Sub Heading</h3>
<h4>h4 - Heading</h4>
<h4 class="subheader">h4 - Sub Heading</h4>
<h5>h5 - Heading</h5>
<h5 class="subheader">h5 - Sub Heading</h5>
<h6>h6 - Heading</h6>
<h6 class="subheader">h6.Sub Heading</h6>
<h3 class="h1">Heading Sizer h1</h3>
<h3 class="h2">Heading Sizer h2</h3>
<h3 class="h3">Heading Sizer h3</h3>
<h3 class="h4">Heading Sizer h4</h3>
<h3 class="h5">Heading Sizer h5</h3>
<h3 class="h6">Heading Sizer h6</h3>

Font Icons

View All Font Icons


<span class="icon-multi-business"></span>
<span class="icon-medical-solution"></span>
<span class="icon-network-modernization"></span>
<span class="icon-poor-tech-support"></span>
<span class="icon-service-outage"></span>
<span class="icon-service-providers"></span>
<span class="icon-system-integrations"></span>
<span class="icon-single-healthcare"></span>
<span class="icon-single-business"></span>
<span class="icon-partners"></span>
<span class="icon-multi-healthcare"></span>
<span class="icon-complete-it"></span>
<span class="icon-increasing-cost"></span>
<span class="icon-contact"></span>
<span class="icon-blog"></span>
<span class="icon-business-solutions"></span>
<span class="icon-careers"></span>
<span class="icon-arrow-right"></span>
<span class="icon-arrow-left"></span>
<span class="icon-play-circle"></span>
<span class="icon-external"></span>
<span class="icon-mail-line"></span>
<span class="icon-facebook"></span>

Labels

UI Label

Label Block Secondary

Label Block Tertiary


<span class="label">UI Label</span>
<span class="label label--secondary">Label Block Secondary</span>
<span class="label label--tertiary">Label Block Tertiary</span>

Body Copy

Heading

This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Paragraph link. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.


<p class="lead">This is a lead paragraph donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. <a href="#">Paragraph link</a>. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/350x250" class="alignright border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/350x250" class="alignleft border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/1200x400" class="aligntop border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>

Body Copy Alignment

Left Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Right Align Lorem ipsum Ut a nisl id ante tempus hendrerit.

Center Lorem ipsum Ut a nisl id ante tempus hendrerit.


<p class="left-align"><strong>Left Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="right-align"><strong>Right Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="center"><strong>Center</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>

Article Copy

Article copy that decreases container width and increases font size

Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.

Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.

Lorem ipsum enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.


<div class="row">
<div class="small-11 medium-10 large-9 xlarge-8 small-centered column article">
<h1>Article copy that decreases container width and increases font size</h1>
<p>Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<h2>Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.</h2>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Lorem ipsum enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>

Blockquotes

Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere

Optional Authors Name Optional Second Field


<blockquote>
<div class="quote">
<p>Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere </p>
</div>
<p class="cite">Optional Authors Name <span> Optional Second Field</span> </p>
</blockquote>

Unordered List

List Item 1
List Item 2
List Item 3
List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
List Item 6

Unordered List - Checkmarks

List Item 1
List Item 2
List Item 3
List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
List Item 6

Ordered List

List Item 1
List Item 2
List Item 3
List Item 4
1. Sub List Item 1
2. Sub List Item 2
3. Sub List Item 3
4. Sub List Item 4
5. Sub List Item 5
List Item 6


<ul class="bullets">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ul class="checkmarks">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ol>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ol>
</li>
<li>List Item 6</li>
</ol>

3 Spacing

Top Margin Spacing

Margin Top 0

Margin Top 1

Margin Top 2

Margin Top 3

Margin Top 4

Margin Top 5

Margin Top 6

Margin Top 7

Margin Top 8

Margin Top 9

Margin Top 10

Margin Top 11

Margin Top 12

Bottom Margin Spacing

Margin Bottom 0

Margin Bottom 1

Margin Bottom 2

Margin Bottom 3

Margin Bottom 4

Margin Bottom 5

Margin Bottom 6

Margin Bottom 7

Margin Bottom 8

Margin Bottom 9

Margin Bottom 10

Margin Bottom 11

Margin Bottom 12


<div class="mt0">Margin Top 0</div>
<div class="mt1">Margin Top 1</div>
<div class="mt2">Margin Top 2</div>
<div class="mt3">Margin Top 3</div>
<div class="mt4">Margin Top 4</div>
<div class="mt5">Margin Top 5</div>
<div class="mt6">Margin Top 6</div>
<div class="mt7">Margin Top 7</div>
<div class="mt8">Margin Top 8</div>
<div class="mt9">Margin Top 9</div>
<div class="mt10">Margin Top 10</div>
<div class="mt11">Margin Top 11</div>
<div class="mt12">Margin Top 12</div>
<div class="mb0">Margin Bottom 0</div>
<div class="mb1">Margin Bottom 1</div>
<div class="mb2">Margin Bottom 2</div>
<div class="mb3">Margin Bottom 3</div>
<div class="mb4">Margin Bottom 4</div>
<div class="mb5">Margin Bottom 5</div>
<div class="mb6">Margin Bottom 6</div>
<div class="mb7">Margin Bottom 7</div>
<div class="mb8">Margin Bottom 8</div>
<div class="mb9">Margin Bottom 9</div>
<div class="mb10">Margin Bottom 10</div>
<div class="mb11">Margin Bottom 11</div>
<div class="mb12">Margin Bottom 12</div>

Top Padding Spacing

Padding Top 0

Padding Top 1

Padding Top 2

Padding Top 3

Padding Top 4

Padding Top 5

Padding Top 6

Padding Top 7

Padding Top 8

Padding Top 9

Padding Top 10

Padding Top 11

Padding Top 12

Bottom Padding Spacing

Padding Bottom 0

Padding Bottom 1

Padding Bottom 2

Padding Bottom 3

Padding Bottom 4

Padding Bottom 5

Padding Bottom 6

Padding Bottom 7

Padding Bottom 8

Padding Bottom 9

Padding Bottom 10

Padding Bottom 11

Padding Bottom 12


<div class="pt0">Padding Top 0</div>
<div class="pt1">Padding Top 1</div>
<div class="pt2">Padding Top 2</div>
<div class="pt3">Padding Top 3</div>
<div class="pt4">Padding Top 4</div>
<div class="pt5">Padding Top 5</div>
<div class="pt6">Padding Top 6</div>
<div class="pt7">Padding Top 7</div>
<div class="pt8">Padding Top 8</div>
<div class="pt9">Padding Top 9</div>
<div class="pt10">Padding Top 10</div>
<div class="pt11">Padding Top 11</div>
<div class="pt12">Padding Top 12</div>
<div class="pb0">Padding Bottom 0</div>
<div class="pb1">Padding Bottom 1</div>
<div class="pb2">Padding Bottom 2</div>
<div class="pb3">Padding Bottom 3</div>
<div class="pb4">Padding Bottom 4</div>
<div class="pb5">Padding Bottom 5</div>
<div class="pb6">Padding Bottom 6</div>
<div class="pb7">Padding Bottom 7</div>
<div class="pb8">Padding Bottom 8</div>
<div class="pb9">Padding Bottom 9</div>
<div class="pb10">Padding Bottom 10</div>
<div class="pb11">Padding Bottom 11</div>
<div class="pb12">Padding Bottom 12</div>

4 Buttons

Standard Buttons

Primary Large
Primary Default
Primary Tiny

Secondary Large
Secondary Default
Secondary Tiny

Button Stroke
Button Secondary Stroke

Disabled Button

Expanded Button


<a class="button large" href="#">Primary Large</a>
<a class="button" href="#">Primary Default</a>
<a class="button tiny" href="#">Primary Tiny</a>
<a class="button secondary large" href="#">Secondary Large</a>
<a class="button secondary" href="#">Secondary Default</a>
<a class="button secondary tiny" href="#">Secondary Tiny</a>
<a class="button tertiary large" href="#">Tertiary Large</a>
<a class="button tertiary" href="#">Tertiary Default</a>
<a class="button tertiary tiny" href="#">Tertiary Tiny</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>

Text Buttons

Text Button Primary
Text Button Secondary
Text Button Secondary

Small Text Button Primary
Small Text Button Secondary
Small Text Button Secondary


<a href="#" class="text-button">Text Button Primary</a>
<a href="#" class="text-button secondary">Text Button Secondary</a>
<a href="#" class="text-button tertiary">Text Button Secondary</a>
<a href="#" class="text-button tiny">Small Text Button Primary</a>
<a href="#" class="text-button secondary tiny">Small Text Button Secondary</a>
<a href="#" class="text-button tertiary tiny">Small Text Button Secondary</a>

5 Forms

Input Label

Select Box

Choose Your Favorite

Radio 1

Radio 2

Check these out

Checkbox 1

Enable Some Fun

Textarea Label


<form>
<div class="row column">
<label>Input Label
<input type="text" placeholder=".row.column">
</label>
</div>
<div class="row">
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
<div class="large-4 columns">
<label>Input Label
<input type="text" placeholder=".large-4.columns">
</label>
</div>
</div>
<div class="row column">
<label>Select Box
<select>
<option value="husker">Husker</option>
<option value="starbuck">Starbuck</option>
<option value="hotdog">Hot Dog</option>
<option value="apollo">Apollo</option>
</select>
</label>
</div>
<div class="row">
<div class="large-6 columns mb3">
<fieldset>
<legend>Choose Your Favorite</legend>
<div class="radio">
  <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"><span></span> Radio 1 </label>
</div>
<div class="radio">
  <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><span></span> Radio 2 </label>
</div>
</fieldset>
</div>
<div class="large-6 columns mb3">
<fieldset>
<legend>Check these out</legend>
<div class="checkbox">
  <label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
<div class="checkbox">
  <label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
</fieldset>
</div>
</div>
<div class="row column">
<label>Enable Some Fun</label>
<label class="switch">
<input type="checkbox" title="Switch Control" aria-label="Switch Control">
<span></span>
</label>
</div>
<div class="row column">
<label>Textarea Label
<textarea rows="8" placeholder=".row.column"></textarea>
</label>
</div>
<div class="row column">
<button type="submit" class="button">Submit</button>
</div>
</form>

6 Grids

Standard Grid

Grid system is based on Foundations Grid please reference docs for more information.

Sites breakpoints:
xsmall (0 to 479px)
small (480px - 639px)
medium (640px - 800px)
large (801px - 959px)
xlarge (960px - 1199px)
xxlarge (1200px and up)

Two column desktop/tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.

Four column desktop; Two column tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.


<div class="row">
<div class="medium-6 column">
<p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
</div>
<div class="medium-6 column">
<p><strong>Two column desktop/tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.</p>
</div>
</div>
<div class="row">
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
<div class="medium-6 large-3 column">
<p><strong>Four column desktop; Two column tablet; Single column phone</strong> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci.</p>
</div>
</div>

Block Grid


<div class="row xsmall-up-1 small-up-2 medium-up-3 large-up-4 xlarge-up-5 xxlarge-up-6">
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
</div>

7 Page Body Components

Slide Content

Slide Toggle With Link

More Info

Slide Toggle With Button

More Info


<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
<p> <a class="slide-toggle" href="#">More Info</a> </p>
<div class="slide-content">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>
<h3>Slide Toggle With Button</h3>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container"> <a class="slide-toggle button" href="#"> More Info</a>
<div class="slide-content">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
</div>
</div>

Accordion

FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?: Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?: Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.
FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?: Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.


<dl class="accordion">
<dt>FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
<dt>FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</dt>
<dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc. Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd>
</dl>

Vertical Tabs

Tab 1
Tab 2
Tab 3

Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.

Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.

The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.


<div class="resp-tabs resp-tabs--vertical">
<ul class="resp-tabs-list resp-tabs-group" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help
entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better
products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies
after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement,
experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment
goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business
development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>

Horizontal Tabs

Tab 1
Tab 2
Tab 3


<div class="resp-tabs resp-tabs--horizontal">
<ul class="resp-tabs-list resp-tabs-group" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>

Tables

Table Header	Table Header	Table Header	Table Header
Content Goes Here	This is longer content Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here
Content Goes Here	This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.	Content Goes Here	Content Goes Here


<table class="table">
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>

8 System Components

Alerts

This is an example successful alert message that would be used for forms or login messages more info

This is an example info alert message that would be used for forms or login messages more info

This is an example warning alert message that would be used for forms or login messages more info

This is an example danger alert message that would be used for forms or login messages more info


<div class="alert alert-success">
<p>This is an example successful alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-info">
<p>This is an example info alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-warning">
<p>This is an example warning alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-danger">
<p>This is an example danger alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>

9 Theme Components

Content Block

Label

Headline

Subheadline

Overview lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, unde.

Call to Action Title

Primary Button Secondary Button

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at.

Example Freeform Body Content

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta aperiam sapiente dignissimos, beatae molestiae cupiditate amet eos, necessitatibus, accusantium asperiores animi praesentium repellendus voluptates quibusdam culpa vitae illum temporibus nobis libero odit. Ratione et illo tempore ab! Omnis, temporibus, deleniti. Odit natus, est similique dolor modi assumenda nesciunt nihil repellendus.

Labore maxime debitis doloribus itaque aperiam, voluptates minima consequuntur quam praesentium dolorem, dignissimos incidunt ducimus dolore ex velit quisquam repellat voluptate, consequatur esse modi nemo sed totam? Debitis ut dignissimos ullam fugiat quos excepturi voluptas ipsa sed a modi doloribus blanditiis voluptatem dolor maiores alias, illum ducimus! Quaerat, dolorum, placeat.

Exercitationem iste odit natus deserunt, expedita vel itaque aliquam inventore laudantium sint iusto magni pariatur quas optio harum obcaecati quibusdam dolorem explicabo quasi totam reprehenderit in. Magni natus rem quasi praesentium consequuntur, omnis unde harum voluptatibus perferendis ex repellat accusantium est ut, eius, perspiciatis in odio enim veritatis sapiente necessitatibus.


        <!-- Begin Section - Content Block -->
<section  class="section section--gray pt11 pb11">
  <div class="heading-block heading-block--divider mb4">
    <div class="row row-site column">
      <div class="row">
        <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <h4 class="h3 subheader" data-aos="fade-up-xsmall" data-aos-delay="100">Subheadline</h4>
                              <p data-aos="fade-up-xsmall" data-aos-delay="150">Overview lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusamus, unde.</p>
                              <div class="heading-block__cta" data-aos="fade-up-xsmall" data-aos-delay="200">
                        <h5 class="h4 mb6">Call to Action Title</h5>
                                    <a class="button waves-effect " href="#" ><span class="icon-arrow-right-long icon-left"></span> Primary Button</a>
                                    <a class="button stroke " href="#" ><span class="icon-arrow-right-long icon-left"></span> Secondary Button</a>
                      </div>
                  </div>
      </div>
    </div>
  </div>
    <div class="row row-site column">
    <div class="row article gutter-extra gutter-medium">
      <div class="medium-6 columns" data-aos="fade-up-xsmall" data-aos-delay="250">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at.</p>
      </div>
      <div class="medium-6 columns" data-aos="fade-up-xsmall" data-aos-delay="300">
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at.</p>
      </div>
    </div>
  </div>
    <div class="row row-site column mt8" data-aos="fade-up-xsmall" data-aos-delay="250">
    <div class="small-11 medium-10 large-9 xlarge-8 small-centered column article">
      <h3>Example Freeform Body Content</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Soluta aperiam sapiente dignissimos, beatae molestiae cupiditate amet eos, necessitatibus, accusantium asperiores animi praesentium repellendus voluptates quibusdam culpa vitae illum temporibus nobis libero odit. Ratione et illo tempore ab! Omnis, temporibus, deleniti. Odit natus, est similique dolor modi assumenda nesciunt nihil repellendus.</p>
<p>Labore maxime debitis doloribus itaque aperiam, voluptates minima consequuntur quam praesentium dolorem, dignissimos incidunt ducimus dolore ex velit quisquam repellat voluptate, consequatur esse modi nemo sed totam? Debitis ut dignissimos ullam fugiat quos excepturi voluptas ipsa sed a modi doloribus blanditiis voluptatem dolor maiores alias, illum ducimus! Quaerat, dolorum, placeat.</p>
<p>Exercitationem iste odit natus deserunt, expedita vel itaque aliquam inventore laudantium sint iusto magni pariatur quas optio harum obcaecati quibusdam dolorem explicabo quasi totam reprehenderit in. Magni natus rem quasi praesentium consequuntur, omnis unde harum voluptatibus perferendis ex repellat accusantium est ut, eius, perspiciatis in odio enim veritatis sapiente necessitatibus.</p>
    </div>
  </div>
</section>
<!-- End Section - Content Block -->

Full Width Split Panel

Label

Headline

Overview Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat nulla mollis sapien

Bullet list nam dapibus nisl vitae elit fringilla rutrum
Bullet list pretium pretium tempor. Ut eget imperdiet neque. In volutpat ante semper diam molestie
Bullet list lorem ipsum dolor sit amet, consectetur adipiscing elit

Button


        <!-- Begin Section - Full Width Split Panel - Our Company -->
<section  class="full-width-split-panel full-width-split-panel--left full-width-panel--gray ">
  <div class="row row-site column">
    <div class="xlarge-5 xlarge-push-7 column">
      <div class="full-wdith-split-panel__body">
                        <span class="icon-large icon-blue icon-block icon-complete-it mb3" data-aos="fade-up-xsmall"></span>
                        <h2 class="label label--mb label--green" data-aos="fade-up-xsmall" data-aos-delay="50">Label</h2>
                        <h2 class="h1" data-aos="fade-up-xsmall" data-aos-delay="100">Headline</h2>
                        <div class="mb6" data-aos="fade-up-xsmall" data-aos-delay="150">
          <p>Overview Nam dapibus nisl vitae elit fringilla rutrum. Aenean sollicitudin, erat a elementum rutrum, neque sem pretium metus, quis mollis nisl nunc et massa. Vestibulum sed metus in lorem tristique ullamcorper id vitae erat nulla mollis sapien</p>
        </div>
                        <ul class="checkmarks checkmarks--green-list" data-aos="fade-up-xsmall" data-aos-delay="200">
                    <li>Bullet list nam dapibus nisl vitae elit fringilla rutrum</li>
                    <li>Bullet list pretium pretium tempor. Ut eget imperdiet neque. In volutpat ante semper diam molestie</li>
                    <li>Bullet list lorem ipsum dolor sit amet, consectetur adipiscing elit</li>
                  </ul>
                        <div data-aos="fade-up-xsmall" data-aos-delay="250">
          <a class="button waves-effect" href="#" ><span>Button<span class="icon-right icon-arrow-right-long"></span></span></a>
        </div>
              </div>
    </div>
  </div>
    <div class="full-width-split-panel__bg" style="background-image: url('https://nexusct.com/wp-content/uploads/office-bg.jpg')">
    <div class="full-width-split-panel__bg-image" data-aos="fade-right" data-aos-delay="300">
      <img alt="Nexus Office" src="https://nexusct.com/wp-content/uploads/office.jpg" width="650" height="475" />
    </div>
  </div>
</section>
<!-- End Section - Full Width Split Panel - Our Company -->

Featured Cards

Label

Headline

Overview lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non

Headline

Short overview about section you'll be navigating too.

View All Button

Headline

Short overview about section you'll be navigating too.

View All Button


        <!-- Begin Section - Featured Cards -->
<section  class="section section--gray pt11 pb11">
    <!-- Begin Heading Block -->
  <div class="heading-block pb8">
    <div class="row row-site column">
      <div class="row">
        <div class="medium-11 large-10 xlarge-9 xxlarge-8 medium-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <div data-aos="fade-up-xsmall" data-aos-delay="100">
            <p>Overview lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non</p>
          </div>
                  </div>
      </div>
    </div>
  </div>
  <!-- End Heading Block -->
        <!-- Begin Featured Cards -->
  <div class="featured-cards featured-cards--2 pb8" data-aos="fade-up-xsmall" data-aos-delay="150">
    <div class="row row-site column">
      <div class="row medium-up-2 xlarge-up-2">
                <!-- Begin Card -->
        <div class="column">
          <a href="#" class="card zoom-trigger" >
            <div class="card__image">
              <div class="card__image-bg zoom-img" style="background-image:url('')"></div>
            </div>
            <div class="card__icon"><span class="icon-medical-solution"></span></div>
            <div class="card__body">
              <h2>Headline</h2>
              <p>Short overview about section you'll be navigating too.</p>
            </div>
            <div class="card__action">
              <span class="card__action-center">View All Button<span class="icon-right icon-arrow-right-long"></span></span>
            </div>
          </a>
        </div>
        <!-- End Card -->
                <!-- Begin Card -->
        <div class="column">
          <a href="#" class="card zoom-trigger" >
            <div class="card__image">
              <div class="card__image-bg zoom-img" style="background-image:url('https://nexusct.com/wp-content/uploads/medical-it-solutions-548x180.jpg')"></div>
            </div>
            <div class="card__icon"><span class="icon-service-outage"></span></div>
            <div class="card__body">
              <h2>Headline</h2>
              <p>Short overview about section you'll be navigating too.</p>
            </div>
            <div class="card__action">
              <span class="card__action-center">View All Button<span class="icon-right icon-arrow-right-long"></span></span>
            </div>
          </a>
        </div>
        <!-- End Card -->
              </div>
    </div>
  </div>
  <!-- End Featured Cards -->
  </section>
<!-- End Section - Featured Cards -->

Navigation Cards

Label

Headline

Overview for navigation card

View Details

Headline

Overview for navigation card

View Details

Headline

Overview for navigation card

View Details


        <!-- Begin Section - Featured Cards -->
<section  class="section section--gray  pt11 pb11">
    <!-- Begin Heading Block -->
  <div class="heading-block pb8">
    <div class="row row-site column">
      <div class="row">
        <div class="medium-11 large-10 xlarge-9 xxlarge-8 medium-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <div data-aos="fade-up-xsmall" data-aos-delay="100">
            <p>Overview lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non</p>
          </div>
                  </div>
      </div>
    </div>
  </div>
  <!-- End Heading Block -->
      <!-- Begin Featured Cards -->
  <div class="featured-cards featured-cards--nav pb8">
    <div class="row row-site column">
      <div class="row medium-up-2 xlarge-up-3">
                        <!-- Begin Card -->
        <div class="column" data-aos="fade-up-xsmall" data-aos-delay="000">
          <a href="#" class="card zoom-trigger" >
            <div class="card__image">
              <div class="card__image-bg zoom-img" style="background-image:url('https://nexusct.com/wp-content/uploads/nurse-phone.jpg')"></div>
            </div>
            <div class="card__icon"><span class="icon-service-providers"></span></div>
            <div class="card__body">
              <h2>Headline</h2>
              <p>Overview for navigation card</p>
            </div>
            <div class="card__action">
              <span class="card__action-center">View Details<span class="icon-right icon-arrow-right-long"></span></span>
            </div>
          </a>
        </div>
        <!-- End Card -->
                        <!-- Begin Card -->
        <div class="column" data-aos="fade-up-xsmall" data-aos-delay="100">
          <a href="#" class="card zoom-trigger" >
            <div class="card__image">
              <div class="card__image-bg zoom-img" style="background-image:url('')"></div>
            </div>
            <div class="card__icon"><span class="icon-service-providers"></span></div>
            <div class="card__body">
              <h2>Headline</h2>
              <p>Overview for navigation card</p>
            </div>
            <div class="card__action">
              <span class="card__action-center">View Details<span class="icon-right icon-arrow-right-long"></span></span>
            </div>
          </a>
        </div>
        <!-- End Card -->
                        <!-- Begin Card -->
        <div class="column" data-aos="fade-up-xsmall" data-aos-delay="200">
          <a href="#" class="card zoom-trigger" >
            <div class="card__image">
              <div class="card__image-bg zoom-img" style="background-image:url('https://nexusct.com/wp-content/uploads/wireless.jpg')"></div>
            </div>
            <div class="card__icon"><span class="icon-service-providers"></span></div>
            <div class="card__body">
              <h2>Headline</h2>
              <p>Overview for navigation card</p>
            </div>
            <div class="card__action">
              <span class="card__action-center">View Details<span class="icon-right icon-arrow-right-long"></span></span>
            </div>
          </a>
        </div>
        <!-- End Card -->
              </div>
    </div>
  </div>
  <!-- End Featured Cards -->
  </section>
<!-- End Section - Featured Cards -->

CTA Block


        <!-- Begin Section CTA Block -->
<aside class="cta-footer-block section--pattern-gradient pt11 pb11">
  <div class="row row-site column">
    <div class="row">
      <div class="medium-11 large-10 xlarge-9 xxlarge-8 medium-centered column">
                        <h5 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h5>
                        <h3 data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                        <p data-aos="fade-up-xsmall" data-aos-delay="100">Short overview for call to action</p>
                <div class="cta-footer-block__actions" data-aos="fade-up-xsmall" data-aos-delay="150">
                    <a class="button waves-effect " href="#" > Primary Button</a>
                              <a class="button stroke " href="#" > Secondary Button</a>
                  </div>
      </div>
    </div>
  </div>
</aside>
<!-- End Section CTA Block -->

Testimonial Carousel

Here’s what our clients have to say

Nexus is professional and shows a high level of passion for their customers. The combination of the two has earned them many awards in a many different categories within the Telecom and Cloud Space. I'd recommend Nexus for almost any project.

Brandon SmithVP Partner SalesIntelisys

What Nexus does for their customers is really provide a total solution. They are bringing in the network components, helping solve business problems through applications and technologies that really turn IT into a profit center.

Cody CalhounDirector, National Partner ProgramsComcast Business

The wonderful people at Nexus helped us with multiple projects covering the entire spectrum of IT. The amount of money we have saved with Nexus, reinvigorated our belief in smart ROI purchases. They have connections with all major IT vendors and are continuously educated on the cutting edge of technology.

Mark HartmanCIOSymphony Post Acute Network

It is no longer an IT expense, it's now an investment that has helped us generate revenue for our business. Their ability to be a liaison between barriers and understand what our needs were as an individual company allowed them to get us the service we really needed at a really great value.

Yehuda CohenIT AdministratorSymphony Post Acute Network


        <!-- Begin Section - Testimonials Carousel -->
<section  class="section section--waves pt12 pb12">
  <div class="row row-site column">
    <div class="reviews-panel" data-aos="fade-up-xsmall">
      <h3 class="reviews-panel__title label">Here’s what our clients have to say</h3>
      <div class="reviews__carousel-container">
        <div class="reviews__carousel">
                                  <!-- Begin Review Slide -->
            <div class="reviews__slide">
              <blockquote>
                                <div class="reviews__slide-logo">
                  <div class="reviews__slide-logo-box">
                    <img src="https://nexusct.com/wp-content/uploads/logo-intelisys-1-300x120.jpg" width="300" height="120" alt="Intelisys" />
                  </div>
                </div>
                                <p class="quote">Nexus is professional and shows a high level of passion for their customers. The combination of the two has earned them many awards in a many different categories within the Telecom and Cloud Space. I'd recommend Nexus for almost any project.</p>
                <p class="cite">Brandon Smith<span>VP Partner Sales</span><span>Intelisys</span></p>
              </blockquote>
            </div>
            <!-- End Review Slide -->
                                  <!-- Begin Review Slide -->
            <div class="reviews__slide">
              <blockquote>
                                <div class="reviews__slide-logo">
                  <div class="reviews__slide-logo-box">
                    <img src="https://nexusct.com/wp-content/uploads/logo-comcast-business-300x104.png" width="300" height="104" alt="Comcast Business" />
                  </div>
                </div>
                                <p class="quote">What Nexus does for their customers is really provide a total solution. They are bringing in the network components, helping solve business problems through applications and technologies that really turn IT into a profit center.</p>
                <p class="cite">Cody Calhoun<span>Director, National Partner Programs</span><span>Comcast Business</span></p>
              </blockquote>
            </div>
            <!-- End Review Slide -->
                                  <!-- Begin Review Slide -->
            <div class="reviews__slide">
              <blockquote>
                                <div class="reviews__slide-logo">
                  <div class="reviews__slide-logo-box">
                    <img src="https://nexusct.com/wp-content/uploads/logo-symphony-post-acute-network-300x62.jpg" width="300" height="62" alt="Symphony Post Acute Network" />
                  </div>
                </div>
                                <p class="quote">The wonderful people at Nexus helped us with multiple projects covering the entire spectrum of IT. The amount of money we have saved with Nexus, reinvigorated our belief in smart ROI purchases. They have connections with all major IT vendors and are continuously educated on the cutting edge of technology.</p>
                <p class="cite">Mark Hartman<span>CIO</span><span>Symphony Post Acute Network</span></p>
              </blockquote>
            </div>
            <!-- End Review Slide -->
                                  <!-- Begin Review Slide -->
            <div class="reviews__slide">
              <blockquote>
                                <div class="reviews__slide-logo">
                  <div class="reviews__slide-logo-box">
                    <img src="https://nexusct.com/wp-content/uploads/logo-symphony-post-acute-network-300x62.jpg" width="300" height="62" alt="Symphony Post Acute Network" />
                  </div>
                </div>
                                <p class="quote">It is no longer an IT expense, it's now an investment that has helped us generate revenue for our business. Their ability to be a liaison between barriers and understand what our needs were as an individual company allowed them to get us the service we really needed at a really great value.</p>
                <p class="cite">Yehuda Cohen<span>IT Administrator</span><span>Symphony Post Acute Network</span></p>
              </blockquote>
            </div>
            <!-- End Review Slide -->
                  </div>
      </div>
    </div>
  </div>
</section>
<!-- End Section - Testimonials Carousel -->

Partners Carousel

Our Partner Services

Receive Information About Our Partners


        <!-- Begin Section - Our Solutions -->
<section class="section">
  <!--Begin Featured In Carousel-->
  <div class="logo-carousel">
    <div class="logo-carousel__container">
      <div class="logo-carousel__title">
        <div class="logo-carousel__title-valign">
          <h3 class="label label--green label--mb" data-aos="fade-right">Our Partner Services</h3>
          <h4 data-aos="fade-right" data-aos-delay="150">Receive Information About Our Partners</h4>
        </div>
      </div>
      <div class="logo-carousel__slides-container" data-aos="fade-in" data-aos-delay="300">
        <div class="logo-carousel__slides" data-slick='{"slidesToShow": 5,"autoplay":true,"autoplaySpeed":3000,"responsive": [{"breakpoint": 1440,"settings": {"slidesToShow": 4}}, {"breakpoint": 800,"settings": {"slidesToShow": 3}}, {"breakpoint": 480,"settings": {"slidesToShow": 2}}]}'>
                              <!-- Begin Carousel Slide -->
          <div class="logo-carousel__slide">
            <div class="logo-carousel__logo">
              <a class="ajax-popup" data-partner="Comcast Business" href="#partners" rel="nofollow">
                <img src="https://nexusct.com/wp-content/uploads/comcast-business-300x162.png" width="300" height="162" alt="" />
              </a>
            </div>
          </div>
          <!-- End Carousel Slide -->
                              <!-- Begin Carousel Slide -->
          <div class="logo-carousel__slide">
            <div class="logo-carousel__logo">
              <a class="ajax-popup" data-partner="DirectTV" href="#partners" rel="nofollow">
                <img src="https://nexusct.com/wp-content/uploads/directtv-300x84.png" width="300" height="84" alt="DirectTV For Business" />
              </a>
            </div>
          </div>
          <!-- End Carousel Slide -->
                              <!-- Begin Carousel Slide -->
          <div class="logo-carousel__slide">
            <div class="logo-carousel__logo">
              <a class="ajax-popup" data-partner="" href="#partners" rel="nofollow">
                <img src="" width="" height="" alt="" />
              </a>
            </div>
          </div>
          <!-- End Carousel Slide -->
                              <!-- Begin Carousel Slide -->
          <div class="logo-carousel__slide">
            <div class="logo-carousel__logo">
              <a class="ajax-popup" data-partner="Nexus360 Connect" href="#partners" rel="nofollow">
                <img src="https://nexusct.com/wp-content/uploads/nexus360-connect-300x239.png" width="300" height="239" alt="Nexus360 Connect" />
              </a>
            </div>
          </div>
          <!-- End Carousel Slide -->
                              <!-- Begin Carousel Slide -->
          <div class="logo-carousel__slide">
            <div class="logo-carousel__logo">
              <a class="ajax-popup" data-partner="Star2Star Communications" href="#partners" rel="nofollow">
                <img src="https://nexusct.com/wp-content/uploads/star2star-300x78.png" width="300" height="78" alt="Star2Star Communications" />
              </a>
            </div>
          </div>
          <!-- End Carousel Slide -->
                              <!-- Begin Carousel Slide -->
          <div class="logo-carousel__slide">
            <div class="logo-carousel__logo">
              <a class="ajax-popup" data-partner="Ubiquiti Networks" href="#partners" rel="nofollow">
                <img src="https://nexusct.com/wp-content/uploads/ubiquiti-300x89.png" width="300" height="89" alt="Ubiquiti Networks" />
              </a>
            </div>
          </div>
          <!-- End Carousel Slide -->
                  </div>
      </div>
    </div>
  </div>
  <!--End Featured In Carousel-->
</section>
<!-- End Section - Our Solutions -->

Full Width Image


        <!-- Begin Section - Image Block -->
<figure  class="section section--gray pt0 pb0">
  <div class="row row-site column">
      <div class="full-width-image" data-aos="fade" data-aos-delay="150">
        <img src="https://nexusct.com/wp-content/uploads/display-admin.jpg" width="1200" height="610" alt="Admin Display" />
      </div>
  </div>
</figure>
<!-- End Section - Image Block -->

Logo Blocks

Label

Headline

Overview of logo blocks

Comcast Business

DirectTV

Symphony Post Acute Network

Star2Star Communications


        <!-- Begin Section - Content Block -->
<section  class="section section--white pt11 pb11">
    <div class="heading-block mb10">
    <div class="row row-site column">
      <div class="row">
        <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <p data-aos="fade-up-xsmall" data-aos-delay="100">Overview of logo blocks</p>
                  </div>
      </div>
    </div>
  </div>
    <div class="row row-site column">
    <div class="row">
      <div class="xsmall-up-2 medium-up-3 xlarge-up-4 logo-block-list">
                        <!-- Begin Logo Blocks -->
        <div class="column" data-aos="fade-up-xsmall" data-aos-delay="300">
          <div class="logo-block">
            <div class="logo-block__logo">
                            <a class="logo-block_valign" href="https://www.comcast.com" target="_blank">
                <img src="https://nexusct.com/wp-content/uploads/comcast-business-300x162.png" width="300" height="162" alt="" />
              </a>
                          </div>
                        <h5 class="logo-block__title">Comcast Business</h5>
                      </div>
        </div>
        <!-- End Logo Blocks -->
                        <!-- Begin Logo Blocks -->
        <div class="column" data-aos="fade-up-xsmall" data-aos-delay="400">
          <div class="logo-block">
            <div class="logo-block__logo">
                            <div class="logo-block_valign">
                <img src="https://nexusct.com/wp-content/uploads/directtv-300x84.png" width="300" height="84" alt="DirectTV For Business" />
              </div>
                          </div>
                        <h5 class="logo-block__title">DirectTV</h5>
                      </div>
        </div>
        <!-- End Logo Blocks -->
                        <!-- Begin Logo Blocks -->
        <div class="column" data-aos="fade-up-xsmall" data-aos-delay="500">
          <div class="logo-block">
            <div class="logo-block__logo">
                            <a class="logo-block_valign" href="https://symphonypan.com/" target="_blank">
                <img src="https://nexusct.com/wp-content/uploads/logo-symphony-post-acute-network-300x62.jpg" width="300" height="62" alt="Symphony Post Acute Network" />
              </a>
                          </div>
                        <h5 class="logo-block__title">Symphony Post Acute Network</h5>
                      </div>
        </div>
        <!-- End Logo Blocks -->
                        <!-- Begin Logo Blocks -->
        <div class="column" data-aos="fade-up-xsmall" data-aos-delay="300">
          <div class="logo-block">
            <div class="logo-block__logo">
                            <div class="logo-block_valign">
                <img src="https://nexusct.com/wp-content/uploads/star2star-300x78.png" width="300" height="78" alt="Star2Star Communications" />
              </div>
                          </div>
                        <h5 class="logo-block__title">Star2Star Communications</h5>
                      </div>
        </div>
        <!-- End Logo Blocks -->
              </div>
    </div>
  </div>
</section>
<!-- End Section - Content Block -->

Icon Blocks

Headline

Short overview of text

Headline

Short overview of text

Headline

Short overview of text


        <section  class="section section--gray pt11 pb11">
  <div class="row row-site column">
    <div class="row">
      <div class="small-up-3">
                        <!-- Begin Block Icon -->
        <div class="column column-block" data-aos="fade-up-xsmall" data-aos-delay="300">
                    <a class="block-icon " href="https://www.google.com" >
                                  <div class="block-icon__icon">
              <span class="icon-complete-it"></span>
            </div>
                                    <h5 class="block-icon__title">Headline</h5>
                        <p class="block-icon__overview">Short overview of text</p>
                      </div>
                    </a>
                  <!-- End Block Icon -->
                        <!-- Begin Block Icon -->
        <div class="column column-block" data-aos="fade-up-xsmall" data-aos-delay="400">
                    <div class="block-icon">
                                  <div class="block-icon__icon">
              <span class="icon-poor-tech-support"></span>
            </div>
                                    <h5 class="block-icon__title">Headline</h5>
                        <p class="block-icon__overview">Short overview of text</p>
                      </div>
                    </div>
                  <!-- End Block Icon -->
                        <!-- Begin Block Icon -->
        <div class="column column-block" data-aos="fade-up-xsmall" data-aos-delay="500">
                    <div class="block-icon">
                                  <div class="block-icon__icon">
              <span class="icon-increasing-cost"></span>
            </div>
                                    <h5 class="block-icon__title">Headline</h5>
                        <p class="block-icon__overview">Short overview of text</p>
                      </div>
                    </div>
                  <!-- End Block Icon -->
              </div>
    </div>
  </div>
</section>

Page Banner


        <!-- Begin Section CTA Block -->
<section  class="page-banner section pt11 pb11">
  <div class="page-banner__bg" style="background-image:url('https://nexusct.com/wp-content/uploads/hero-professional-services.jpg')" data-aos="fade-in"></div>
  <div class="row row-site column">
    <div class="row">
      <div class="medium-11 large-10 xlarge-9 xxlarge-8 medium-centered column">
                        <h3 class="page-banner__label label label--mb" data-aos="fade-up-xsmall">Label</h3>
                        <h4 class="page-banner__headline h2" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h4>
                        <p class="page-banner__overview" data-aos="fade-up-xsmall" data-aos-delay="100">Overview of text for page banner</p>
                        <div class="page-banner__actions" data-aos="fade-up-xsmall" data-aos-delay="150" data-aos-offset="-100">
                    <a class="button waves-effect " href="#" >Primary Button  </a>
                              <a class="button stroke " href="#" >Secondary Button  </a>
                  </div>
              </div>
    </div>
  </div>
</section>
<!-- End Section CTA Block -->

Team List

Label

Headline

Overview of team list

Jim Mazzarella

Managing Partner / CEO


        <!-- Begin Section - Content Block -->
<section  class="section section--gray pt11 pb11">
    <div class="heading-block mb10">
    <div class="row row-site column">
      <div class="row">
        <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <p data-aos="fade-up-xsmall" data-aos-delay="100">Overview of team list</p>
                  </div>
      </div>
    </div>
  </div>
    <div class="row row-site column">
    <div class="row">
      <div class="row xsmall-up-1 small-up-2 large-up-3">
                            <!-- Begin Team Bio -->
          <div class="column column-block">
            <article class="card-full-bleed card-full-bleed--vignette card-full-bleed--grid" data-aos="fade-up-xsmall" data-aos-delay="300"> <a class="card-full-bleed__image popup-inline" href="#vignette-popup-416" data-scroll-ignore="true"> <img alt="Jim Mazzarella" class="card-full-bleed__image" src="https://nexusct.com/wp-content/uploads/jim-mazzarella.jpg" width="380" height="380"></a>
              <div class="card-full-bleed__body" data-mh="team-block">
                <h2 class="card-full-bleed__title">Jim Mazzarella</h2>
                <h3 class="card-full-bleed__subtitle label label--tertiary">Managing Partner / CEO</h3>
                                <div class="card-full-bleed__body-link"> <a class="popup-inline" href="#vignette-popup-416">Read More About Jim</a> </div>
              </div>
              <!--Begin Vignette Popup-->
              <div id="vignette-popup-416" class="white-popup-block white-popup-block--wide mfp-hide">
                <article class="modal-vignette">
                  <header class="modal-vignette__header">
                    <div class="modal-vignette__image"><img alt="Jim Mazzarella" src="https://nexusct.com/wp-content/uploads/jim-mazzarella.jpg" width="380" height="380"></div>
                    <h2 class="modal-vignette__title">Jim Mazzarella</h2>
                    <h3 class="modal-vignette__subtitle">Managing Partner / CEO</h3> </header>
                  <div class="modal-vignette__overview">
                    <p>Jim has 15 years of experience in the industry and is responsible for the overall vision, success, and client satisfaction at Nexus. He helps customers overcome their IT challenges by providing a customized solution that will eliminate their need for multiple vendors. Jim takes pride in developing a strategic business relationship with not only his customers, but his employees and partners as well while setting the overall direction for Nexus.</p>
<p>Jim founded Eitechs in 2009 which is grew quickly into Nexus Communications Technology. He has designed and integrated hardware and networking systems to streamline solutions for many industries, including healthcare, automotive, retailers and professional services. Jim enjoys spending time with his two sons when he is not working.</p>                  </div>
                </article>
              </div>
              <!--End Vignette Popup-->
            </article>
          </div>
          <!-- End Team Bio -->
              </div>
    </div>
  </div>
</section>
<!-- End Section - Content Block -->

Awards & Honors

Label

Headline

Overview for awards & honors

#1 Top Fiber Optic Enterprise Service Partner

Learn More

Comcast Business - Fiber Award

#1 Top Fiber Optic Enterprise Service Partner

View Case Study

Top Cable Producer

Learn More

Intelisys - 2014

Top Cable Producer


        <!-- Begin Section - Content Block -->
<section  class="section section--gray pt11 pb11">
    <div class="heading-block mb10">
    <div class="row row-site column">
      <div class="row">
        <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <p data-aos="fade-up-xsmall" data-aos-delay="100">Overview for awards & honors</p>
                  </div>
      </div>
    </div>
  </div>
    <div class="row row-site column">
    <div class="row xsmall-up-1 small-up-2 large-up-3">
                      <!-- Begin Award -->
        <div class="column column-block">
          <div class="logo-card-block" data-aos="fade-up-xsmall" data-aos-delay="300">
            <div class="logo-card-block__valign">
              <div class="logo-card-block__logo">
                                <a href="https://www.google.com" target="_blank">
                  <img src="https://nexusct.com/wp-content/uploads/comcast-business-300x162.png" width="300" height="162" alt="" />
                </a>
                              </div>
              <div class="logo-card-block__title">
                <h5>#1 Top Fiber Optic Enterprise Service Partner</h5>
              </div>
            </div>
            <div class="logo-card-block__more">
              <a class="js-logo-card-show" href="#" data-scroll-ignore>Learn More <span class="icon-add"></span></a>
            </div>
            <div class="logo-card-block__overlay">
              <div class="logo-card-block__overlay-valign">
                <h5 class="logo-card-block__overlay-name">Comcast Business - Fiber Award</h5>
                <p class="logo-card-block__overlay-title">#1 Top Fiber Optic Enterprise Service Partner</p>
                                <div class="logo-card-block__overlay-button">
                  <a class="button" href="https://nexusct.com/wp-content/uploads/Comcast_Business_2013_Eitechs_Case_Study.pdf" target="_blank">View Case Study</a>
                </div>
                              </div>
              <button type="button" class="js-logo-card-close logo-card-block__close"><span class="icon-close"></span></button>
            </div>
          </div>
        </div>
        <!-- End Award -->
                      <!-- Begin Award -->
        <div class="column column-block">
          <div class="logo-card-block" data-aos="fade-up-xsmall" data-aos-delay="400">
            <div class="logo-card-block__valign">
              <div class="logo-card-block__logo">
                                <img src="https://nexusct.com/wp-content/uploads/TPCawardCrop-300x263.png" width="300" height="263" alt="" />
                              </div>
              <div class="logo-card-block__title">
                <h5>Top Cable Producer</h5>
              </div>
            </div>
            <div class="logo-card-block__more">
              <a class="js-logo-card-show" href="#" data-scroll-ignore>Learn More <span class="icon-add"></span></a>
            </div>
            <div class="logo-card-block__overlay">
              <div class="logo-card-block__overlay-valign">
                <h5 class="logo-card-block__overlay-name">Intelisys  - 2014</h5>
                <p class="logo-card-block__overlay-title">Top Cable Producer</p>
                              </div>
              <button type="button" class="js-logo-card-close logo-card-block__close"><span class="icon-close"></span></button>
            </div>
          </div>
        </div>
        <!-- End Award -->
          </div>
  </div>
</section>
<!-- End Section - Content Block -->

Partners List

Label

Headline

Overview for partners list

Partners Category

Comcast Business

Learn More

Comcast Business

Comcast Business offers scalable Voice, Internet, and Data services for business of all sizes.

DirectTV

Nexus360 Connect

Star2Star Communications

Ubiquiti Networks

Learn More

Ubiquiti Networks

Ubiquiti Networks is an enterprise networking manufacturer that provides leading-edge platforms for Internet Access, Enterprise, and SmartHome applications.


        <!-- Begin Section - Content Block -->
<section  class="section section--gray pt11 pb11">
    <div class="heading-block mb10">
    <div class="row row-site column">
      <div class="row">
        <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <p data-aos="fade-up-xsmall" data-aos-delay="100">Overview for partners list</p>
                  </div>
      </div>
    </div>
  </div>
      <div class="row row-site column pt8 pb8">
        <h3 class="h2 subheader mb8" data-aos="fade-up-xsmall">Partners Category</h3>
        <div class="row xsmall-up-1 small-up-2 large-up-3">
                      <!-- Begin Partners -->
        <div class="column column-block">
          <div class="logo-card-block logo-card-block--dual-more" data-aos="fade-up-xsmall" data-aos-delay="300">
            <div class="logo-card-block__valign">
              <div class="logo-card-block__logo">
                                <img src="https://nexusct.com/wp-content/uploads/comcast-business-300x162.png" width="300" height="162" alt="" />
                              </div>
              <div class="logo-card-block__title">
                <h5>Comcast Business</h5>
              </div>
            </div>
            <div class="logo-card-block__more">
                            <a class="js-logo-card-show" href="#" data-scroll-ignore>Learn More <span class="icon-add"></span></a>
                            <a class="ajax-popup" data-partner="Comcast Business" href="#partners" rel="nofollow">Request Info <span class="icon-edit-square"></span></a>
            </div>
            <div class="logo-card-block__overlay">
              <div class="logo-card-block__overlay-valign">
                <h5 class="logo-card-block__overlay-name">Comcast Business</h5>
                                <p class="logo-card-block__overlay-title">Comcast Business offers scalable Voice, Internet, and Data services for business of all sizes.</p>
                              </div>
              <button type="button" class="js-logo-card-close logo-card-block__close"><span class="icon-close"></span></button>
            </div>
          </div>
        </div>
        <!-- End Partners -->
                      <!-- Begin Partners -->
        <div class="column column-block">
          <div class="logo-card-block logo-card-block--more" data-aos="fade-up-xsmall" data-aos-delay="400">
            <div class="logo-card-block__valign">
              <div class="logo-card-block__logo">
                                <img src="https://nexusct.com/wp-content/uploads/directtv-300x84.png" width="300" height="84" alt="DirectTV For Business" />
                              </div>
              <div class="logo-card-block__title">
                <h5>DirectTV</h5>
              </div>
            </div>
            <div class="logo-card-block__more">
                            <a class="ajax-popup" data-partner="DirectTV" href="#partners" rel="nofollow">Request Info <span class="icon-edit-square"></span></a>
            </div>
            <div class="logo-card-block__overlay">
              <div class="logo-card-block__overlay-valign">
                <h5 class="logo-card-block__overlay-name">DirectTV</h5>
                              </div>
              <button type="button" class="js-logo-card-close logo-card-block__close"><span class="icon-close"></span></button>
            </div>
          </div>
        </div>
        <!-- End Partners -->
                      <!-- Begin Partners -->
        <div class="column column-block">
          <div class="logo-card-block logo-card-block--more" data-aos="fade-up-xsmall" data-aos-delay="500">
            <div class="logo-card-block__valign">
              <div class="logo-card-block__logo">
                                <img src="https://nexusct.com/wp-content/uploads/nexus360-connect-300x239.png" width="300" height="239" alt="Nexus360 Connect" />
                              </div>
              <div class="logo-card-block__title">
                <h5>Nexus360 Connect</h5>
              </div>
            </div>
            <div class="logo-card-block__more">
                            <a class="ajax-popup" data-partner="Nexus360 Connect" href="#partners" rel="nofollow">Request Info <span class="icon-edit-square"></span></a>
            </div>
            <div class="logo-card-block__overlay">
              <div class="logo-card-block__overlay-valign">
                <h5 class="logo-card-block__overlay-name">Nexus360 Connect</h5>
                              </div>
              <button type="button" class="js-logo-card-close logo-card-block__close"><span class="icon-close"></span></button>
            </div>
          </div>
        </div>
        <!-- End Partners -->
                      <!-- Begin Partners -->
        <div class="column column-block">
          <div class="logo-card-block logo-card-block--more" data-aos="fade-up-xsmall" data-aos-delay="300">
            <div class="logo-card-block__valign">
              <div class="logo-card-block__logo">
                                <img src="https://nexusct.com/wp-content/uploads/star2star-300x78.png" width="300" height="78" alt="Star2Star Communications" />
                              </div>
              <div class="logo-card-block__title">
                <h5>Star2Star Communications</h5>
              </div>
            </div>
            <div class="logo-card-block__more">
                            <a class="ajax-popup" data-partner="Star2Star Communications" href="#partners" rel="nofollow">Request Info <span class="icon-edit-square"></span></a>
            </div>
            <div class="logo-card-block__overlay">
              <div class="logo-card-block__overlay-valign">
                <h5 class="logo-card-block__overlay-name">Star2Star Communications</h5>
                              </div>
              <button type="button" class="js-logo-card-close logo-card-block__close"><span class="icon-close"></span></button>
            </div>
          </div>
        </div>
        <!-- End Partners -->
                      <!-- Begin Partners -->
        <div class="column column-block">
          <div class="logo-card-block logo-card-block--dual-more" data-aos="fade-up-xsmall" data-aos-delay="400">
            <div class="logo-card-block__valign">
              <div class="logo-card-block__logo">
                                <img src="https://nexusct.com/wp-content/uploads/ubiquiti-300x89.png" width="300" height="89" alt="Ubiquiti Networks" />
                              </div>
              <div class="logo-card-block__title">
                <h5>Ubiquiti Networks</h5>
              </div>
            </div>
            <div class="logo-card-block__more">
                            <a class="js-logo-card-show" href="#" data-scroll-ignore>Learn More <span class="icon-add"></span></a>
                            <a class="ajax-popup" data-partner="Ubiquiti Networks" href="#partners" rel="nofollow">Request Info <span class="icon-edit-square"></span></a>
            </div>
            <div class="logo-card-block__overlay">
              <div class="logo-card-block__overlay-valign">
                <h5 class="logo-card-block__overlay-name">Ubiquiti Networks</h5>
                                <p class="logo-card-block__overlay-title">Ubiquiti Networks is an enterprise networking manufacturer that provides leading-edge platforms for Internet Access, Enterprise, and SmartHome applications.</p>
                              </div>
              <button type="button" class="js-logo-card-close logo-card-block__close"><span class="icon-close"></span></button>
            </div>
          </div>
        </div>
        <!-- End Partners -->
          </div>
  </div>
  </section>
<!-- End Section - Content Block -->

FAQs List

Label

Headline

Overview for FAQs list

Example question one might ask for an FAQ: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?
Example question one might ask for an FAQ: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?
Example question one might ask for an FAQ: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?
Example question one might ask for an FAQ: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?


        <!-- Begin Section - FAQs List -->
<section  class="section section--gray pt11 pb11">
    <div class="heading-block mb10">
    <div class="row row-site column">
      <div class="row">
        <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
                              <h2 class="label label--mb label--green" data-aos="fade-up-xsmall">Label</h2>
                              <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="50">Headline</h3>
                              <p data-aos="fade-up-xsmall" data-aos-delay="100">Overview for FAQs list</p>
                  </div>
      </div>
    </div>
  </div>
    <div class="row row-site column">
    <div class="row">
      <div class="small-11 medium-10 large-9 xlarge-8 small-centered column">
        <dl class="accordion" data-aos="fade-up-xsmall" data-aos-delay="150">
                <dt>Example question one might ask for an FAQ</dt>
        <dd><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?</p>
</dd>
                <dt>Example question one might ask for an FAQ</dt>
        <dd><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?</p>
</dd>
                <dt>Example question one might ask for an FAQ</dt>
        <dd><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?</p>
</dd>
                <dt>Example question one might ask for an FAQ</dt>
        <dd><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aspernatur sunt, nihil unde soluta quam libero voluptatum eaque est cumque! Debitis alias aperiam et necessitatibus illo incidunt assumenda consectetur a non, perspiciatis recusandae quae velit eum, placeat dolores officia ad illum nostrum accusamus sint dicta voluptatem eos at. Nobis cumque consequatur ratione alias cum, dolore dolorum iusto eum dolorem sint! Eos magnam officia, doloremque qui modi consequuntur veritatis illo? Doloremque fuga quos itaque alias obcaecati quae dicta, voluptatibus voluptates, consectetur nihil maiores doloribus. Distinctio veniam amet laudantium aliquam odit ex earum, accusantium repellat provident, consequatur et optio unde dolorem vero. Consectetur?</p>
</dd>
                </dl>
      </div>
    </div>
  </div>
</section>
<!-- End Section - FAQs List -->