Style Guide
1 Color Palette
<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
<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
<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
- 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.
- 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.
<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
Helpful Links
<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
Bottom Margin Spacing
<div class="mt0">Margin Top 0</div>
<div class="mt1">Margin Top 1</div>
<div class="mt2">Margin Top 2</div>
<div class="mt3">Margin Top 3</div>
<div class="mt4">Margin Top 4</div>
<div class="mt5">Margin Top 5</div>
<div class="mt6">Margin Top 6</div>
<div class="mt7">Margin Top 7</div>
<div class="mt8">Margin Top 8</div>
<div class="mt9">Margin Top 9</div>
<div class="mt10">Margin Top 10</div>
<div class="mt11">Margin Top 11</div>
<div class="mt12">Margin Top 12</div>
<div class="mb0">Margin Bottom 0</div>
<div class="mb1">Margin Bottom 1</div>
<div class="mb2">Margin Bottom 2</div>
<div class="mb3">Margin Bottom 3</div>
<div class="mb4">Margin Bottom 4</div>
<div class="mb5">Margin Bottom 5</div>
<div class="mb6">Margin Bottom 6</div>
<div class="mb7">Margin Bottom 7</div>
<div class="mb8">Margin Bottom 8</div>
<div class="mb9">Margin Bottom 9</div>
<div class="mb10">Margin Bottom 10</div>
<div class="mb11">Margin Bottom 11</div>
<div class="mb12">Margin Bottom 12</div>
Top Padding Spacing
Bottom Padding Spacing
<div class="pt0">Padding Top 0</div>
<div class="pt1">Padding Top 1</div>
<div class="pt2">Padding Top 2</div>
<div class="pt3">Padding Top 3</div>
<div class="pt4">Padding Top 4</div>
<div class="pt5">Padding Top 5</div>
<div class="pt6">Padding Top 6</div>
<div class="pt7">Padding Top 7</div>
<div class="pt8">Padding Top 8</div>
<div class="pt9">Padding Top 9</div>
<div class="pt10">Padding Top 10</div>
<div class="pt11">Padding Top 11</div>
<div class="pt12">Padding Top 12</div>
<div class="pb0">Padding Bottom 0</div>
<div class="pb1">Padding Bottom 1</div>
<div class="pb2">Padding Bottom 2</div>
<div class="pb3">Padding Bottom 3</div>
<div class="pb4">Padding Bottom 4</div>
<div class="pb5">Padding Bottom 5</div>
<div class="pb6">Padding Bottom 6</div>
<div class="pb7">Padding Bottom 7</div>
<div class="pb8">Padding Bottom 8</div>
<div class="pb9">Padding Bottom 9</div>
<div class="pb10">Padding Bottom 10</div>
<div class="pb11">Padding Bottom 11</div>
<div class="pb12">Padding Bottom 12</div>
4 Buttons
Standard Buttons
<a class="button large" href="#">Primary Large</a>
<a class="button" href="#">Primary Default</a>
<a class="button 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.
Slide Toggle With Button
Normal Paragraph enean tellus metus, bibendum sed, posuere ac, mattis non, nunc. Fusce commodo aliquam arcu. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Praesent egestas tristique nibh. In hac habitasse platea dictumst. Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula, eget egestas libero turpis vel mi. Praesent egestas neque eu enim.
<h3>Slide Toggle With Link</h3>
<p>Ut a nisl id ante tempus hendrerit. Phasellus ullamcorper ipsum rutrum nunc. Vivamus
laoreet. Donec interdum, metus et hendrerit aliquet, dolor diam sagittis ligula,
eget egestas libero turpis vel mi. Praesent egestas neque eu enim.</p>
<div class="slide-toggle-container">
<p> <a class="slide-toggle" href="#">More Info</a> </p>
<div class="slide-content">
<p>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
Style Guide
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.
<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
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.
<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
Resource List
Board Member Nomination Form
Board Member Nomination Form
Board Member Nomination Form
Board Member Nomination Form
Board Member Nomination Form
Board Member Nomination Form
<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
Assessments in the Hospital Next
Assessments in the Hospital Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, rem.
Assessments in the Hospital Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla, rem.
Assessments in the Hospital
Assessments in the Hospital
Assessments in the Hospital
<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
<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
After seeing a Canadian Cancer Society call for volunteers in a newspaper, Rosemary knew that this was her opportunity to get started...
Lost & Found
A Story by Lisa Barbera
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.
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.
<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
TBI Model Systems Research Updates TBI Model Systems Research Updates
What changes in thinking and social skills take place one and five years after an individual’s traumatic brain injury?
<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
The Essential Brain Injury Guide
Edition 5.0The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.
<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..
<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
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
<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.
<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
Our Sponsors
<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
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
After seeing a Canadian Cancer Society call for volunteers in a newspaper, Rosemary knew that this was her opportunity to get started...
Lost & Found
A Story by Lisa Barbera
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.
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.
TBI Model Systems Research Updates TBI Model Systems Research Updates
What changes in thinking and social skills take place one and five years after an individual’s traumatic brain injury?
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.
The Essential Brain Injury Guide
Edition 5.0The all-new Essential Brain Injury Guide, Edition 5.0 provides vital information about brain injury, its treatment and rehabilitation.
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..
Sign up for Policy Corner
Duis lobortis massa imperdiet quam. Maecenas ullamcorper, dui et placerat feugiat.
Our Sponsors
Events
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
Orientation and Awareness
Basic Implications for Independence and Brain Injury Rehabilitation
Jerry Thompson
<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
Orientation and Awareness
Position/Title
<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
<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
Find a Preferred Attorney
Phasellus accumsan cursus velit. Etiam iaculis nunc ac metus. Aenean imperdiet.
Find a Preferred Attorney
Phasellus accumsan cursus velit. Etiam iaculis nunc ac metus. Aenean imperdiet.
<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
<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
Find a Preferred Attorney
Phasellus accumsan cursus velit. Etiam iaculis nunc ac metus. Aenean imperdiet.
Find a Preferred Attorney
Phasellus accumsan cursus velit. Etiam iaculis nunc ac metus. Aenean imperdiet.
<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
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
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
<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
<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.