Skip to Content

Style Guide

1 Color Palette

#0073d1 .blue / primary
#a5cf00 .green / secondary
#022848 .dark-blue / headings
#6caddf .light-blue / headings
#fafcff .off-white / white overlay text & section backgrounds
#dfe5e9 .lightest-gray / borders and section background
#9baab7 .light-gray / component titles
#828e99 .gray / subheaders
#495865 .dark-gray / body copy
#010b14 .black / overlay
<div class="blue">Text Color</div>
<div class="bg-blue">Background Color</div>
<div class="green">Text Color</div>
<div class="bg-green">Background Color</div>
<div class="dark-blue">Text Color</div>
<div class="bg-dark-blue">Background Color</div>
<div class="light-blue">Text Color</div>
<div class="bg-light-blue">Background Color</div>
<div class="off-white">Text Color</div>
<div class="bg-off-white">Background Color</div>
<div class="lightest-gray">Text Color</div>
<div class="bg-lightest-gray">Background Color</div>
<div class="light-gray">Text Color</div>
<div class="bg-light-gray">Background Color</div>
<div class="gray">Text Color</div>
<div class="bg-gray">Background Color</div>
<div class="dark-gray">Text Color</div>
<div class="bg-dark-gray">Background Color</div>
<div class="black">Text Color</div>
<div class="bg-black">Background Color</div>

2 Typography

Fonts

Aa Open Sans
light light italic regular regular italic semi-bold bold
<p class="open-sans light">Example copy lorem ipsum dolor sit amet.</p>
<p class="open-sans light italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="open-sans">Example copy lorem ipsum dolor sit amet.</p>
<p class="open-sans italic">Example copy lorem ipsum dolor sit amet.</p>
<p class="open-sans semi-bold">Example copy lorem ipsum dolor sit amet.</p>
<p class="open-sans bold">Example copy lorem ipsum dolor sit amet.</p>

Helpers

Italic Font

Uppercase Font

Regular Case Font

Light Font

Normal Font Weight

Bold Font Weight

Font Size t1

Font Size t2

Font Size t3

Font Size t4

Font Size t5

Font Size t6

Font Size t7

Font Size t8

Font Size t9

Font Size t10

<p class="italic">Italic Font</p>
<p class="caps">Uppercase Font</p>
<p class="regular-case">Regular Case Font</p>
<p class="light">Light Font</p>
<p class="regular">Normal Font Weight</p>
<p class="bold">Bold 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 - Subheading

h2 - Heading

h2 - Subheading

h3 - Heading

h3 - Subheading

h4 - Heading

h4 - Subheading

h5 - Heading
h5 - Subheading
h6 - Heading
h6.Subheading

Heading Sizer h1

Heading Sizer h2

Heading Sizer h3

Heading Sizer h4

Heading Sizer h5

Heading Sizer h6

<h1>h1 - Heading</h1>
<h1 class="subheader">h1 - Subheading</h1>
<h2>h2 - Heading</h2>
<h2 class="subheader">h2 - Subheading</h2>
<h3>h3 - Heading</h3>
<h3 class="subheader">h3 - Subheading</h3>
<h4>h4 - Heading</h4>
<h4 class="subheader">h4 - Subheading</h4>
<h5>h5 - Heading</h5>
<h5 class="subheader">h5 - Subheading</h5>
<h6>h6 - Heading</h6>
<h6 class="subheader">h6.Subheading</h6>
<h3 class="h1">Heading Sizer h1</h3>
<h3 class="h2">Heading Sizer h2</h3>
<h3 class="h3">Heading Sizer h3</h3>
<h3 class="h4">Heading Sizer h4</h3>
<h3 class="h5">Heading Sizer h5</h3>
<h3 class="h6">Heading Sizer h6</h3>

Font Icons

View All Font Icons

<span class="icon-bia-brain"></span>
<span class="icon-bia-click"></span>
<span class="icon-bia-handshake"></span>
<span class="icon-bia-heart"></span>
<span class="icon-bia-medical-kit"></span>

Labels

UI Label

Label Block Primary

Label Block Secondary

<span class="label">UI Label</span>
<span class="label label--primary">Label Block Primary</span>
<span class="label label--secondary">Label Block Secondary</span>

Body Copy

Heading

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

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

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

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

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

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

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

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

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

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

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

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="medium-11 large-10 xlarge-9 xxlarge-8 medium-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

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

Unordered List

  • We cannot guarantee that every story will be posted, but we try to post a wide range of stories.
  • We do not post stories with profanity.
  • We cannot post videos or pictures.
  • Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.
    • We cannot guarantee that every story will be posted, but we try to post a wide range of stories.
    • We do not post stories with profanity.
    • We cannot post videos or pictures.
    • Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.
  • We cannot guarantee that every story will be posted, but we try to post a wide range of stories.
<ul class="bullets">
	<li>We cannot guarantee that <a href="#">every story</a> will be posted, but we try to post a wide range of stories.</li>
	<li>We do not post stories with profanity.</li>
	<li>We cannot post videos or pictures.</li>
	<li>Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.
		<ul>
			<li>We cannot guarantee that every story will be posted, but we try to post a wide range of stories.</li>
			<li>We do not post stories with profanity.</li>
			<li>We cannot post videos or pictures.</li>
			<li>Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.</li>
		</ul>
	</li>
	<li>We cannot guarantee that every story will be posted, but we try to post a wide range of stories.</li>
</ul>
  • We cannot guarantee that every story will be posted, but we try to post a wide range of stories.
  • We do not post stories with profanity.
  • We cannot post videos or pictures.
  • Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.

Ordered List

  1. Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.
  2. We cannot guarantee that every story will be posted, but we try to post a wide range of stories.
  3. We do not post stories with profanity.
  4. We cannot post videos or pictures.
    1. We do not post stories with profanity.
    2. We cannot post videos or pictures.
    3. Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.
    4. We cannot guarantee that every story will be posted, but we try to post a wide range of stories.
  5. We do not post stories with profanity.
<ol>
	<li>Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.</li>
	<li>We cannot <a href="#">guarantee</a> that every story will be posted, but we try to post a wide range of stories.</li>
	<li>We do not post stories with profanity.</li>
	<li>We cannot post videos or pictures.
		<ol>
			<li>We do not post stories with profanity.</li>
			<li>We cannot post videos or <a href="#">pictures</a>.</li>
			<li>Posting your story here does not keep you from posting it elsewhere. The story is still yours. Our site is a way for you to share your story with others.</li>
			<li>We cannot guarantee that every story will be posted, but we try to post a wide range of stories.</li>
		</ol>
	</li>
	<li>We do not post stories with profanity.</li>
</ol>

Dot List

<div class="dots-list">
	<h3>Helpful Links</h3>
	<ul>
		<li><a href="#">Living with a Brain Injury</a></li>
		<li><a href="#">Your Healthcare Team</a></li>
		<li class="selected"><a href="#">Public Affairs</a>
			<ul>
				<li><a href="#">Living with a Brain Injury</a></li>
				<li><a href="#">Your Healthcare Team</a></li>
				<li class="selected"><a href="#">Public Affairs</a></li>
				<li><a href="#">About Brain Injury</a></li>
				<li><a href="#">Talk to Someone</a></li>
				<li><a href="#">Connect with Our Community</a></li>
			</ul>
		</li>
		<li><a href="#">About Brain Injury</a></li>
		<li><a href="#">Talk to Someone</a></li>
		<li><a href="#">Connect with Our Community</a></li>
	</ul>
</div>

3 Spacing

Top Margin Spacing

Margin Top 0
Margin Top 1
Margin Top 2
Margin Top 3
Margin Top 4
Margin Top 5
Margin Top 6
Margin Top 7
Margin Top 8
Margin Top 9
Margin Top 10
Margin Top 11
Margin Top 12

Bottom Margin Spacing

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

Top Padding Spacing

Padding Top 0
Padding Top 1
Padding Top 2
Padding Top 3
Padding Top 4
Padding Top 5
Padding Top 6
Padding Top 7
Padding Top 8
Padding Top 9
Padding Top 10
Padding Top 11
Padding Top 12

Bottom Padding Spacing

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

4 Buttons

Standard Buttons

Disabled Button

Expanded Button

<a class="button large" href="#">Primary Large</a>
<a class="button" href="#">Primary Default</a>
<a class="button stroke" href="#">Primary Stroke</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 stroke" href="#">Secondary Stroke</a>
<a class="button secondary tiny" href="#">Secondary Tiny</a>
<a class="button tertiary large" href="#">Tertiary Large</a>
<a class="button tertiary" href="#">Tertiary Default</a>
<a class="button tertiary stroke" href="#">Tertiary Default</a>
<a class="button tertiary tiny" href="#">Tertiary Tiny</a>
<a class="button disabled" href="#">Disabled Button</a>
<a class="button expand" href="#">Expanded Button</a>

Text Buttons

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

5 Forms

Regular Form

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

Enhanced Form

<form class="form-enhanced">
  <div class="row column">
    <label><span class="form-enhanced__label">Input Label <span class="req">*</span></span>
      <input type="text" placeholder=".row.column">
    </label>
  </div>
  <div class="row">
    <div class="medium-6 columns">
      <label><span class="form-enhanced__label">Input Label <span class="req">*</span></span>
        <input type="text" placeholder=".medium-6.columns">
      </label>
    </div>
    <div class="medium-6 columns">
      <label><span class="form-enhanced__label">Input Label <span class="req">*</span></span>
        <input type="text" placeholder=".medium-6.columns">
      </label>
    </div>
  </div>
  <div class="row">
    <div class="large-4 columns">
      <label><span class="form-enhanced__label">Input Label <span class="req">*</span></span>
        <input type="text" placeholder=".large-4.columns">
      </label>
    </div>
    <div class="large-4 columns">
      <label><span class="form-enhanced__label">Input Label <span class="req">*</span></span>
        <input type="text" placeholder=".large-4.columns">
      </label>
    </div>
    <div class="large-4 columns">
      <label><span class="form-enhanced__label">Input Label <span class="req">*</span></span>
        <input type="text" placeholder=".large-4.columns">
      </label>
    </div>
  </div>
  <div class="row column">
    <label><span class="form-enhanced__label">Select Box <span class="req">*</span></span>
      <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">
      <div class="form-enhanced__radio">
        <label>Choose Your Favorite</label>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1">
            <span></span> Radio 1 </label>
        </div>
        <div class="radio">
          <label>
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
            <span></span> Radio 2 </label>
        </div>
      </div>
    </div>
    <div class="large-6 columns">
      <div class="form-enhanced__checkbox">
        <label>Check these out</label>
        <div class="checkbox">
          <label>
            <input type="checkbox">
            <span></span> Checkbox 1 </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox">
            <span></span> Checkbox 1 </label>
        </div>
      </div>
    </div>
  </div>
  <div class="row column">
    <div class="form-enhanced__switch">
      <label>Enable Some Fun</label>
      <label class="switch">
        <input type="checkbox" />
        <span></span> </label>
    </div>
  </div>
  <div class="row column">
    <label><span class="form-enhanced__label">Textarea label <span class="req">*</span></span>
      <textarea rows="8" placeholder=".row.column"></textarea>
    </label>
  </div>
  <div class="row column">
    <button type="submit" class="button">Submit</button>
  </div>
</form>

6 Grids

Standard Grid

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

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

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

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

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

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

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

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

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

Block Grid

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

7 Page Body Components

Slide Content

Slide Toggle With Link

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

More Info

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

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

Slide Toggle With Button

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

More Info

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

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

<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
<p> <a class="slide-toggle" href="#">More Info</a> </p>
<div class="slide-content">
	<p>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>
	<p>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>
</div>
</div>
<h3>Slide Toggle With Button</h3>
<p>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>
<div class="slide-toggle-container"> <a class="slide-toggle button" href="#"> More Info</a>
<div class="slide-content">
	<p>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>
	<p>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>
</div>
</div>

Accordion

Accordion

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

Vertical Tabs

  • Tab 1
  • Tab 2
  • Tab 3

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

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

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

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

Horizontal Tabs

  • Tab 1
  • Tab 2
  • Tab 3

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

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

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

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

Tables

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

8 System Components

Alert Messages

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

Page Title - With Carousel

  <div class="page-title page-title--no-bg page-title--carousel" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/page-title-pattern.png');">
    <div class="page-title__container">
      <div class="page-title__copy">
        <h1 class="page-title__headline">Style Guide</h1>
        <h2 class="page-title__subheadline">Optional Subtitle Nullam Cursus Lacinia Erat</h2>
        <div class="page-title__overview">
          <p>Nam pretium turpis et arcu. Etiam ultricies nisi vel augue. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Phasellus a est. Phasellus accumsan cursus velit.</p>
        </div>
      </div>
			<div class="page-title__carousel">
        <article class="sponsor-panel">
         <h3 class="label label--secondary page-title__carousel-label">Our Sponsors</h3>
          <div class="js-carousel carousel mt0 mb0" data-slick='{"slidesToShow": 1,"arrows": false,"dots": true,"slidesToScroll": 1,"responsive": [{"breakpoint": 1200,"settings": {"slidesToShow": 1}}, {"breakpoint": 960,"settings": {"slidesToShow": 1}}, {"breakpoint": 640,"settings": {"slidesToShow": 3,"slidesToScroll": 3}}, {"breakpoint": 480,"settings": {"slidesToShow": 3,"slidesToScroll": 3}}]}'>
            <div class="carousel__slide">
              <div class="carousel-sponsor"><a href="#"><img src="https://via.placeholder.com/350x150"></a></div>
            </div>
            <div class="carousel__slide">
              <div class="carousel-sponsor"><img src="https://via.placeholder.com/350x150"></div>
            </div>
            <div class="carousel__slide">
              <div class="carousel-sponsor"><img src="https://via.placeholder.com/350x150"></div>
            </div>
          </div>
        </article>
      </div>
    </div>
  </div>

Page Title - Hero

About Brain Injury

Diagnosis

Optional Subtitle Nullam Cursus Lacinia Erat

Nam pretium turpis et arcu. Etiam ultricies nisi vel augue. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Phasellus a est. Phasellus accumsan cursus velit.

Example Button
<div class="page-title page-title--hero" style="background-image: url(/wp-content/uploads/virtual-brain-between-hands-header.jpg)">
	<div class="page-title__container">
		<div class="page-title__copy"> <span class="page-title__label">About Brain Injury</span>
			<h1 class="page-title__headline">Diagnosis</h1>
			<h2 class="page-title__subheadline">Optional Subtitle Nullam Cursus Lacinia Erat</h2>
			<div class="page-title__overview">
				<p>Nam pretium turpis et arcu. Etiam ultricies nisi vel augue. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Phasellus a est. Phasellus accumsan cursus velit.</p>
			</div>
			<a href="#" class="button page-title__button">Example Button</a> </div>
	</div>
</div>

Page Title - Hero Centered

Contact BIAA

Want to talk to a staff member? Get in Touch

<div class="page-title page-title--hero page-title--hero-centered" style="background-image: url(/wp-content/uploads/female-answering-call-headset-in-call-center.jpg)">
	<div class="page-title__container">
		<div class="page-title__copy">
			<h1 class="page-title__headline">Contact BIAA</h1>
			<h2 class="page-title__subheadline">Want to talk to a staff member? <a class="button" href="#">Get in Touch</a></h2>
		</div>
	</div>
</div>

Page Title - With CTA

Support Us

There are many ways to get involved

The Brain Injury Association of America helps individuals and families whose lives have been touched by brain injury and hte professionals who provide research and treatment.

Donate Your Way

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus officia, voluptatem porro similique.

Sign Up
<div class="page-title page-title--no-bg page-title--cta" style="background-image: url('<?php echo get_template_directory_uri(); ?>/assets/images/page-title-pattern.png');">
	<div class="page-title__container">
		<div class="page-title__copy">
			<h1 class="page-title__headline">Support Us</h1>
			<h2 class="page-title__subheadline">There are many ways to get involved</h2>
			<div class="page-title__overview">
				<p>The Brain Injury Association of America helps individuals and families whose lives have been touched by brain injury and hte professionals who provide research and treatment.</p>
			</div>
		</div>
		<div class="page-title__cta">
			<h3 class="page-title__cta-headline">Donate Your Way <span class="icon-gift"></span></h3>
			<p class="page-title__cta-overview">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus officia, voluptatem porro similique.</p>
			<a class="button" href="#">Sign Up</a>
		</div>
	</div>
</div>

Action Bar

Refine
Attorneys by State
Attorneys by Type
Refine by Type
Current Policy Priorities
Federal Issues
Refine by Category
Amnesia
Awareness
Family
Childhood Injury
Friendship
TBI
Spirituality
Sports
Amnesia
Awareness
Family
Childhood Injury
Friendship
TBI
Spirituality
Sports

Resource List

<section class="resource-list white-block white-block--shadow white-block--rounded">
	<article class="resource-item resource-item--pdf"><a href="#">
        <h3>Board Member Nomination Form</h3>
        </a></article>
	<article class="resource-item resource-item--word"><a href="#">
        <h3>Board Member Nomination Form</h3>
        </a></article>
	<article class="resource-item resource-item--excel"><a href="#">
        <h3>Board Member Nomination Form</h3>
        </a></article>
	<article class="resource-item resource-item--powerpoint"><a href="#">
        <h3>Board Member Nomination Form</h3>
        </a></article>
	<article class="resource-item resource-item--audio"><a href="#">
        <h3>Board Member Nomination Form</h3>
        </a></article>
	<article class="resource-item resource-item--video"><a href="#">
        <h3>Board Member Nomination Form</h3>
        </a></article>
</section>

Reading List

Continue Reading

<section class="reading-list white-block white-block--shadow white-block--rounded">
	<h2 class="white-block__heading">Continue Reading</h2>
	<article class="reading-item reading-item--label"><a href="#">
        <h3><span>Assessments in the Hospital <span class="label label--primary">Next</span></span></h3>
        </a></article>
	<article class="reading-item"><a href="#">
        <h3><span>Assessments in the Hospital Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, rem.</span></h3>
        </a></article>
	<article class="reading-item"><a href="#">
        <h3><span>Assessments in the Hospital Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, rem.</span></h3>
        </a></article>
	<article class="reading-item"><a href="#">
        <h3><span>Assessments in the Hospital</span></h3>
        </a></article>
	<article class="reading-item"><a href="#">
        <h3><span>Assessments in the Hospital</span></h3>
        </a></article>
	<article class="reading-item"><a href="#">
        <h3><span>Assessments in the Hospital</span></h3>
        </a></article>
</section>

Stats Block

BIAA Yearly Overview

Join us as we work to improve the quality of life for all people affected by brain injury.

1.5 million

Website visitors welcomed

1,500

Professional and caregiver webinar attendees educated

2,000

Brain injury specialists certified

30,000

Individual requests for help answered

15,000

Subscribers to The Challenge! – BIAA’s quarterly magazine

2015
<section class="section section--white pt10 pb10 stats-block">
	<div class="row row-site column">
		<div class="stats-block__overview">
			<h2>BIAA Yearly Overview</h2>
			<h4 class="light italic">Join us as we work to improve the quality of life for all people affected by brain injury.</h4>
		</div>
		<div class="stats-block__list">
			<div class="stats-block__item">
				<h3 class="h2">1.5 million </h3>
				<p>Website visitors welcomed</p>
			</div>
			<div class="stats-block__item">
				<h3 class="h2">1,500 </h3>
				<p>Professional and caregiver webinar attendees educated</p>
			</div>
			<div class="stats-block__item">
				<h3 class="h2">2,000 </h3>
				<p>Brain injury specialists certified</p>
			</div>
			<div class="stats-block__item">
				<h3 class="h2">30,000 </h3>
				<p>Individual requests for help answered</p>
			</div>
			<div class="stats-block__item">
				<h3 class="h2">15,000 </h3>
				<p>Subscribers to The Challenge! – BIAA’s quarterly magazine</p>
			</div>
		</div>
	</div>
	<span class="stats-block__overlay-text">2015</span>
</section>

Full Bleed Card - Small

<article class="card-full-bleed card-full-bleed--grid"><a class="card-full-bleed__image img-zoom__container img-zoom" href="#"> <img class="img-zoom__img img-zoom__img-slowest" src="/wp-content/uploads/card-full-bleed-450-450.jpg">
        <div class="card-full-bleed__overlay"> <span class="card-full-bleed__meta">june 26, 2016</span>
            <h2 class="card-full-bleed__title">TBI Model Systems Research Updates TBI Model Systems Research Updates</h2>
          </div>
        <span class="label label--primary card-full-bleed__label">Personal Story</span> </a>
</article>

Full Bleed Card - Vignette

Lisa Barbera

Lost & Found

Vignette

After seeing a Canadian Cancer Society call for volunteers in a newspaper, Rosemary knew that this was her opportunity to get started...

<article class="card-full-bleed card-full-bleed--vignette card-full-bleed--grid"> <a class="card-full-bleed__image img-zoom__container img-zoom inline-popup" href="#vignette-popup"> <img class="card-full-bleed__image img-zoom__img img-zoom__img-slowest" src="/wp-content/uploads/card-full-bleed-vignette-450-450.jpg">
	<div class="card-full-bleed__overlay"> <span class="card-full-bleed__meta">Lisa Barbera</span>
		<h2 class="card-full-bleed__title">Lost & Found</h2>
	</div>
	<span class="label label--primary card-full-bleed__label">Vignette</span> </a>
	<div class="card-full-bleed__body">
		<div class="card-full-bleed__pull-quote">
			<p>After seeing a Canadian Cancer Society call for volunteers in a newspaper, Rosemary knew that this was her opportunity to get started...</p>
		</div>
		<div class="card-full-bleed__body-link"> <a class="inline-popup" href="#vignette-popup">Read Lisa's Story</a> </div>
	</div>
	<!--Begin Vignette Popup-->
	<div id="vignette-popup" class="mfp-hide white-popup-block white-popup-block--wide">
		<article class="modal-vignette">
			<header class="modal-vignette__header">
				<div class="modal-vignette__image"><img src="/wp-content/uploads/card-full-bleed-vignette-450-450.jpg"></div>
				<h2 class="modal-vignette__title">Lost & Found</h2>
				<h3 class="modal-vignette__subtitle">A Story by Lisa Barbera</h3>
			</header>
			<blockquote class="modal-vignette__blockquote">
				<p class="quote">Her amazing career and legacy live on today, inspiring a new generation of scientists who are discovering new ways to harness the power of medical imaging to improve cancer diagnosis and treatment.</p>
			</blockquote>
			<div class="modal-vignette__overview article">
				<p>Praesent adipiscing. Ut leo. Morbi vestibulum volutpat enim. Nullam vel sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce id purus. Duis leo. Nullam nulla eros, ultricies sit amet, nonummy id, imperdiet feugiat, pede. Vestibulum volutpat pretium libero. Pellentesque libero tortor, tincidunt et, tincidunt eget, semper nec, quam. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi. Sed a libero. Vestibulum dapibus nunc ac augue. Etiam feugiat lorem non metus. Praesent congue erat at massa. Phasellus nec sem in justo pellentesque facilisis.</p>
			</div>
		</article>
	</div>
	<!--End Vignette Popup-->
</article>

Full Bleed Card Large

<article class="card-full-bleed card-full-bleed--large img-zoom__container img-zoom"><a href="#"> <img class="img-zoom__img img-zoom__img-slowest" src="/wp-content/uploads/card-full-bleed-800-450.jpg">
        <div class="card-full-bleed__overlay"> <span class="card-full-bleed__meta">June 26, 2016</span>
            <h2 class="card-full-bleed__title">TBI Model Systems Research Updates TBI Model Systems Research Updates</h2>
          </div>
        <span class="label label--primary card-full-bleed__label">News</span> </a>
</article>

Card - Article

<article class="card card--article img-zoom__container img-zoom"> <a class="card__image" href="#"> <span class="label label--primary card__label">Article Card</span> <img class="img-zoom__img img-zoom__img-slowest" src="/wp-content/uploads/card-450-220-01.jpg"> </a>
	<div class="card__body"> <span class="card__meta">June 26, 2016</span>
		<h2 class="card__title"><a href="#">TBI Model Systems Research Updates TBI Model Systems Research Updates</a></h2>
		<div class="card__overview">
			<p>What changes in thinking and social skills take place one and five years after an individual’s traumatic brain injury? </p>
		</div>
	</div>
</article>

Card - Section

Donate Your Way

Every dollar counts in the fight against brain injury! Your donation funds programs that support our mission. You may make a one-time donation or set-up a recurring gift to help further our work.

<article class="card card--section img-zoom__container img-zoom"> <a class="card__image" href="#"> <img class="img-zoom__img img-zoom__img-slowest" src="/wp-content/uploads/card-450-220-02.jpg"> </a>
	<div class="card__body">
		<h2 class="card__title"><a href="#">Donate Your Way</a></h2>
		<div class="card__overview">
			<p>Every dollar counts in the fight against brain injury! Your donation funds programs that support our mission. You may make a one-time donation or set-up a recurring gift to help further our work.</p>
		</div>
	</div>
</article>

Card - Product

<article class="card card--product img-zoom__container img-zoom"> <a class="card__image" href="#"> <img class="img-zoom__img img-zoom__img-slowest" src="/wp-content/uploads/card-450-220-product.jpg"> </a>
	<div class="card__body">
		<h2 class="card__title"><a href="#">The Essential Brain Injury Guide</a></h2>
		<span class="card__subtitle">Edition 5.0</span>
		<div class="card__overview">
			<p>The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.</p>
		</div>
		<div class="card__product"> <a class="card__product-link" href="#"><span class="icon-list2"></span> View Details</a> <span class="card__product-price">$135</span> </div>
	</div>
</article>

Card - Index

Brain Injury Basics

The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.

  • How the Brain Works (Diagram)
  • Types and Causes of Brain Injury
  • What Happens to Your Brain after Injury
<article class="card card--index img-zoom__container img-zoom"> <a class="card__image" href="#"> <img class="img-zoom__img img-zoom__img-slowest" src="/wp-content/uploads/card-450-220-03.jpg"> </a>
	<div class="card__body">
		<h2 class="card__title"><a href="#">Brain Injury Basics</a></h2>
		<div class="card__overview">
			<p>The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.</p>
		</div>
		<div class="dots-list">
			<ul>
				<li>How the Brain Works (Diagram)</li>
				<li>Types and Causes of Brain Injury</li>
				<li>What Happens to Your Brain after Injury</li>
			</ul>
		</div>
	</div>
</article>

Card - Basic

Become an Affiliate

Curab itur a felis in nunc fringilla tristique. Phasellus a est. Pellen tesque habitant morbi. Nam commodo suscipit quam..

Apply Now
<article class="card card--basic">
	<div class="card__body">
		<h2 class="card__title"><a href="#">Become an Affiliate</a></h2>
		<div class="card__overview">
			<p>Curab itur a felis in nunc fringilla tristique. Phasellus a est. Pellen tesque habitant morbi. Nam commodo suscipit quam..</p>
		</div>
		<a class="button tiny" href="#">Apply Now</a> </div>
</article>

Card - Icon

<article class="card card--icon"><a href="#">
        <div class="card__body">
            <div class="card__icon"><span class="icon-briefcase"></span></div>
            <h2 class="card__title">Become an Affiliate</h2>
            <div class="card__overview">
              <p>Curab itur a felis in nunc fringilla tristique. Phasellus a est. Pellen tesque habitant morbi. Nam commodo suscipit quam..</p>
            </div>
          </div>
        </a></article>

Card - Index Large

Brain Injury Basics

The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.

  • How the Brain Works (Diagram)
  • Types and Causes of Brain Injury
  • What Happens to Your Brain after Injury
<article class="card card--index card--index-large img-zoom__container img-zoom"> <a class="card__image" href="#">
	<div class="card__image-bg img-zoom__img img-zoom__img-slowest" style="background-image: url(/wp-content/uploads/card-450-220-03.jpg)"></div>
	</a>
	<div class="card__body">
		<h2 class="card__title"><a href="#">Brain Injury Basics</a></h2>
		<div class="card__overview">
			<p>The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.</p>
		</div>
		<div class="dots-list">
			<ul>
				<li>How the Brain Works (Diagram)</li>
				<li>Types and Causes of Brain Injury</li>
				<li>What Happens to Your Brain after Injury</li>
			</ul>
		</div>
	</div>
</article>

Card - Resource

Brain Injury Support Groups

Brain injury support groups can be a valuable source of information, emotional support, encouragement and social activities for people who have sustained a brain injury as well as family members and other caregivers.

  • How the Brain Works (Diagram)
  • Types and Causes of Brain Injury
  • What Happens to Your Brain after Injury
Apply Now

Brain Injury Support Groups

Brain injury support groups can be a valuable source of information, emotional support, encouragement and social activities for people who have sustained a brain injury as well as family members and other caregivers.

  • How the Brain Works (Diagram)
  • Types and Causes of Brain Injury
  • What Happens to Your Brain after Injury
Apply Now
<article class="card card--resource">
	<div class="card__body">
		<h2 class="card__title"><a href="#">Brain Injury Support Groups</a></h2>
		<div class="card__overview">
			<p>Brain injury support groups can be a valuable source of information, emotional support, encouragement and social activities for people who have sustained a brain injury as well as family members and other caregivers.</p>
		</div>
		<div class="dots-list">
			<ul>
				<li>How the Brain Works (Diagram)</li>
				<li>Types and Causes of Brain Injury</li>
				<li>What Happens to Your Brain after Injury</li>
			</ul>
		</div>
		<a class="button tiny" href="#">Apply Now</a> </div>
</article>

Art Module

Sign up for Policy Corner

Duis lobortis massa imperdiet quam. Maecenas ullamcorper, dui et placerat feugiat.

Sign Up
<article class="art-panel">
	<h2 class="art-panel__title">Sign up for Policy Corner</h2>
	<div class="art-panel__overview">
		<p>Duis lobortis massa imperdiet quam. Maecenas ullamcorper, dui et placerat feugiat.</p>
	</div>
	<a class="button" href="#">Sign Up</a>
</article>

Logo Carousel

<article class="sponsor-panel">
	<h3 class="label label--secondary sponsor-panel__label">Our Sponsors</h3>
	<div class="js-carousel carousel" data-slick='{"slidesToShow": 1,"arrows": false,"dots": true,"slidesToScroll": 1,"responsive": [{"breakpoint": 1200,"settings": {"slidesToShow": 1}}, {"breakpoint": 960,"settings": {"slidesToShow": 1}}, {"breakpoint": 640,"settings": {"slidesToShow": 1,"slidesToScroll": 1}}, {"breakpoint": 480,"settings": {"slidesToShow": 3,"slidesToScroll": 3}}]}'>
		<div class="carousel__slide">
			<div class="carousel-sponsor"><a href="#"><img src="https://via.placeholder.com/350x150"></a></div>
		</div>
		<div class="carousel__slide">
			<div class="carousel-sponsor"><img src="https://via.placeholder.com/350x150"></div>
		</div>
		<div class="carousel__slide">
			<div class="carousel-sponsor"><img src="https://via.placeholder.com/350x150"></div>
		</div>
	</div>
</article>

Event

Events

Jul 26

TBI Model Systems Research Updates

The Brain Injury Association of America is proud to collaborate with selected TBI Model System sites to share research findings about brain injury. The most rece..

<article class="event-item">
	<h3 class="label label--secondary">Events</h3>
	<div class="event-item__wrapper">
		<div class="event-item__date"><span class="event-item__date-month">Jul</span> <span class="event-item__date-day">26</span></div>
		<div class="event-item__body">
			<h2 class="event-item__title"><a href="#">TBI Model Systems Research Updates</a></h2>
			<p class="event-item__overview">The Brain Injury Association of America is proud to collaborate with selected TBI Model System sites to share research findings about brain injury. The most rece.. </p>
		</div>
	</div>
</article>

Side Modules

Lisa Barbera

Lost & Found

Vignette

After seeing a Canadian Cancer Society call for volunteers in a newspaper, Rosemary knew that this was her opportunity to get started...

Donate Your Way

Every dollar counts in the fight against brain injury! Your donation funds programs that support our mission. You may make a one-time donation or set-up a recurring gift to help further our work.

Brain Injury Basics

The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.

  • How the Brain Works (Diagram)
  • Types and Causes of Brain Injury
  • What Happens to Your Brain after Injury

Become an Affiliate

Curab itur a felis in nunc fringilla tristique. Phasellus a est. Pellen tesque habitant morbi. Nam commodo suscipit quam..

Apply Now

Sign up for Policy Corner

Duis lobortis massa imperdiet quam. Maecenas ullamcorper, dui et placerat feugiat.

Sign Up

Events

Jul 26

TBI Model Systems Research Updates

The Brain Injury Association of America is proud to collaborate with selected TBI Model System sites to share research findings about brain injury. The most rece..

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis pariatur repellat aut, atque quisquam nam dolorem, corrupti id modi nobis ducimus quos vel aspernatur laborum quia in illum, expedita velit quibusdam veritatis natus cupiditate cum ipsa est? Quos, aperiam, fugit. Aut est, sunt nobis tempora sit dolores quisquam libero autem odio voluptas consequuntur necessitatibus voluptatum harum nihil nostrum aliquam nisi in ut enim modi deleniti doloremque! Dolore quia nesciunt, delectus sed quos tenetur, neque animi, unde suscipit incidunt facere reprehenderit eum in esse fuga quibusdam. Error facere id velit, esse voluptatum totam vitae, ab omnis officia rerum voluptatem eum voluptatibus.

Profile List

  • Name
  • Title
  • Email Address
  • Phone

Susan H. Connoers

Director of Professional Services

Travis Padilla

Community Outreach Specialist

<section class="profile-list">
		<div class="profile-list__header">
			<ul>
				<li>Name</li>
				<li>Title</li>
				<li>Email Address</li>
				<li>Phone</li>
			</ul>
		</div>
		<div class="profile-list__body">
			<div class="profile-list__item">
				<div class="profile-list__mobile-col">
					<div class="profile-list__col">
						<div class="profile-list__col-inner">
							<div class="profile-list__image"><img src="/wp-content/uploads/women-01.jpg"></div>
							<div class="profile-list__name">
								<h3>Susan H. Connoers</h3>
							</div>
						</div>
					</div>
					<div class="profile-list__col">
						<div class="profile-list__col-inner">
							<p class="profile-list__title">Director of Professional Services</p>
						</div>
					</div>
				</div>
				<div class="profile-list__mobile-col">
					<div class="profile-list__col">
						<div class="profile-list__col-inner"> <a class="profile-list__email" href="mailto:sconnors@biausa.org">sconnors@biausa.org</a> </div>
					</div>
					<div class="profile-list__col">
						<div class="profile-list__col-inner"> <a class="profile-list__phone" href="tel:1231232134">703-123-1234</a> </div>
					</div>
				</div>
			</div>
			<div class="profile-list__item">
				<div class="profile-list__mobile-col">
					<div class="profile-list__col">
						<div class="profile-list__col-inner">
							<div class="profile-list__image"><img src="/wp-content/uploads/man-01.jpg"></div>
							<div class="profile-list__name">
								<h3>Travis Padilla</h3>
							</div>
						</div>
					</div>
					<div class="profile-list__col">
						<div class="profile-list__col-inner">
							<p class="profile-list__title">Community Outreach Specialist</p>
						</div>
					</div>
				</div>
				<div class="profile-list__mobile-col">
					<div class="profile-list__col">
						<div class="profile-list__col-inner"> <a class="profile-list__email" href="mailto:sconnors@biausa.org">sconnors@biausa.org</a> </div>
					</div>
					<div class="profile-list__col">
						<div class="profile-list__col-inner"> <a class="profile-list__phone" href="tel:1231232134">703-123-1234</a> </div>
					</div>
				</div>
			</div>
		</div>
	</section>

Profile Grid - Standard

<article class="profile-grid">
	<div class="profile-grid__image"><a href="#"><img src="/wp-content/uploads/profile-grid-600-600.jpg"></a></div>
	<h2 class="profile-grid__title"><a href="#">Orientation and Awareness</a></h2>
	<div class="profile-grid__overview">
		<p>Basic Implications for Independence and Brain Injury Rehabilitation</p>
	</div>
	<h4 class="profile-grid__credits">Jerry Thompson</h4>
	<div class="profile-grid__count"><span>3</span></div>
</article>

Profile Grid - Team

<article class="profile-grid">
	<div class="profile-grid__image"><a href="#"><img src="/wp-content/uploads/women-01.jpg"></a></div>
	<h2 class="profile-grid__title"><a href="#">Orientation and Awareness</a></h2>
	<h3 class="profile-grid__subtitle">Position/Title</h3>
	<ul class="profile-grid__meta">
		<li>Location</li>
		<li>Overview</li>
	</ul>
</article>

Article Header

James F. Humphreys & Associates, L.C.

Serving: DC, MD, VA

Send Us an Email Watch Video
<div class="article-header">
	<div class="article-header__image"> <img src="/wp-content/uploads/article-header-600-600.jpg"> </div>
	<div class="article-header__body">
		<h2 class="article-header__title">James F. Humphreys & Associates, L.C.</h2>
		<h3 class="article-header__subtitle">Serving: <span class="dark-blue">DC, MD, VA</span></h3>
		<ul class="article-header__meta">
			<li><span class="icon-location"></span> 10 Hale Street, Suite 400, Charleston, WV 25301</li>
			<li><span class="icon-phone"></span> <a href="tel:1231231234">304-347-5050</a></li>
			<li><span class="icon-desktop"></span> <a href="http://www.jfhumphreys.com" target="_blank">www.jfhumphreys.com</a></li>
		</ul>
		<div class="article-header__actions"><a class="button" href="#">Send Us an Email</a> <a class="button tertiary" href="#"><span class="icon-controller-play"></span> Watch Video</a></div>
	</div>
</div>

Block Links

<div class="section-link">
	<div class="section-link__image"><a href="#"><img src="/wp-content/uploads/article-header-600-600.jpg"></a></div>
	<div class="section-link__body">
		<h2 class="section-link__title">Find a Preferred Attorney</h2>
		<div class="section-link__overview">
			<p>Phasellus accumsan cursus velit. Etiam iaculis nunc ac metus. Aenean imperdiet.</p>
		</div>
		<div class="section-link__actions"><a class="button" href="#">View Attorneys</a> </div>
	</div>
</div>

Issues

<article class="issue-item"><a href="#">
    <div class="issue-item__image"><img src="/wp-content/uploads/issue-01.jpg">
        <div class="issue-item__image-overlay"><span class="icon-cloud-download"></span> Download</div>
      </div>
    <span class="issue-item__meta">Winter 2016</span>
    <h2 class="issue-item__title">Maintaining Relationships</h2>
    </a>
</article>

CTA Body Bar

Show your support by donating to BIA Texas Donate
<div class="cta-body-bar">
	<div class="cta-body-bar__body"> <span class="cta-body-bar__title">Show your support by donating to BIA Texas</span> <a class="cta-body-bar__button button secondary" href="#">Donate</a> </div>
</div>

Twitter Carousel

Section - Block Links

<section class="section section--blue pt10 pb10">
	<div class="row row-site column">
		<div class="large-6 columns column-block">
			<div class="section-link">
				<div class="section-link__image"><a href="#"><img src="/wp-content/uploads/article-header-600-600.jpg"></a></div>
				<div class="section-link__body">
					<h2 class="section-link__title">Find a Preferred Attorney</h2>
					<div class="section-link__overview">
						<p>Phasellus accumsan cursus velit. Etiam iaculis nunc ac metus. Aenean imperdiet.</p>
					</div>
					<div class="section-link__actions"><a class="button" href="#">View Attorneys</a> </div>
				</div>
			</div>
		</div>
		<div class="large-6 columns column-block">
			<div class="section-link">
				<div class="section-link__image"><a href="#"><img src="/wp-content/uploads/article-header-600-600.jpg"></a></div>
				<div class="section-link__body">
					<h2 class="section-link__title">Find a Preferred Attorney</h2>
					<div class="section-link__overview">
						<p>Phasellus accumsan cursus velit. Etiam iaculis nunc ac metus. Aenean imperdiet.</p>
					</div>
					<div class="section-link__actions"><a class="button" href="#">View Attorneys</a> </div>
				</div>
			</div>
		</div>
	</div>
</section>

Section - Full Width Card - Right

BIA Shop

Learn. Shop. Give

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

Visit the Marketplace
<section class="full-card">
	<div class="full-card__inner">
		<div class="full-card__image" style="background-image:url(/wp-content/uploads/full-width-card-800-800.jpg)"></div>
		<div class="full-card__info">
			<div class="full-card__info-inner">
				<div class="full-card__info-valign"> <span class="full-card__subtitle">BIA Shop</span>
					<h2 class="full-card__headline">Learn. Shop. Give</h2>
					<div class="full-card__overview">
						<p>Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.</p>
						<a class="button" href="#">Visit the Marketplace</a> </div>
				</div>
			</div>
		</div>
	</div>
</section>

Section - Full Width Card - Left

BIA Shop

Learn. Shop. Give

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

Visit the Marketplace
<section class="full-card full-card--left">
	<div class="full-card__inner">
		<div class="full-card__image" style="background-image:url(/wp-content/uploads/full-width-card-800-800.jpg)"></div>
		<div class="full-card__info">
			<div class="full-card__info-inner">
				<div class="full-card__info-valign"> <span class="full-card__subtitle">BIA Shop</span>
					<h2 class="full-card__headline">Learn. Shop. Give</h2>
					<div class="full-card__overview">
						<p>Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.</p>
						<a class="button" href="#">Visit the Marketplace</a> </div>
				</div>
			</div>
		</div>
	</div>
</section>

Page Banner

Optional Label

Have a Story to Share?

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

Share a Story
<section class="page-banner">
	<div class="page-banner__bg" style="background-image: url(/wp-content/uploads/page-banner-1440-600.jpg)"></div>
	<div class="page-banner__wrapper row row-site column">
		<div class="row">
			<div class="page-banner__body medium-10 large-9 xlarge-8 xxlarge-7 medium-centered column"> <span class="page-banner__label">Optional Label</span>
				<h2 class="page-banner__title">Have a Story to Share?</h2>
				<div class="page-banner__overview">
					<p>Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.</p>
				</div>
				<a class="button" href="#">Share a Story</a> </div>
		</div>
	</div>
</section>

Page Banner - Video

Optional Label

Have a Story to Share?

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

<section class="page-banner">
	<div class="page-banner__bg" style="background-image: url(/wp-content/uploads/page-banner-1440-600.jpg)"></div>
	<div class="page-banner__wrapper row row-site column">
		<div class="row">
			<div class="page-banner__body medium-10 large-9 xlarge-8 xxlarge-7 medium-centered column"> <span class="page-banner__label">Optional Label</span>
				<h2 class="page-banner__title">Have a Story to Share?</h2>
				<div class="page-banner__overview">
					<p>Nunc nec neque. Donec vitae sapien ut libero venenatis faucibus. Mauris sollicitudin fermentum libero. Nam ipsum risus, rutrum vitae, vestibulum eu, molestie vel, lacus.</p>
				</div>
				<a class="page-banner__video-buttton popup-video" href="https://vimeo.com/209923965"><span class="icon-play"></span></a> </div>
		</div>
	</div>
</section>

 

Stay connected with the brain injury community!

The Brain Injury Association of America has many educational opportunities, events, and resources that are shared throughout the year. Be sure to stay in the know by joining our mailing list.

Sign up for updates