Skip to main content

Color Palette

Primary

Dark Green - Primary
#001F19 .dark-green-primary var(--dark-green-primary)
Aa
Mid Green - Primary
#14DD72 .mid-green-primary var(--mid-green-primary)
Aa
Light Green - Primary
#7FFF95 .light-green-primary var(--light-green-primary)
Aa
Purple - Secondary
#9747FF .purple-secondary var(--purple-secondary)
Aa
Green - Secondary
#00AD6A .green-secondary var(--green-secondary)
Aa
Aqua - Tertiary
#00CFFF .aqua-tertiary var(--aqua-tertiary)
Aa
Black
#000000 .black var(--black)
Aa
White
#FFFFFF .white var(--white)
Aa

Grayscale

Dark Gray
#53575C .darker-gray var(--darker-gray)
Aa
Gray
#656565 .gray var(--gray)
Aa
Light Gray
#CCCCCC .light-gray var(--light-gray)
Aa
Lighter Gray
#DDDDDE .lighter-gray var(--lighter-gray)
Aa
Lightest Gray
#F2F2F2 .lightest-gray var(--lightest-gray)
Aa

Typography

Arial Black is the heading font

Arial is the supporting heading and body copy font. This additional, wordy content has the purpose of showing a paragraph and a link in context with the heading as it would appear in a regular page.

Fonts

Aa Arial Black

Weights

Normal & Bold

Provider

System Fonts
Aa Arial

Weights

Normal & Bold

Provider

System Fonts
<p class="arial">Example copy lorem ipsum dolor sit amet.</p>
<p class="arial italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="arial medium">Example copy lorem ipsum dolor sit amet.</p>
<p class="arial bold">Example copy lorem ipsum dolor sit amet.</p>					

Name

Size

Weight

Line Height

Title

6.25rem

Arial Black · 900

1.2

H1

4.375rem

Arial Black · 900

1.2

H2

3.125rem

Arial Black · 900

1.2

H3

2.5rem

Arial Black · 900

1.2

H4

2rem

Arial Black · 900

1.3

H5

1.75rem

Arial Black · 900

1.3

H6

1.5rem

Arial Black · 900

1.3

Paragraph - Large

1.375rem

Arial · Regular

1.5

Paragraph - Default

1rem

Arial · Regular

1.5

Paragraph - Small

0.875rem

Arial · Regular

1.5

<span class="page-title">Title</span>
<h1>H1</h1>
<h2>H2</h2>
<h3>H3</h3>
<h4>H4</h4>
<h5>H5</h5>
<h6>H6</h6>
<span class="content-block__label">Label</span>					

UI Elements

Buttons

Primary On Dark Secondary On Dark
Default Button Button Button Button
Hover Button Button Button Button
<a class="button button-style-1" href="#">Style 1 Default</a>
<a class="button button-style-2" href="#">Style 2 Default</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>			

Links

Inline Text On Dark
Default Text Link Text Link
Hover Text Link Text Link
<a class="text-button" href="#">Text Link</a>
<a href="#">Inline Link</a>			

Custom Icons

Hover over an icon to reveal its class name. Click an icon to copy the class name to your clipboard.   View All Icons

.icon-add-circle
.icon-minus-circle
.icon-mail-line
.icon-link
.icon-line-chart
.icon-idea
.icon-help
.icon-geo-fence
.icon-file
.icon-dashboard
.icon-check-circle
.icon-approval
.icon-advertising
<i class='icon-add-circle'></i>
<i class='icon-minus-circle'></i>
<i class='icon-mail-line'></i>
<i class='icon-link'></i>
<i class='icon-line-chart'></i>
<i class='icon-idea'></i>
<i class='icon-help'></i>
<i class='icon-geo-fence'></i>
<i class='icon-file'></i>
<i class='icon-dashboard'></i>
<i class='icon-check-circle'></i>
<i class='icon-approval'></i>
<i class='icon-advertising'></i>			

List Options

Unordered Default

  • Primary list item 1
  • Primary list item 2
    • Secondary list item 1
    • Secondary list item 2
      • Tertiary list item 1
      • Tertiary list item 2
  • Primary list item 3
view usage hint

Checklist

  • Primary list item 1
  • Primary list item 2
    • Secondary list item 1
    • Secondary list item 2
      • Tertiary list item 1
      • Tertiary list item 2
  • Primary list item 3
view usage hint

Bulleted List

  • Primary list item 1
  • Primary list item 2
    • Secondary list item 1
    • Secondary list item 2
      • Tertiary list item 1
      • Tertiary list item 2
  • Primary list item 3
view usage hint

Carets

  • Primary list item 1
  • Primary list item 2
    • Secondary list item 1
    • Secondary list item 2
      • Tertiary list item 1
      • Tertiary list item 2
  • Primary list item 3
view usage hint

Numbered List

  1. Primary list item 1
  2. Primary list item 2
    1. Secondary list item 1
    2. Secondary list item 2
      1. Tertiary list item 1
      2. Tertiary list item 2
  3. Primary list item 3
view usage hint

No Bullets

  • Primary list item 1
  • Primary list item 2
    • Secondary list item 1
    • Secondary list item 2
      • Tertiary list item 1
      • Tertiary list item 2
  • Primary list item 3
view usage hint
Example of choosing the no bullet list option
<ul>
	<li>Primary list item 1</li>
	<li>
		Primary list item 2
		<ul>
			<li>Secondary list item 1</li>
			<li>
				Secondary list item 2
				<ul>
					<li>Tertiary list item 1</li>
					<li>Tertiary list item 2</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Primary list item 3</li>
</ul>
<ul class="checkmarks">
	<li>Primary list item 1</li>
	<li>
		Primary list item 2
		<ul class="checkmarks">
			<li>Secondary list item 1</li>
			<li>
				Secondary list item 2
				<ul class="checkmarks">
					<li>Tertiary list item 1</li>
					<li>Tertiary list item 2</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Primary list item 3</li>
</ul>
<ul class="bullets">
	<li>Primary list item 1</li>
	<li>
		Primary list item 2
		<ul class="bullets">
			<li>Secondary list item 1</li>
			<li>
				Secondary list item 2
				<ul class="bullets">
					<li>Tertiary list item 1</li>
					<li>Tertiary list item 2</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Primary list item 3</li>
</ul>
<ul class="carets">
	<li>Primary list item 1</li>
	<li>
		Primary list item 2
		<ul class="carets">
			<li>Secondary list item 1</li>
			<li>
				Secondary list item 2
				<ul class="carets">
					<li>Tertiary list item 1</li>
					<li>Tertiary list item 2</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Primary list item 3</li>
</ul>
<ol class="">
	<li>Primary list item 1</li>
	<li>
		Primary list item 2
		<ol class="">
			<li>Secondary list item 1</li>
			<li>
				Secondary list item 2
				<ol class="">
					<li>Tertiary list item 1</li>
					<li>Tertiary list item 2</li>
				</ol>
			</li>
		</ol>
	</li>
	<li>Primary list item 3</li>
</ol>
<ul class="no-bullets">
	<li>Primary list item 1</li>
	<li>
		Primary list item 2
		<ul class="no-bullets">
			<li>Secondary list item 1</li>
			<li>
				Secondary list item 2
				<ul class="no-bullets">
					<li>Tertiary list item 1</li>
					<li>Tertiary list item 2</li>
				</ul>
			</li>
		</ul>
	</li>
	<li>Primary list item 3</li>
</ul>			

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

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.

Enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit.

Slide Toggle With Button

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.

More Info

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.

Enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit.

<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

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.

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.

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" data-style="arrow" data-first="closed" data-multiple-expanded="true">
	<div class="accordion__item">
		<dt>
			<button class="accordion__title">FAQ Question 1. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</button>
		</dt>
		<dd class="accordion__content">
			<p>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.</p>
		</dd>
	</div>
	<div class="accordion__item">
		<dt>
			<button class="accordion__title">FAQ Question 2. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</button>
		</dt>
		<dd class="accordion__content">
			<p>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.</p>
		</dd>
	</div>
	<div class="accordion__item">
		<dt>
			<button class="accordion__title">FAQ Question 3. Pellentesque dapibus hendrerit tortor. Donec vitae orci sed dolor?</button>
		</dt>
		<dd class="accordion__content">
			<p>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.</p>
		</dd>
	</div>
</dl>			

Tabs

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

Tables with 5 columns or more will scroll horizontally on smaller screens. (Note: there are customization options to handle this differently if needed, contact Support to discuss options. Resize your browser window and try scrolling horizontally to view this result.)

Table Header 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 This is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus.
Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus. Content Goes Here Content Goes Here This is longer content Donec id elit non mi porta gravida at eget metus.

Tables with 4 columns or less will stack on smaller screens and the Table Headers will be hidden. (Note: there are customization options to handle this differently if needed, contact Support to discuss options. Resize your browser window to view this result.)

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

Form Elements

Sample form

Name
Choose your favorite
Check these out
This field is for validation purposes and should be left unchanged.

Custom Page Components

Please visit this link to view the custom page components.