Color Palette
Primary
Grayscale
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
Weights
Normal & BoldProvider
System FontsWeights
Normal & BoldProvider
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
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
<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
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
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
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
Numbered 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
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
<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.
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.
<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
Custom Page Components
Please visit this link to view the custom page components.