Social Services Activities Coordinator (Central/Southern, NJ)

1 Color Palette

#0BA2E3 .blue / primary (buttons & links)
#0B94D1 .dark-blue / dark primary
#01131C .black / overlays
#01293D .navy / headings & bold text
#9A9FA6 .gray / body text
#E6E9ED .light-gray / light text on dark BG's
#F0F2F5 .off-white / light text on dark BG's
<div class="red">Text Color</div>
<div class="bg-red">Background Color</div>
<div class="blue">Text Color</div>
<div class="bg-blue">Background Color</div>
<div class="black">Text Color</div>
<div class="bg-black">Background Color</div>

2 Typography

Fonts

Aa Playfair Display
regular Italic
<p class="playfair-display">Example copy lorem ipsum dolor sit amet.</p>
<p class="playfair-display italic">Example copy lorem ipsum dolor sit amet.</p>
Aa Source Sans Pro
light regular Italic Semibold Semibold italic
{% capture html -%}

Example copy lorem ipsum dolor sit amet.

Example copy lorem ipsum dolor sit amet.

Example copy lorem ipsum dolor sit amet.

Example copy lorem ipsum dolor sit amet.

Example copy lorem ipsum dolor sit amet.

{% endcapture -%} {{html | escape | strip}}

Helpers

Italic Font

Uppercase Font

Regular Case Font

Semibold Font Weight

Bold Font Weight

Normal 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="semi-bold">Semibold Font Weight</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="small caps">Headings</h1>
<h1 class="page-title">Title &mdash; 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-arrow-forward"></span>
<span class="icon-arrow-back"></span>
<span class="icon-play-circle"></span>
<span class="icon-external-link"></span>
<span class="icon-envelope"></span>
<span class="icon-facebook"></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.

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.

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.

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">
<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">
<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">
<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.

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.

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.

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>
<blockquote>
<p class="quote">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>
<p class="cite">Optional Authors Name <span> Optional Second Field</span> </p>
</blockquote>

Unordered Bullet 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 Checkmark 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

Ordered List

  1. List Item 1
  2. List Item 2
  3. List Item 3
  4. 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
  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

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

<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

<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">
<label>Choose Your Favorite</label>
<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>
</div>
<div class="large-6 columns mb3">
<label>Check these out</label>
<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>
</div>
</div>
<div class="row column">
<label>Enable Some Fun</label>
<label class="switch">
<input type="checkbox">
<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.

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.

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.

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.

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"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border"> </div>
</div>

7 Page Body Components

Slide Content

Slide Toggle With Link

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.

More Info

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.

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.

Slide Toggle With Button

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.

More Info

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.

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.

<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

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">
<li>Tab 1</li>
<li>Tab 2</li>
<li>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

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--horizontal">
<ul class="resp-tabs-list resp-tabs-group">
<li>Tab 1</li>
<li>Tab 2</li>
<li>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

Hero

Welcome to Walters Group Apartments

Elevate your lifestyle. Enhance your community.

For more than a decade, Walters Group has worked closely with municipalities throughout New Jersey to create the state’s most desirable affordable apartment communities.

About Walters Apartments
<!-- Begin Hero Banner -->
<section class="hero">
  <div class="hero__bg" style="background-image: url('/assets/images/content/hero-home-01.jpg')" data-aos="fade-in" data-aos-delay="300"></div>
  <div class="row row-site column">
    <div class="hero__body">
      <h1 class="hero__title" data-aos="fade-up-xsmall" data-aos-delay="500">Welcome to Walters Group Apartments</h1>
      <h2 class="hero__subtitle" data-aos="fade-up-xsmall" data-aos-delay="600">Elevate your lifestyle. Enhance your community.</h2>
      <p class="hero__overview" data-aos="fade-up-xsmall" data-aos-delay="700">For more than a decade, Walters Group has worked closely with municipalities throughout New Jersey to create the state’s most desirable affordable apartment communities.</p>
      <a href="#" class="hero__button button" data-aos="fade-up-xsmall" data-aos-delay="800">About Walters Apartments</a>
    </div>
  </div>
</section>
<!-- End Hero Banner -->

Community Detail Hero

Stafford Preserve

101 Campbell Boulevard — Manahawkin, NJ 08050

<!-- Begin Detail Hero -->
<div class="detail-hero">
  <div class="detail-hero__image">
    <div class="detail-hero__image-bg" style="background-image: url('/assets/images/content/comm-detail-01.jpg')" data-aos="fade-in" data-aos-delay="500" data-aos-duration="1200"></div>
  </div>
  <div class="detail-hero__header">
    <div class="row row-site column">
      <h1 class="detail-hero__header-title" data-aos="fade-up-xsmall" data-aos-delay="500">Stafford Preserve</h1>
      <h2 class="detail-hero__header-subtitle label" data-aos="fade-up-xsmall" data-aos-delay="600">101 Campbell Boulevard — Manahawkin, NJ 08050</h2>
    </div>
    <div class="detail-hero__pagination">
      <a class="detail-hero__pagination-prev" href="#" data-aos="fade-in" data-aos-delay="800"><span class="icon-arrow-left-large"></span></a>
      <a class="detail-hero__pagination-next" href="#" data-aos="fade-in" data-aos-delay="800"><span class="icon-arrow-right-large"></span></a>
    </div>
  </div>
</div>
<!-- End Detail Hero -->

Two Column Block

Development Approach

We care like no one else can.

Walters Group’s approach to the development of affordable housing communities is predicated on a commitment to excellence in both design and management, as well as an unparalleled understanding of the State of New Jersey’s unique affordable housing landscape. No company in New Jersey is more experienced at unlocking the value of challenged development sites.

Why We're Different
<!-- Begin Two Column Block -->
<section class="two-col-block pt11 pb11">
  <div class="row row-site column">
    <div class="two-col-block__flex">
      <div class="two-col-block__flex-img" data-aos="fade-right" data-aos-delay="500"> <img src="/assets/images/content/dev-approach-01.jpg" width="578" height="600"></div>
      <div class="two-col-block__flex-body">
        <h2 class="label" data-aos="fade-left" data-aos-delay="500">Development Approach</h2>
        <h3 class="h1" data-aos="fade-left" data-aos-delay="600">We care like no one else can.</h3>
        <p class="mb6" data-aos="fade-left" data-aos-delay="700">Walters Group’s approach to the development of affordable housing communities is predicated on a commitment to excellence in both design and management, as well as an unparalleled understanding of the State of New Jersey’s unique affordable housing landscape. No company in New Jersey is more experienced at unlocking the value of challenged development sites.</p>
        <a href="#" class="button" data-aos="fade-left" data-aos-delay="800">Why We're Different</a>
      </div>
    </div>
  </div>
</section>
<!-- End Two Column Block -->

Development Approach

We care like no one else can.

Walters Group’s approach to the development of affordable housing communities is predicated on a commitment to excellence in both design and management, as well as an unparalleled understanding of the State of New Jersey’s unique affordable housing landscape. No company in New Jersey is more experienced at unlocking the value of challenged development sites.

Why We're Different
<!-- Begin Two Column Block -->
<section class="two-col-block two-col-block--right pt11 pb11">
  <div class="row row-site column">
    <div class="two-col-block__flex">
      <div class="two-col-block__flex-img" data-aos="fade-left" data-aos-delay="500"> <img src="/assets/images/content/dev-approach-01.jpg" width="578" height="600"></div>
      <div class="two-col-block__flex-body">
        <h2 class="label" data-aos="fade-right" data-aos-delay="500">Development Approach</h2>
        <h3 class="h1" data-aos="fade-right" data-aos-delay="600">We care like no one else can.</h3>
        <p class="mb6" data-aos="fade-right" data-aos-delay="700">Walters Group’s approach to the development of affordable housing communities is predicated on a commitment to excellence in both design and management, as well as an unparalleled understanding of the State of New Jersey’s unique affordable housing landscape. No company in New Jersey is more experienced at unlocking the value of challenged development sites.</p>
        <a href="#" class="button" data-aos="fade-right" data-aos-delay="800">Why We're Different</a>
      </div>
    </div>
  </div>
</section>
<!-- End Two Column Block -->

Heading Block

Our Communities

Find your new home.

Walters Group has developed high-end, affordable residences throughout New Jersey. Find out if you qualify to live at one of our properties.

<!--  Begin Heading Block -->
<div class="heading-block mb8">
  <div class="row row-site column">
    <div class="row">
      <div class="small-11 medium-10 large-8 xlarge-6 small-centered">
        <h2 class="label" data-aos="fade-up-xsmall" data-aos-delay="500">Our Communities</h2>
        <h3 data-aos="fade-up-xsmall" data-aos-delay="600">Find your new home.</h3>
        <p data-aos="fade-up-xsmall" data-aos-delay="700">Walters Group has developed high-end, affordable residences throughout New Jersey. Find out if you qualify to live at one of our properties.</p>
      </div>
    </div>
  </div>
</div>
<!-- End Heading Block -->

Article

<!-- Begin Featured Blocks -->
<div class="featured-blocks">
  <div class="row row-site column">
    <div class="row small-up-3 ">
      <article class="column">
        <a href="#" class="featured-blocks__block" data-aos="fade-up-xsmall" data-aos-delay="500">
          <div class="featured-blocks__block-img"><img src="/assets/images/content/families-thumb.jpg" width="370" height="209"></div>
          <h3 class="featured-blocks__block-title">Affordable Family Apartments</h3>
        </a>
      </article>
      <article class="column">
        <a href="#" class="featured-blocks__block" data-aos="fade-up-xsmall" data-aos-delay="650">
          <div class="featured-blocks__block-img"><img src="/assets/images/content/seniors-thumb.jpg" width="370" height="209"></div>
          <h3 class="featured-blocks__block-title">For Seniors</h3>
        </a>
      </article>
      <article class="column">
        <a href="#" class="featured-blocks__block" data-aos="fade-up-xsmall" data-aos-delay="800">
          <div class="featured-blocks__block-img"><img src="/assets/images/content/market-rate-thumb.jpg" width="370" height="209"></div>
          <h3 class="featured-blocks__block-title">Market-Rate Apartments</h3>
        </a>
      </article>
    </div>
  </div>
</div>
<!-- End Featured Blocks -->

Article With Summary

<!-- Begin Featured Blocks -->
<div class="featured-blocks">
  <div class="row row-site column">
    <div class="row small-up-3 ">
      <article class="column">
        <a href="#" class="featured-blocks__block" data-aos="fade-up-xsmall" data-aos-delay="500">
          <div class="featured-blocks__block-img"><img src="/assets/images/content/families-thumb.jpg" width="370" height="209"></div>
          <h3 class="featured-blocks__block-title">Affordable Family Apartments</h3>
          <p class="featured-blocks__block-overview">Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam</p>
        </a>
      </article>
      <article class="column">
        <a href="#" class="featured-blocks__block" data-aos="fade-up-xsmall" data-aos-delay="650">
          <div class="featured-blocks__block-img"><img src="/assets/images/content/seniors-thumb.jpg" width="370" height="209"></div>
          <h3 class="featured-blocks__block-title">For Seniors</h3>
          <p class="featured-blocks__block-overview">Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam</p>
        </a>
      </article>
      <article class="column">
        <a href="#" class="featured-blocks__block" data-aos="fade-up-xsmall" data-aos-delay="800">
          <div class="featured-blocks__block-img"><img src="/assets/images/content/market-rate-thumb.jpg" width="370" height="209"></div>
          <h3 class="featured-blocks__block-title">Market-Rate Apartments</h3>
          <p class="featured-blocks__block-overview">Curabitur lobortis id lorem id bibendum. Ut id consectetur magna. Quisque volutpat augue enim, pulvinar lobortis nibh lacinia at. Vestibulum nec erat ut mi sollicitudin porttitor id sit amet risus. Nam tempus vel odio vitae aliquam</p>
        </a>
      </article>
    </div>
  </div>
</div>
<!-- End Featured Blocks -->

Communities Grid

<!-- Begin Communities Grid -->
<div class="row row-site column">
  <h2 data-anchor="Communities Grid" class="sg-section__subheading"><span>Communities Grid</span></h2>
</div>
<div class="row row-site column">
  <div class="row small-up-2 large-up-4 communities-grid">
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="communities-grid__block" data-aos="fade-up-xsmall" data-aos-delay="500">
        <div class="communities-grid__image"><img src="/assets/images/content/temp-grid-item.jpg" width="278" height="207"></div>
        <div class="communities-grid__details">
          <h3 class="communities-grid__title">Cornerstone at Lacy & Cornerstone at Lacy II</h3>
          <span class="communities-grid__arrow icon-arrow-right-large"></span>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="communities-grid__block" data-aos="fade-up-xsmall" data-aos-delay="650">
        <div class="communities-grid__image"><img src="/assets/images/content/temp-grid-item.jpg" width="278" height="207"></div>
        <div class="communities-grid__details">
          <h3 class="communities-grid__title">Cornerstone at Lacy & Cornerstone at Lacy II</h3>
          <span class="communities-grid__arrow icon-arrow-right-large"></span>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="communities-grid__block" data-aos="fade-up-xsmall" data-aos-delay="800">
        <div class="communities-grid__image"><img src="/assets/images/content/temp-grid-item.jpg" width="278" height="207"></div>
        <div class="communities-grid__details">
          <h3 class="communities-grid__title">Cornerstone at Lacy & Cornerstone at Lacy II</h3>
          <span class="communities-grid__arrow icon-arrow-right-large"></span>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="communities-grid__block" data-aos="fade-up-xsmall" data-aos-delay="950">
        <div class="communities-grid__image"><img src="/assets/images/content/temp-grid-item.jpg" width="278" height="207"></div>
        <div class="communities-grid__details">
          <h3 class="communities-grid__title">Cornerstone at Lacy & Cornerstone at Lacy II</h3>
          <span class="communities-grid__arrow icon-arrow-right-large"></span>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
  </div>
</div>
<!-- End Communities Grid -->

Floor Plan Grid

<!-- Begin Floor Plan Grid -->
<div class="row row-site column">
  <h2 data-anchor="Floor Plan Grid" class="sg-section__subheading"><span>Floor Plan Grid</span></h2>
</div>
<div class="row row-site column">
  <div class="row small-up-2 large-up-4 floor-plan-grid">
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="floor-plan-grid__block" data-aos="fade-up-xsmall" data-aos-delay="500">
        <div class="floor-plan-grid__image"><img src="/assets/images/content/comm-plan-01.jpg" width="278" height="207"></div>
        <div class="floor-plan-grid__details">
          <h3 class="floor-plan-grid__title">The Edge (First Floor)</h3>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="floor-plan-grid__block" data-aos="fade-up-xsmall" data-aos-delay="650">
        <div class="floor-plan-grid__image"><img src="/assets/images/content/comm-plan-01.jpg" width="278" height="207"></div>
        <div class="floor-plan-grid__details">
          <h3 class="floor-plan-grid__title">The Edge (First Floor)</h3>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="floor-plan-grid__block" data-aos="fade-up-xsmall" data-aos-delay="800">
        <div class="floor-plan-grid__image"><img src="/assets/images/content/comm-plan-01.jpg" width="278" height="207"></div>
        <div class="floor-plan-grid__details">
          <h3 class="floor-plan-grid__title">The Edge (First Floor)</h3>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
    <!--  Begin Grid Item -->
    <div class="column">
      <a href="#" class="floor-plan-grid__block" data-aos="fade-up-xsmall" data-aos-delay="950">
        <div class="floor-plan-grid__image"><img src="/assets/images/content/comm-plan-01.jpg" width="278" height="207"></div>
        <div class="floor-plan-grid__details">
          <h3 class="floor-plan-grid__title">The Edge (First Floor)</h3>
        </div>
      </a>
    </div>
    <!--  End Grid Item -->
  </div>
</div>
<!-- End Floor Plan Grid -->

Section Feature - Large

BIA Shop

Learn. Shop. Give

Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

Visit the Marketplace
<!-- Begin Full Card -->
<section class="full-card">
  <div class="full-card__inner">
    <div class="full-card__image" data-aos="fade-in" data-aos-delay="500">
      <div class="full-card__image-bg" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/images/content/become-resident-01.jpg)"></div>
    </div>
    <div class="full-card__info">
      <div class="full-card__info-inner">
        <div class="full-card__info-valign">
          <div class="full-card__info-body">
            <span class="full-card__subtitle label" data-aos="fade-up-xsmall" data-aos-delay="500">Label</span>
            <h2 class="full-card__headline" data-aos="fade-up-xsmall" data-aos-delay="600">Learn. Shop. Give</h2>
            <div class="full-card__overview" data-aos="fade-up-xsmall" data-aos-delay="700">
              <p>Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.</p>
            </div>
            <a class="button" href="#" data-aos="fade-up-xsmall" data-aos-delay="800">Visit the Marketplace</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End Full Card -->
BIA Shop

Learn. Shop. Give

Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.

Visit the Marketplace
<!-- Begin Full Card -->
<section class="full-card full-card--left">
  <div class="full-card__inner">
    <div class="full-card__image" data-aos="fade-in" data-aos-delay="500">
      <div class="full-card__image-bg" style="background-image:url(<?php echo get_template_directory_uri(); ?>/assets/images/content/become-resident-01.jpg)"></div>
    </div>
    <div class="full-card__info">
      <div class="full-card__info-inner">
        <div class="full-card__info-valign">
          <div class="full-card__info-body">
            <span class="full-card__subtitle label" data-aos="fade-up-xsmall" data-aos-delay="500">Label</span>
            <h2 class="full-card__headline" data-aos="fade-up-xsmall" data-aos-delay="600">Learn. Shop. Give</h2>
            <div class="full-card__overview" data-aos="fade-up-xsmall" data-aos-delay="700">
              <p>Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.</p>
            </div>
            <a class="button" href="#" data-aos="fade-up-xsmall" data-aos-delay="800">Visit the Marketplace</a>
          </div>
        </div>
      </div>
    </div>
  </div>
</section>
<!-- End Full Card -->

Dual Section Feature

Contact Walters Group Today

Have a general question?

Contact Us

Tell Your Friends

Share this community

<!-- Begin Dual Section Feature -->
<div class="dual-card">
  <div class="dual-card__left">
    <div class="dual-card__inner">
      <div class="dual-card__body">
        <h2 class="label" data-aos="fade-up-xsmall" data-aos-delay="500">Contact Walters Group Today</h2>
        <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="600">Have a general question?</h3>
        <a href="#" class="button" data-aos="fade-up-xsmall" data-aos-delay="700">Contact Us</a>
      </div>
    </div>
  </div>
  <div class="dual-card__right dual-card__bg" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/content/share-bg-01.jpg')">
    <div class="dual-card__inner">
      <div class="dual-card__body">
        <h2 class="label" data-aos="fade-up-xsmall" data-aos-delay="500">Tell Your Friends</h2>
        <h3 class="h1" data-aos="fade-up-xsmall" data-aos-delay="600">Share this community</h3>
        <div class="dual-card__actions" data-aos="fade-up-xsmall" data-aos-delay="700">
          <a href="#" class="button button--social"><span class="icon-facebook-f"></span> Facebook</a>
          <a href="#" class="button button--social"><span class="icon-twitter"></span> Twitter</a>
        </div>
      </div>
    </div>
  </div>
</div>
<!-- End Dual Section Feature -->