1 Color Palette
<div class="purple">Text Color</div>
<div class="bg-purple">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>
<div class="orange">Text Color</div>
<div class="bg-orange">Background Color</div>
<div class="yellow">Text Color</div>
<div class="bg-yellow">Background Color</div>
2 Typography
Fonts
<p class="muli">Example copy lorem ipsum dolor sit amet.</p>
<p class="muli bold">Example copy lorem ipsum dolor sit amet.</p>
<p class="muli italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="muli bold italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="serif-display">Example copy lorem ipsum dolor sit amet.</p>
Helpers
Italic Font
Uppercase Font
Regular Case Font
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="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
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>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
<span class="icon-arrow-right"></span>
<span class="icon-arrow-left"></span>
<span class="icon-play-circle"></span>
<span class="icon-external"></span>
<span class="icon-mail-line"></span>
<span class="icon-facebook"></span>
Section Headings
Section Headings
Section Headings - with icon
<h3 class="headings">Section Headings</h3>
<h4 class="headings"><span class="icon-building"></span> Section Headings - with icon</h4>
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" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/350x250" class="alignleft border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<img src="https://placehold.it/1200x400" class="aligntop border" alt="placeholder image">
<p>enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
Body Copy Alignment
Left Align Lorem ipsum Ut a nisl id ante tempus hendrerit.
Right Align Lorem ipsum Ut a nisl id ante tempus hendrerit.
Center Lorem ipsum Ut a nisl id ante tempus hendrerit.
<p class="left-align"><strong>Left Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="right-align"><strong>Right Align</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
<p class="center"><strong>Center</strong> Lorem ipsum Ut a nisl id ante tempus hendrerit.</p>
Article Copy
Article copy that decreases container width and increases font size
Article copy that decreases container width and increases font size for easier reading experience. enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
Article Headline Lorem ipsum dolor sit amet, consectetur adipisicing elit. Incidunt mollitia, ipsam cupiditate.
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>
<div class="quote">
<p>Blockquote Text donec venenatis vulputate lorem. Nam at tortor in tellus interdum sagittis. Donec elit libero, sodales nec, volutpat a, suscipit non, turpis. Praesent egestas neque eu enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
posuere cubilia Curae; Fusce id purus. posuere cubilia Curae; Fusce id purus. Fusce id purus. posuere </p>
</div>
<p class="cite">Optional Authors Name <span> Optional Second Field</span> </p>
</blockquote>
Unordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
- List Item 6
Unordered List - Checkmarks
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
- List Item 6
Ordered List
- List Item 1
- List Item 2
- List Item 3
- List Item 4
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- Sub List Item 4
- Sub List Item 5
- List Item 6
<ul class="bullets">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ul class="checkmarks">
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ul>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ul>
</li>
<li>List Item 6</li>
</ul>
<ol>
<li>List Item 1</li>
<li>List Item 2</li>
<li>List Item 3</li>
<li>List Item 4
<ol>
<li>Sub List Item 1</li>
<li>Sub List Item 2</li>
<li>Sub List Item 3</li>
<li>Sub List Item 4</li>
<li>Sub List Item 5</li>
</ol>
</li>
<li>List Item 6</li>
</ol>
3 Spacing
Top Margin Spacing
Bottom Margin Spacing
<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
Bottom Padding Spacing
<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
<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 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">
<fieldset>
<legend>Choose Your Favorite</legend>
<div class="radio">
<label><input type="radio" name="optionsRadios" id="optionsRadios1" value="option1"><span></span> Radio 1 </label>
</div>
<div class="radio">
<label><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2"><span></span> Radio 2 </label>
</div>
</fieldset>
</div>
<div class="large-6 columns mb3">
<fieldset>
<legend>Check these out</legend>
<div class="checkbox">
<label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
<div class="checkbox">
<label><input type="checkbox"><span></span> Checkbox 1 </label>
</div>
</fieldset>
</div>
</div>
<div class="row column">
<label>Enable Some Fun</label>
<label class="switch">
<input type="checkbox" title="Switch Control" aria-label="Switch Control">
<span></span>
</label>
</div>
<div class="row column">
<label>Textarea Label
<textarea rows="8" placeholder=".row.column"></textarea>
</label>
</div>
<div class="row column">
<button type="submit" class="button">Submit</button>
</div>
</form>
6 Grids
Standard Grid
Grid system is based on Foundations Grid please reference docs for more information.
Sites breakpoints:
xsmall (0 to 479px)
small (480px - 639px)
medium (640px - 800px)
large (801px - 959px)
xlarge (960px - 1199px)
xxlarge (1200px and up)
Two column desktop/tablet; Single column phone Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam odio adipisci distinctio porro accusamus dolores nam, dignissimos nesciunt accusantium pariatur incidunt omnis tempora excepturi optio architecto. Provident praesentium enim libero necessitatibus unde ea mollitia tempore atque adipisci ipsa velit dolorum accusantium, fugiat, rem ipsam, nesciunt eum excepturi. Maxime, enim, nobis.
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" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
<div class="column"> <img src="https://placehold.it/350x300" class="mb3 border" alt="placeholder image"> </div>
</div>
7 Page Body Components
Slide Content
Slide Toggle With Link
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.
<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" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help
entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better
products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies
after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement,
experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment
goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business
development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>
Horizontal Tabs
- Tab 1
- Tab 2
- Tab 3
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" role="tablist">
<li tabindex="0">Tab 1</li>
<li tabindex="0">Tab 2</li>
<li tabindex="0">Tab 3</li>
</ul>
<div class="resp-tabs-container resp-tabs-group">
<div>
<p>Chicago has a number of successful incubators that help entrepreneurs get their start-ups off the ground, but incubation is only the beginning. We help entrepreneurs go beyond the basics, providing engagement and insight on how to execute a successful business plan, grow your team, and cultivate better products and services.</p>
</div>
<div>
<p>Accelerators provide instruction and create opportunities for investment. While The Cultivator creates similar opportunities, we do not “graduate” companies after a few months or weeks of instruction. The Cultivator partners with growing businesses that can benefit from the accountabilities, measurement, experience, guidance, and investment of our Members.</p>
</div>
<div>
<p>The Cultivator has an active investment fund which we use to accelerate the growth and potential of companies that partner with us, but our investment goes beyond capital. We help business owners make the most of their resources, including capital, talent, and tech. Our holistic approach to business development enables entrepreneurs to do more with the resources they already have while considering new, viable alternatives when needed.</p>
</div>
</div>
</div>
Tables
Table Header | Table Header | Table Header | Table Header |
---|---|---|---|
Content Goes Here | This is longer content Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
Content Goes Here | This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus. | Content Goes Here | Content Goes Here |
<table class="table">
<thead>
<tr>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
<th>Table Header</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content Goes Here</td>
<td>This is longer content Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
<tr>
<td>Content Goes Here</td>
<td>This is longer Content Goes Here Donec id elit non mi porta gravida at eget metus.</td>
<td>Content Goes Here</td>
<td>Content Goes Here</td>
</tr>
</tbody>
</table>
8 System Components
Alerts
This is an example successful alert message that would be used for forms or login messages more info
This is an example info alert message that would be used for forms or login messages more info
This is an example warning alert message that would be used for forms or login messages more info
This is an example danger alert message that would be used for forms or login messages more info
<div class="alert alert-success">
<p>This is an example successful alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-info">
<p>This is an example info alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-warning">
<p>This is an example warning alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
<div class="alert alert-danger">
<p>This is an example danger alert message that would be used for forms or login messages <a href="#">more info</a> </p>
</div>
9 Theme Components
Split Panel
Integrative Healing in the Heart of Chicago
The Raby Institute for Integrative Medicine at Northwestern is the premier center for primary care and integrative healing located in the heart of Chicago.
We seamlessly combine the best of science-based Western medicine with the time-tested, holistic healing approaches of ancient cultures to create a system of health and wellness that honors the whole person.
The Raby Institute provides primary and consultative care by functional medicine trained, board-certified practitioners in integrative internal medicine, pediatrics, and gynecology. We also offer direct and collaborative care by certified practitioners of Traditional Chinese Medicine, Medical Acupuncture, Naturopathic Medicine, Integrative Aesthetics and Medical Massage. Our physicians and practitioners collaborate to review patient cases and develop effective health and treatment plans to empower optimal wellness.
<section class="split-panel split-panel--right mt11 mb11">
<div class="row row-site column">
<div class="split-panel__grid flex">
<!-- Begin Content -->
<div class="split-panel__body flex ">
<div class="split-panel__body-inner">
<h2 class="split-panel__title h1">Integrative Healing in the Heart of Chicago</h2>
<p class="lead purple">The Raby Institute for Integrative Medicine at Northwestern is the premier center for primary care and integrative healing located in the heart of Chicago. </p>
<div class="split-panel__content">
<p>We seamlessly combine the best of science-based Western medicine with the time-tested, holistic healing approaches of ancient cultures to create a system of health and wellness that honors the whole person.</p>
<p>The Raby Institute provides primary and consultative care by functional medicine trained, board-certified practitioners in integrative internal medicine, pediatrics, and gynecology. We also offer direct and collaborative care by certified practitioners of Traditional Chinese Medicine, Medical Acupuncture, Naturopathic Medicine, Integrative Aesthetics and Medical Massage. Our physicians and practitioners collaborate to review patient cases and develop effective health and treatment plans to empower optimal wellness. </p>
</div>
<a href="" class="button">View All Events</a>
</div>
</div>
<!-- End Content -->
<!-- Begin Image -->
<div class="split-panel__figure ">
<figure class="split-panel__image">
<img src="/wp-content/uploads/about-intro.jpg" alt="">
</figure>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/floral-right.png" class="floral-element" alt="">
</div>
<!-- End Image -->
</div>
</div>
</section>
Integrative Healing in the Heart of Chicago
The Raby Institute for Integrative Medicine at Northwestern is the premier center for primary care and integrative healing located in the heart of Chicago.
We seamlessly combine the best of science-based Western medicine with the time-tested, holistic healing approaches of ancient cultures to create a system of health and wellness that honors the whole person.
The Raby Institute provides primary and consultative care by functional medicine trained, board-certified practitioners in integrative internal medicine, pediatrics, and gynecology. We also offer direct and collaborative care by certified practitioners of Traditional Chinese Medicine, Medical Acupuncture, Naturopathic Medicine, Integrative Aesthetics and Medical Massage. Our physicians and practitioners collaborate to review patient cases and develop effective health and treatment plans to empower optimal wellness.
<section class="split-panel split-panel--left mt11 mb11">
<div class="row row-site column">
<div class="split-panel__grid flex">
<!-- Begin Content -->
<div class="split-panel__body flex ">
<div class="split-panel__body-inner">
<h2 class="split-panel__title h1">Integrative Healing in the Heart of Chicago</h2>
<p class="lead purple">The Raby Institute for Integrative Medicine at Northwestern is the premier center for primary care and integrative healing located in the heart of Chicago. </p>
<div class="split-panel__content">
<p>We seamlessly combine the best of science-based Western medicine with the time-tested, holistic healing approaches of ancient cultures to create a system of health and wellness that honors the whole person.</p>
<p>The Raby Institute provides primary and consultative care by functional medicine trained, board-certified practitioners in integrative internal medicine, pediatrics, and gynecology. We also offer direct and collaborative care by certified practitioners of Traditional Chinese Medicine, Medical Acupuncture, Naturopathic Medicine, Integrative Aesthetics and Medical Massage. Our physicians and practitioners collaborate to review patient cases and develop effective health and treatment plans to empower optimal wellness. </p>
</div>
<a href="" class="button">View All Events</a>
</div>
</div>
<!-- End Content -->
<!-- Begin Image -->
<div class="split-panel__figure ">
<figure class="split-panel__image">
<img src="/wp-content/uploads/about-intro.jpg" alt="">
</figure>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/floral-left.png" class="floral-element" alt="">
</div>
<!-- End Image -->
</div>
</div>
</section>
Block Icons
<section class="block-icons mt11 mb12">
<!-- Begin Section Heading -->
<div class="section-headline">
<div class="row row-site column center">
<h2 class="h1">The Strength of our Foundations</h2>
<p class="section-headline__overview section-headline__overview--medium">The Raby Institute for Integrative Medicine is affiliated with Northwestern Memorial Hospital and Medical School, a tertiary care academic institution. This ensures access to an extended network of medical resources and colleagues to support our patients. <br><br>
Prior to launching the Raby Institute in 2009, founder Theri Griego Raby, MD spearheaded the creation of the Center for Integrative Medicine at Northwestern where she pioneered the integration of complementary and holistic modalities into a conventional medical setting. With the founding of the Raby Institute, Dr. Raby was able to bring together her mastery of Allopathic Medicine with her passion for integrative approaches that emphasize the body’s innate ability to heal itself. The Raby Institute brings to focus her vision of healthcare as an art of living.
</p>
</div>
</div>
<!-- End Section Heading -->
<!-- Begin Blocks -->
<div class="row row-site column mt7 mb7">
<div class="block-grid block-grid--2 flex">
<!-- Begin Block -->
<div class="block-icon">
<div class="block-icon__inner center">
<span class="block-icon__circle background-icon">
<span class="icon-purpose"></span>
</span>
<h3 class="block-icon__title">Our Purpose</h3>
<p class="block-icon__overview">
The Raby Institute provides integrative health services in a nurturing and empowering environment in which all can realize their innate powers of healing and their potential to live fully engaged, healthy lives.
</p>
</div>
</div>
<!-- End Block -->
<!-- Begin Block -->
<div class="block-icon ">
<div class="block-icon__inner center">
<span class="block-icon__circle background-icon">
<span class="icon-mission"></span>
</span>
<h3 class="block-icon__title">Our Mission</h3>
<p class="block-icon__overview">
To actively partner with our patients and provide them with resources that empower them to consciously author their own wellness with knowledge, hope, and support.
</p>
</div>
</div>
<!-- End Block -->
</div>
<div class="center mt7">
<a href="#" class="button">Learn More About Our Integrative Approach</a>
</div>
</div>
<!-- End Blocks -->
</section>
CTA Callout
We Invite You to Experience Healthcare as it Should Be
Schedule an Appointment
<section class="cta-callout">
<div class="row row-site column center">
<div class="cta-callout__inner">
<h2 class="h1 white">We Invite You to Experience Healthcare as it Should Be</h2>
<a href="#" class="button secondary">Schedule an Appointment</a>
</div>
</div>
<img src="<?php echo get_template_directory_uri(); ?>/assets/images/cta-background.png" alt="">
</section>
Box Icons
<section class="box-icons mt10 mb10">
<!-- Begin Section Heading -->
<div class="section-headline">
<div class="row row-site column center">
<h2 class="h1">Our Principles</h2>
</div>
</div>
<!-- End Section Heading -->
<div class="row row-site column mt6">
<div class="box-icon__grid flex">
<!-- begin box icon -->
<div class="box-icon">
<div class="box-icon__inner bg-dark-yellow center">
<span class="block-icon__circle background-icon">
<span class="icon-transparency"></span>
</span>
<h4 class="muli">Empowerment</h4>
<div class="box-icon__hover">
<p>We clearly explain and fully discuss all aspects of care and treatment options available to patients.</p>
</div>
</div>
</div>
<!-- end box icon -->
<!-- begin box icon -->
<div class="box-icon">
<div class="box-icon__inner bg-dark-yellow center">
<span class="block-icon__circle background-icon">
<span class="icon-transparency"></span>
</span>
<h4 class="muli">Empowerment</h4>
</div>
</div>
<!-- end box icon -->
<!-- begin box icon -->
<div class="box-icon">
<div class="box-icon__inner bg-dark-yellow center">
<span class="block-icon__circle background-icon">
<span class="icon-transparency"></span>
</span>
<h4 class="muli">Empowerment</h4>
</div>
</div>
<!-- end box icon -->
<!-- begin box icon -->
<div class="box-icon">
<div class="box-icon__inner bg-dark-yellow center">
<span class="block-icon__circle background-icon">
<span class="icon-transparency"></span>
</span>
<h4 class="muli">Empowerment</h4>
</div>
</div>
<!-- end box icon -->
<!-- begin box icon -->
<div class="box-icon">
<div class="box-icon__inner bg-dark-yellow center">
<span class="block-icon__circle background-icon">
<span class="icon-transparency"></span>
</span>
<h4 class="muli">Empowerment</h4>
</div>
</div>
<!-- end box icon -->
</div>
</div>
</section>
Checklist
Our Commitments
- We are committed to delivering to our patients the highest quality of integrative care that engages the whole person; nourishes the mind, body, and spirit; and encourages the conscious creation of personal health and wellness.
- We are committed to being role models for the positive benefits of integrative medicine by practicing what we preach.
- We are committed to engaging fully in our own lives, abiding by the Raby Institute principles, and continuing to learn and grow personally, professionally, and as a team.
- We are committed to delivering to our patients the highest quality of integrative care that engages the whole person; nourishes the mind, body, and spirit; and encourages the conscious creation of personal health and wellness.
- We are committed to being role models for the positive benefits of integrative medicine by practicing what we preach.
- We are committed to engaging fully in our own lives, abiding by the Raby Institute principles, and continuing to learn and grow personally, professionally, and as a team.
<section class="checklist-section mt8 mb8">
<!-- Begin Section Heading -->
<div class="section-headline">
<div class="row row-site column center">
<h2 class="h1">Our Commitments</h2>
</div>
</div>
<!-- End Section Heading -->
<div class="row row-site column mt5">
<div class="checklist__grid checklist__grid--double flex">
<div class="checklist__col">
<div class="checklist__col-inner">
<ul class="list-reset checkmarks">
<li>We are committed to delivering to our patients the highest quality of integrative care that engages the whole person; nourishes the mind, body, and spirit; and encourages the conscious creation of personal health and wellness.</li>
<li>We are committed to being role models for the positive benefits of integrative medicine by practicing what we preach.</li>
<li>We are committed to engaging fully in our own lives, abiding by the Raby Institute principles, and continuing to learn and grow personally, professionally, and as a team.</li>
</ul>
</div>
</div>
<div class="checklist__col">
<div class="checklist__col-inner">
<ul class="list-reset checkmarks">
<li>We are committed to delivering to our patients the highest quality of integrative care that engages the whole person; nourishes the mind, body, and spirit; and encourages the conscious creation of personal health and wellness.</li>
<li>We are committed to being role models for the positive benefits of integrative medicine by practicing what we preach.</li>
<li>We are committed to engaging fully in our own lives, abiding by the Raby Institute principles, and continuing to learn and grow personally, professionally, and as a team.</li>
</ul>
</div>
</div>
</div>
</div>
</section>
8 Shortcodes
Phone
312.276.1212 with GA TrackingShortcode: [phone-number]
Contact Info
Ste. 2100
Chicago, IL 60611
Shortcode: [module path="contact-small"]
Shortcode: [email]
Map
Contact Us
Location & Parking
We are conveniently located in the heart of downtown Chicago’s Magnificent Mile at 500 N. Michigan Avenue, Suite 2100. Our offices are easily accessible by public transportation. If you choose to drive, we offer parking on Rush Street near the Nordstrom department store, 516 North Rush St.
Discounted rates are as follows:
4 Hours: $12
Customers will need to collect a validated parking ticket at the front desk of the Raby Institute for Integrative Medicine to receive the discount.
Shortcode: [module path="contact-map"]
Home Pillars
Pillars of Integrative Medicine
Science & Research-Based
Collaborative
Patient-Centered
Proactive & Preventative
Shortcode: [module path="home-pillars"]